jQuery(一)_选择器

jQuery(一)_选择器

1.jQuery简介

image.png

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

• jQuery的优点

  jQuery最大的优势，就是特别的方便。

  比如模仿CSS获取DOM，比原生的JavaScript要方便太多。并且在多个CSS设置上的集中处理非常舒服，而最常用的CSS功能又封装到单独的方法，感觉非常有心。

  最重要的是jQuery的代码兼容性非常好，你不需要总是头疼着考虑不同浏览器的兼容问题。

2.安装与卸载

• npm安装

  npm i jquery@1 --save
  

• npm卸载

  npm uninstall jquery
  

3.代码风格

在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$

$”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写。

$(function () { });//执行一个匿名函数
$("#box");//进行执行的ID元素选择
$("#box").css("color", "red");//执行功能函数

由于$本身就是jQuery对象的缩写形式，那么也就是说上面的三段代码也可以写成如下形式：

jQuery(function () { });
jQuery("#box");
jQuery("#box").css("color", "red");

jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。

$('#box').css('color','red').css('font-size','50px');//连缀

4.jQuery选择器

jQuery最核心的组成部分就是：选择器引擎。

它继承了CSS的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性。

所有的方法比复杂选择器检索更快

$("<div></div>").appendTo("body").css({
    "backgroundColor": "red",
    width: "50px",
    height: "50px"
}).on("click", function () {
    $(this).css("backgroundColor", "blue")
});

• 元素选择器

  $("p");//选取 <p> 元素
  $("p.intro");// 选取所有 class="intro" 的 <p> 元素
  $("p#demo");// 选取所有 id="demo" 的 <p> 元素
  $(".div0,.div1");//群组选择器 选择所有class是div0 和 div1的元素
  

• 后代选择器

  $("div .div1");//div 容器内所有后代中class是div1的
  $("div.div1");//所有div中class是div1的元素
  $("div *");//div的所有后代元素
  $("div.div1").text("你好");// 所有的方法比复杂选择器更快
  $("div").find(".div1");//$("div .div1");
  

• 子代选择器

  $("div>.div1")//div标签下的div1,只能检索一层
  $("div>*");//所有子元素
  $("div").children(".div1");//$("div>.div1");
  $("div").children();//$("div>*");
  

• 相邻兄弟选择器

  $("div+div");//到div的所有div兄弟节点
  $("div+*");//找div的所有兄弟节点
  $(".div1+a").text("你好");
  $("div").next("div");//$("div+div");
  

• 兄弟选择器

  $("div~div");//兄弟选择器
  $("div~*");
  $("div").nextAll("div");//$("div~div");
  
  $(".div2").nextUntil(".div1").text("你好");
  $(".div2").next().text("你好");
  $(".div2").nextAll().text("你好");
  
  $(".div1").prev();//查找class是div1元素的上一个兄弟选择器
  $(".div1").prevAll();//查找class是div1元素的上面所有的兄弟选择器
  $(".div1").prevUntil(".div2");//查找class是div1元素到上面那个元素位置的兄弟选择器
  

• 属性选择器

  $("input[type]");//获取input有type属性的
  $("input[type=text]");//获取input中type属性是text的
  $("input[type!=text]");//获取input中type属性值不是text的
  $("input[name^=a]");//获取input中name属性值以a起头的
  $("input[name$=b]");//获取input中name属性值以b结束的
  $("input[data|=a]");//获取input中data属性值是a或者是以a为起始后面紧接-的值
  $("input[class~=a]");//获取input中class属性值是a或者包含a,并且前后有空格的值
  $("input[class*=a]");//获取input中class属性值在任意位置包含字符a
  

• 基本过滤器

  //将所有的li放在一个列表中，选择第一个
  $("li:first").css("color","red");
  $("li").first();
  //该选择器是对应父容器的第一个子元素
  $("li:first-child").css("color","red");
  
  //该选择器是父容器里面找到该选择器类型的第一个元素
  $("li:first-of-type").css("color","red");
  
  //nth-child是从第一个元素开始
  $("li:nth-child(1)").css("color","red");
  
  //所有的偶数元素，只计算当前父元素的偶数项
  $("li:nth-child(2n)").css("color", "red");
  $("li:nth-child(even)").css("color", "red");
  
  //所有的奇数元素，只计算当前父元素的奇数项
  $("li:nth-child(2n-1)").css("color", "red");
  $("li:nth-child(odd)").css("color", "red");
  
  //子元素中第一个li元素，强调li元素
  $("li:nth-of-type(1)").css("color", "red");
  $("li:nth-of-type(2n)").css("color", "red")
  $("li:nth-of-type(even)").css("color", "red")
  $("li:nth-of-type(2n-1)").css("color", "red")
  $("li:nth-of-type(odd)").css("color", "red")
  
  //将所有的li放在一个列表中，获取他的偶数项，从0开始计数
  $("li:even").css("color","red");
  //将所有的li放在一个列表中，获取他的奇数项，从0开始计数
  $("li:odd").css("color","red");
  
  //将所有li放在一个列表中，获取第几个jQuery对象，从0开始计数
  //放在一个列表中，选择等于2的
  $("li:eq(1)");
  $("li").eq(1);
  //放在一个列表中，选择小于2的
  $("li:lt(2)").css("color","red");
  //放在一个列表中，选择大于2的
  $("li:gt(2)").css("color","red");
  
  //获取所有h1-h6的元素
  $(":header");
  
  

• 常用过滤器

  //查找子元素或者没有内容的元素，空元素
  $("div:empty");
  //判断查找在某个元素中后代有class是div0的元素
  $("div:has(.div0)");
  //查找当前class是div2的所有元素中有子元素或者内容的
  $(".div2:parent");
  //查找当前选择器列表中或者后代中含有字符内容是'2'的
  $(".div1:contains('2')");
  

  //获取当前选择器的父元素
  $(".div2").parent();
  //获取所有父元素
  $(".div2").parents();
  //获取所有父元素中其中一个
  $(".div2").parents("body");
  

  //获取所有不可见元素，所有不可显示的元素也是不可见元素
  $(":hidden");
  //获取可见元素 visibility: hidden;
  $(".div1:visible");
  //查找该元素是否是父元素的唯一子标签
  $("a:only-child");
  

  //判断选择后列表中有没有后面选择器的内容，返回布尔值
  $("div").is(".div1");
  $(".div2").is("a");
  //判断所有a标签列表中是否有class是div2的元素，返回布尔值(专门用来判断class,速度更快)
  $("a").hasClass("div2");
  

  //快速选择表单中内容
  $(":input");
  $(":text");
  $(":password");
  $(":checkbox");
  $(":file");
  $(":enabled")//可用表单
  $(":disabled");//禁用表单
  $(":checked");//checkbox和radio是否选中
  $(":selected");//select选中的内容