海阔天空

手机扫码查看

2020javaweb教程之jQuery和jQuery选择器

概述：
jQuery是一个快速、简洁的JavaScript框架。
jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。

什么是jQuery？
jQuery是一个JavaScript函数库

下载jQuery：
1 jQuery.com 下载jQuery库
2.从CDN中载入jQuery

语法：<script src=”uri”></script>

百度cdn：
<script src=”https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”>

新浪cdn：
<script src=”http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js”>

Google CDN：
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>

Microsoft CDN：
<script src=”http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js”>

jQuery语法：

<script>
  $(function(){
    alert("执行jQuery语句");
  })
</script>

jQuery选择器

元素选择器

<p id="p1">p1</p>
<p class="p2">p2</p>
<button id="btn1">隐藏p标签</button>
<button id="btn2">隐藏p1标签</button>
<button id="btn3">隐藏p2标签</button>
<script>
  $(function(){
    //元素选择器
    $("#btn1").click(function () {
      $("p").hide();
    });
    //id选择器
    $("#btn2").click(function(){
      $("#p1").hide();
    });
    //class选择器
    $("#btn3").click(function () {
      $(".p2").hide();
    });
  })
</script>

层级选择器

<div id="div">
  <p id="p1">div_p1</p>
  <p>div_p2</p>
  <p>div_p3</p>
  <ul>
    <li id="li1">li1</li>
    <li class="li2">li2</li>
    <li>li3</li>
  </ul>
  <div id="div2">
    <p>div_div2_p1</p>
    <p>div_div2_p2</p>
  </div>
</div>
<button id="btn1">改变div的所有p标签</button>
<button id="btn2">改变div后面的p标签</button>
<button id="btn3">改变div_p1后面的p标签</button>
<button id="btn4">改变div_p1同级别的标签</button>
<script>
  $(function(){
    $("#btn1").click(function () {//后代选择器
      $("#div p").css("color","red");
    });
    $("#btn2").click(function(){//父子选择器
      $("#div>p").css("color","orange");
    });
    $("#btn3").click(function () {//同辈选择器
      $("#p1+p").css("color","green");
    });
    $("#btn4").click(function () {//后续同辈选择器
      $("#p1~p").css("color","blue");
    });
  })
</script>

过滤选择器

<div id="div">
  <p id="p1">div_p1</p>
  <p>div_p2</p>
  <p>div_p3</p>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  <div id="div2">
    <p>div_div2_p1</p>
    <p>div_div2_p2</p>
  </div>
</div>
<button id="btn1">改变第一个li标签</button>
<button id="btn2">改变li2之后的li标签</button>
<button id="btn3">改变除li1以外的li标签</button>
<button id="btn4">改变小于li3以外的标签</button>
<script>
  $(function(){
    $("#btn1").click(function () {//改变第一个li标签
      $("#div li:first").css("color","orange");
    });
    $("#btn2").click(function(){//改变大于第二个li标签
      $("#div li:gt(1)").css("color","red");
    });
    $("#btn3").click(function(){//改变除第一个li标签
      $("#div li:not(:first)").css("color","green");
    });
    $("#btn4").click(function(){//改变小于第三个li标签
      $("#div li:lt(2)").css("color","red");
    });
  })
</script>

 

属性选择器

<div id="div">
  <ul>
    <li class="li1">li1</li>
    <li class="li2">li2</li>
    <li class="ali3">ali3</li>
  </ul>
</div>
<button id="btn1">改变li开头的li标签</button>
<button id="btn2">改变id为li2的li标签</button>
<button id="btn3">改变a开头的li标签</button>
<button id="btn4">改变2结尾的li标签</button>
<script>
  $(function(){
    $("#btn1").click(function(){//有class属性的li
      $("#div li[class]").css("color","red");
    });
    $("#btn2").click(function(){//class为 li2的li
      $("#div li[class='li2']").css("color","orange");
    });
    $("#btn3").click(function(){//class为 a开头的li
      $("#div li[class^=a]").css("color","green");
    });
    $("#btn4").click(function(){//class为 2结尾的li
      $("#div li[class$='2']").css("color","blue");
    });
  })
</script>