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选中的内容
