JQuery知识点

JQuery

jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。就像官方所宣称的那样——"Write less，do more"，它使得我们常用的HTML文档遍历、DOM操作、事件处理、动画效果、Ajax、工具方法等功能代码的实现变得非常简单。更重要的是，它还为我们做了跨浏览器的兼容。绝大多数时候，不用担心我的JS兼容问题了(由于浏览器bug等因素，jQuery也无法100%地实现跨浏览器兼容，官方对这些少数API一般也作了特殊说明，而且这种情况极少遇到，因此可以忽略不计)。

jQuery 理念: 写得少, 做得多. 优势如下:

• 轻量级
• 强大的选择器
• 出色的 DOM 操作的封装
• 可靠的事件处理机制
• 完善的 Ajax
• 出色的浏览器兼容性
• 链式操作方式
• …

1.jQuery 配置

在页面头部head中，添加js

1.1 语法

 <!-- 编写JS代码并使用jQuery --><script type="text/javascript">// 以下代码将把id为username的元素的value值改为"Hello CodePlayer!"。jQuery("#username").val("Hello CodePlayer!");//$是jQuery的别名，因为JS支持使用$作为变量名称，而且$更加简短、易于书写.$("#username").val("Hello CodePlayer!");</script>

1.2 ready() 准备就绪时执行代码

ready()函数的作用相当于window.onload，它用于在当前文档加载准备就绪后执行对应的函数。

<script type="text/javascript">  $(document).ready(function(){  // 在这里编写我们希望在DOM准备就绪后执行的代码});//如果你觉得这种写法有点麻烦，你还可以使用下面这种简写的方法：// $( function ) 是 $(document).ready( function ) 的简写形式$( function(){  // 在这里编写我们希望在DOM准备就绪后执行的代码} );</script>

1.3 选取元素

使用jQuery 选择器选取元素，并封装为jQuery对象

在JS原生DOM中，要对DOM元素进行操作，首先得获取到对应的元素(getElementById()、 getElementsByTagName()等)，然后再对这些元素进行操作。

jQuery也需要先选取所需的DOM元素，然后再针对这些元素进行操作。如下:

<script type="text/javascript">$("#uid"); // 选取id属性为"uid"的单个元素$("p"); // 选取所有的p元素$(".test"); // 选择所有带有CSS类名"test"的元素$("[name=books]"); // 选择所有name属性为"books"的元素// 多个选择器以空格或指定符号隔开，将匹配与前者具有指定关系的最后一个选择器所表示的元素$("#uid span"); // 选择id为"uid"的元素的所有后代span元素$("p > span"); // 选择p元素的所有子代span元素$("div + p"); // 选择div元素后面紧邻的同辈p元素$("div p span"); // 选择div元素的所有后代p元素的后代span元素// 多个选择器之间没有空格，将匹配同时满足这些选择器条件的元素$("p#uid"); // 选择id属性为"uid"的p元素$("div.foo"); // 选择所有带有CSS类名"foo"的div元素$(".foo.bar"); // 选择所有同时带有CSS类名"foo"和"bar"的元素$("input[name=books][id]"); // 选择所有name属性为"books"并且具备id属性的元素// jQuery特有的选择器，当然也可以和其他选择器任意组合使用$(":checkbox"); // 选取所有的checkbox元素$(":text"); // 选取所有type为text的input元素$(":password"); // 选取所有type为password的input元素$(":checked"); // 选取所有选中的radio、checkbox、option元素$(":selected"); // 选取所有选中的option元素$(":input"); // 选取所有的表单控件元素(所有input、textarea、select、button元素)</script>

1.4 筛选

选取集合中符合某些条件的元素，删除集合中符合某些条件的元素，查找当前匹配元素的子元素、父元素、同辈元素、上一个元素、下一个元素等与之具有特定关系的元素。

<script type="text/javascript">  // 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素$("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)$("ul li").first(); // 选取ul li中匹配的第一个元素$("ul li").last(); // 选取ul li中匹配的最后一个元素$("ul li").slice(1, 4); // 选取第2 ~ 4个元素$("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素$("div").find("p"); // 选取所有div元素的所有后代p元素$("div").children(); // 选取所有div元素的所有子代元素$("div").children("p"); // 选取所有div元素的所有子代p元素$("span").parent(); // 选取所有span元素的父元素$("span").parent(".foo.bar"); // 选取所有span元素的带有CSS类名"foo"和"bar"的父元素$("#uid").prev(); // 选取id为uid的元素之前紧邻的同辈元素$("#uid").next(); // 选取id为uid的元素之后紧邻的同辈元素</script>

1.5 DOM操作实例

• get and set in one

<script type="text/javascript">// 返回一个匹配id为"username"的元素的jQuery对象var  uid = $("#username");// 没有传入value参数，返回第一个匹配元素的value属性值var value = uid.val();// 传入了value参数，设置所有匹配元素的value值为"CodePlayer"uid.val("CodePlayer");// 返回匹配所有包含CSS类名"foo"的div元素的jQuery对象var div = $("div.foo");// 没有传入value参数，返回第一个匹配元素的value元素var fontSize = div.css("font-size");// 传入了value参数，设置所有匹配元素的font-size样式为"14px"div.css("font-size", "14px");</script>

• get first set all

<script type="text/javascript">var $lis = $("ul li"); // 匹配ul元素的所有后代li元素var className = $lis.attr("class"); // 只获取第一个匹配的li元素的class属性$lis.attr("class", "codeplayer"); // 将所有匹配的li元素的class属性设为"codeplayer"</script>

• 链式编程

jQuery对象的所有实例方法，在没有特殊的返回需求的情况下，一般都会返回该jQuery对象本身(或者其它jQuery对象)，因此可以继续调用返回的jQuery对象上的方法。

<script type="text/javascript">// jQuery的链式编程风格$("div").find("ul").addClass("menu").children().css("margin", 0).hide();// 以下是上述代码的分解描述$("div") // 返回一个匹配所有div元素的jQuery对象.find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象.addClass("menu") // 为这些ul元素添加CSS类名"menu"，并返回当前对象本身.children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象.css("margin", 0) // 为这些子代元素设置css样式"margin: 0"，并返回当前对象本身.hide(); // 隐藏这些子代元素，并返回当前对象本身</script>

在JS原生DOM操作中，如果通过getElementById()、getElementsByName()等方式获取不到对应的元素，那么将返回null，在null上访问属性或方法，将会抛出异常。

jQuery在匹配不到对应元素时将返回一个空的jQuery对象，仍然可以调用jQuery对象的方法，而且并不会报错。因为jQuery会智能地处理这种情况。如果该方法用于获取数据，则返回null或undefined；如果该方法用于设置数据，则忽略设置操作，并返回该空对象本身；如果该方法用于筛选元素，则同样返回一个新的jQuery空对象。

<script type="text/javascript">  // 没有标签为abc的DOM元素，$("abc")是一个空的jQuery对象，调用其find()方法将返回一个新的jQuery空对象var a = $("abc").find("p");// 如果不存在id为notFound的元素，$("#notFound")是一个空的jQuery对象，获取其id属性，将返回undefined。var b = $("#notFound").attr("id");// 如果不存在id为notFound的元素，$("#notFound")是一个空的jQuery对象，获取其高度值，将返回null。var c = $("#notFound").height();// 如果不存在id为uname的元素，$("#uname")是一个空的jQuery对象，设置其value值，将忽略该设置操作，并返回该空对象本身var d = $("#uname").val("xxxxx");</script>

1.5.1 属性操作

<script type="text/javascript">// selector 表示具体的选择器$("selector").val(); // 获取第一个匹配元素的value值(一般用于表单控件)$("selector").val("Hello"); // 设置所有匹配元素的value值为"Hello"$("selector").html(); // 获取第一个匹配元素的innerHTML值$("selector").html("Hello"); // 设置所有匹配元素的innerHTML值为"Hello"$("selector").text(); // 获取第一个匹配元素的innerText值(jQuery已进行兼容处理)$("selector").text("Hello"); // 设置所有匹配元素的innerText值为"Hello"$("selector").attr("class"); // 获取第一个匹配元素class属性$("selector").attr("class", "code"); // 设置所有匹配元素的class属性为"code"$("selector").removeAttr("class"); // 移除所有匹配元素的class属性$("selector").prop("checked"); // 获取第一个匹配元素的checked属性值$("selector").prop("checked", true); // 设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框)$("selector").removeProp("className"); // 移除所有匹配元素的className属性</script>

attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。区别如下：

• 操作对象不同

attr和prop分别是单词attribute和property的缩写

attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value )

prop()依赖的是JS原生的 element[property] 和 element[property] = value

• 应用版本不同

attr()是jQuery 1.0版本就有的函数

prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本

• 用于设置的属性值类型不同

attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。

prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。

-其他细节

<script type="text/javascript">  <input id="uid" type="checkbox" checked="checked" value="1"><script type="text/javascript">// 当前jQuery版本为1.11.1var uid = document.getElementById("uid");var $uid = $(uid);document.writeln( $uid.attr("checked") ); // checkeddocument.writeln( $uid.prop("checked") ); // true// 取消复选框uid的选中(将其设为false即可)// 相当于 uid.checked = false;$uid.prop("checked", false);// attr()获取的是初始状态的值，即使取消了选中，也不会改变document.writeln( $uid.attr("checked") ); // checked// prop()获取的值已经发生变化document.writeln( $uid.prop("checked") ); // false</script></script>

1.5.2 文档处理

插入、修改、移动、删除指定的DOM元素。

<script type="text/javascript">  // 以下$A均表示当前jQuery对象，$B可以是选择器字符串、html字符串、DOM元素、jQuery对象$A.before( $B ); // 在$A之前插入$B$A.after( $B ); // 在$A之后插入$B$A.insertBefore( $B ); // 将$A插入到$B之前的位置$A.insertAfter( $B ); // 将$A插入到$B之后的位置$A.append( $B ); // 在$A内部的末尾位置追加$B$A.appendTo( $B ); // 将$A追加到$B内部的末尾位置$A.prepend( $B ); // 在$A内部的开头位置追加$B$A.prependTo( $B ); // 将$A追加到$B内部的开头位置$A.replaceAll( $B ); // 用$A替换$B$A.replaceWith( $B ); // 用$B替换$A$A.wrap( $B ); // 在$A的外侧包裹$B$A.unwrap( ); // 只移除$A的父元素的标签$A.wrapAll( $B ); // 在整个$A的外侧用单个$B将其包裹起来$A.wrapInner( $B ); // 在$A的内侧包裹$B$A.empty(); // 清空$A的所有内容$A.remove(); // 删除$A及其绑定的事件、附加数据等$A.detach(); // 删除$A，但保留其绑定的事件、附加数据等$A.clone(); // 克隆一个$A</script>

除了wrap系列方法以及empty()、clone()方法外，当使用上述插入、追加、替换、删除方法时，如果用于插入/追加/替换/删除的元素是文档中的元素，则这些元素将从原位置上消失。

1.5.3 CSS操作

<script type="text/javascript">$("selector").css("margin-left"); // 获取第一个匹配元素的margin-left的属性值$("selector").css("marginLeft"); // 与上一行代码作用相同，css()支持这两种写法$("selector").css("marginLeft", 15); // 设置所有匹配元素的margin-left为15px(数字的默认单位均为px)$("selector").css( { marginLeft: 15, color: "red", fontSize: "14px"} ); // 一次性设置所有匹配元素的多个样式属性$("selector").css( "marginLeft", ""); // 设为空字符串，则表示删除该样式属性</script>

1.5.3 动画效果

<script type="text/javascript">  $("selector").show(); // 显示隐藏的元素，默认不带过渡动画效果$("selector").show( 400 ); // 显示隐藏的元素，带有400毫秒的过渡动画效果$("selector").show( "fast" ); // 显示隐藏的元素，带有200毫秒的过渡动画效果$("selector").show( "slow" ); // 显示隐藏的元素，带有600毫秒的过渡动画效果$("selector").hide(); // 隐藏显示的元素，其用法与show()相同$("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏，隐藏就显示)，其用法与show()类似/* 下面的slide*、fade*系列方法与上面的show()、hide()、toggle()等方法作用相同， * 用法也类似，只是带有不同的动画效果 */$("selector").slideDown(); // 显示隐藏的元素，带有向下滑动的过渡动画效果$("selector").slideUp(); // 隐藏显示的元素，带有向上滑动的过渡动画效果$("selector").slideToggle(); // 切换显示/隐藏的元素，带有向上/下滑动的过渡动画效果$("selector").fadeIn(); // 显示隐藏的元素，带有淡入的过渡动画效果$("selector").fadeOut(); // 隐藏显示的元素，带有淡出的过渡动画效果$("selector").fadeToggle(); // 隐藏显示的元素，带有淡出的过渡动画效果//animate()方法设置CSS样式，并执行一个从当前样式到指定样式的过渡动画效果。// 设置所有匹配元素的css样式"width: 200px; height: 100px"，并执行一个当前样式到指定样式的过渡动画效果// 动画的执行时间为 1000 毫秒$("selector").animate( { width: "200px", height: "100px" }, 1000 );</script>

1.6 事件处理

<script type="text/javascript">  function handler( event ){  // 事件处理函数的执行代码  // 参数event表示当前事件对象，该对象已经过jQuery封装标准化处理  // 函数内的this表示触发事件的当前DOM元素(不是jQuery对象)        // 如果函数的返回值为false，可以阻止事件冒泡和元素的默认事件行为。        // 例如：a标签的click事件的默认跳转行为；form标签的submit事件的默认表单提交行为}// 以下方法均可为所有匹配元素的click事件绑定处理函数$("selector").click( handler );$("selector").bind( "click", handler );$("selector").on( "click", handler );$("selector").one( "click", handler ); // 用于绑定一次性事件，第一次触发后就自动解除绑定// bind()等事件方法均支持为多个事件(以空格隔开)绑定同一个处理函数$("selector").bind( "mouseenter mouseleve", function(event){  if(event.type == "mouseenter"){    // mouseenter事件的执行代码  }else if(event.type == "mouseleve"){    // mouseleve事件的执行代码  }} );</script>

与click()方法类似，jQuery还提供绝大多数事件的绑定方法，例如:dblclick()、focus()、change()、hover()、submit()(仅限于form表单元素)、mousedown()、mouseover()、keydown()、keypress()等。

1.7 Ajax

$.ajax()是jQuery中Ajax的底层实现，其它Ajax请求方法都是基于该方法实现的。

• 在发送AJAX请求之前，序列化JS内容或表单内容，以便用作AJAX请求发送的数据。
• 快速发送AJAX请求，并处理响应数据(支持html、xml、text、json、jsonp、script等多种数据类型)。
• 监听AJAX事件，绑定事件触发时执行的处理函数。

<script type="text/javascript">//发送并处理AJAX请求。这是jQuery底层的AJAX实现，包含处理AJAX请求所需的一切功能。其他发送AJAX请求的方法都是对该方法的进一步封装。  $.ajax({  url: "sysUser?action=add",  type: "post",  data: "username=hello&password=123456", // 附加的请求数据，也可以为对象格式  dataType: "json",  success: function(data){    // 这是Ajax请求成功后执行的回调函数    // 因为dataType为json，如果服务器返回的是JSON格式数据，jQuery会将其转为对应的JS对象    // 假设data为{ msg: "Ajax请求成功", uid: 2 }    alert( data.msg );  }});  //发送并处理GET方式的AJAX请求$.get("sysUser", { username: "hello", password: "123456" }, function(data){  // 这是Ajax请求成功后执行的回调函数，就是上面$.ajax中的success选项});// 发送并处理POST方式的AJAX请求。$.post("sysUser", { username: "hello", password: "123456" }, function(data){  // 这是Ajax请求成功后执行的回调函数，就是上面$.ajax中的success选项});</script>

ajax参数属性汇总

名称类型描述url字符串请求的urltype字符串将要使用的HTTP方法。通常是POST或GET。如果省略，则为GETdata对象一个对象，其属性作为查询参数传递给请求。如果是“GET”请求，则把数据作为查询字符串传递；如果是“POST”请求，则把数据作为请求体传递。在这两种情况下，都是由$.ajax()方法来处理值的编码contentType字符串将要在请求上指定的内容类型。如果省略，默认为application/x-www-form-urlencoded(与表单提交所使用默认类型相同)dataType字符串一个关键字，用来标识响应返回数据的类型。这个值决定在把数据传递给回调函数之前（如果有）进行什么后续处理。有效值如下：xml 、html、json、jsonp、script、texttimeout数值设置Ajax请求的超时值（毫秒）。如果请求这段时间内没有完成，则中止请求并调用错误回调函数。success函数如果请求处理成功，则这个函数被调用。响应体作为第一个参数被返回给这个函数，并且根据指定的dataType属性进行格式化。第二个参数是包含状态码的字符串。error函数如果请求处理过程中产生错误，则这个函数被调用。三个实参被传递给这个函数：XMLHttpRequest对象、状态消息字符串以及XMLHttpRequest对象所返回的异常对象（可选）。complete函数在请求完成时被调用。两个实参被传递：XHR实例和状态消息字符串。如果制订了success或error回调函数，则这个函数在success或error回调函数执行后被调用。beforeSend函数在发起请求之前被调用，这个函数被传递XMLHttpReqeust实例，用来执行请求的预处理操作。async布尔型如果指定为false，则代表同步提交请求。在默认情况下，提交请求是异步（true）。

1.8 辅助方法

1.8.1 处理逻辑代码

<script type="text/javascript">  // 去除字符串两端的空白字符var str1 = $.trim( "  abc d  " ); // "abc d"var str2 = $.trim( null ); // ""// 判断是否是数组var isArray1 = $.isArray( [] ); // truevar isArray2 = $.isArray( new Array() ); // true// 判断是否是函数var result1 = $.isFunction( function(){} ); // truevar result2 = $.isFunction( new Function() ); // true// 检索数组中是否存在指定值，并返回其第一次出现的索引var index1 = $.inArray( 2, [ 1, 3, 5, 2, 0 ] ); // 3var index2 = $.inArray( 3, [ 2 ] ); // -1 (不存在返回-1)// 将JSON字符串转为对应的JS对象var jsonObj = $.parseJSON( '{ "name": "CodePlayer", "age": 18 }' );var jsonArray = $.parseJSON( '[ 12, "CodePlayer", true ]' );</script>

1.8.2 遍历

<script type="text/javascript">  // $.each()用于遍历数组元素或对象属性var array = [ 12, "jQuery", true ];$.each( array, function(i, value){  // i 表示当前迭代元素的索引或对象的属性名称  // value 表示当前迭代的数组元素或对象的属性值  // this 与  value 相同  alert( i + " = " + value );  // 如果函数return false，将终止遍历});// $.map()用于遍历数组元素或对象属性，并将每次执行遍历函数的返回值封装为数组返回var obj = { name: "jQuery", age: 20, isAdmin: true };var resultArray = $.map( obj, function(value, i){ // 注意参数顺序与each()不同  // value 表示当前迭代的数组元素或对象的属性值  // i 表示当前迭代元素的索引或对象的属性名称  // this 指向全局对象(window)  if( typeof value === "number"){    return null; // 如果函数返回null或undefined，则不会添加到结果数组中  }else{    return value;  }} );// resultArray 为 [ "jQuery", true ]//$.grep()用于遍历数组元素，并根据函数的返回值(true/false)来过滤数组元素var array2 = [ "Hello", 12, "jQuery", true ];var resultArray2 = $.grep( array2, function(value, i){ // 注意参数顺序与each()不同  // value 表示当前迭代的数组元素  // i 表示当前迭代元素的索引  // this 指向全局对象(window)  return i % 2 == 0; // 保留返回值不为false的元素} );// resultArray2 为 [ "Hello", "jQuery" ];</script>

1.8.3 DOM元素和jQuery对象的相互转换

实际上jQuery对象是一个类数组对象。它将匹配的所有DOM元素都依次存储在数字索引形式的属性中，并用length属性存储DOM元素的个数。

<script type="text/javascript">var p = $("p"); // 返回一个包含所有p元素的jQuery对象p[0]; // 第1个p元素p[0].id ; // 返回第1个p元素的idp[1]; // 第2个p元素p[2]; // 第3个p元素p.length; // p元素的个数//jQuery提供了一个get()方法，用于获取对应索引的DOM元素。var p = $("p"); // 返回一个包含所有p元素的jQuery对象p.get(0); // 第1个p元素p.get(1); // 第2个p元素p.get(2); // 第3个p元素p.get( ); // 不传入任何参数，将以数组形式返回包含的所有p元素</script>

2. 选择器列表

2.1根据id、class类名、标签名等筛选元素

选择器起始版本实例选取*1.0$("*")所有元素#id1.0$("#abc")id="abc"的元素.className1.0$(".resClass")所有包含类名"resClass"的元素tagName1.0$("p")所有p元素

2.2 根据多个选择器的组合筛选元素

选择器起始版本实例选取s1,s2,sN1.0$("p,div,#abc")所有的p元素、div元素和id="abc"的元素s1s2sN1.0$(":radio[name=uid]:checked")所有被选中的name="uid"的radio元素ancestor escendant1.0$("p span")p标签内的所有span元素parent > child1.0$("p > span")所有作为p标签的直接子元素的span元素prev + next1.0$("label + input")所有紧跟在label元素后面的那个同辈input元素prev ~ sibings1.0$("tr#L2 ~ tr")在id="L2"的tr元素之后的所有同辈tr元素

2.3 属性相关选择器

选择器起始版本实例选取[attribute]1.0$("[href]")所有带有href属性的元素[attribute=value]1.0$("[name=uid]")所有name="uid"的元素[attribute!=value]1.0$("[name!=uid]")所有name属性的值不等于"uid"的元素[attribute^=value]1.0$("[name^=uid]")所有name属性的值以"uid"开头的元素[attribute$=value]1.0$("[src$='.gif']")所有src属性以".gif"结尾的元素[attribute~=value]1.0$("[name~='uid']")name属性的值包含给定的单词"uid"的所有元素("uid"与其他词以空格分隔)[attribute*=value]1.0$("[name*=uid]")所有name属性的值包含"uid"的元素

2.4伪类选择器——表单相关

选择器起始版本实例选取:input1.0$(":input")所有input、select、textarea和button标签:text1.0$(":text")所有type="text"的input元素:password1.0$(":password")所有type="password"的input元素:radio1.0$(":radio")所有type="radio"的input元素:checkbox1.0$(":checkbox")所有type="checkbox"的input元素:submit1.0$(":submit")所有type="submit"的input和button元素:reset1.0$(":reset")所有type="reset"的input元素和button元素:button1.0$(":button")所有button标签(不区分type)和type="button"的input元素:image1.0$(":image")所有type="image"的input元素:file1.0$(":file")所有type="file"的input元素

2.5 伪类选择器——表单状态相关(表单控件是指input、select、textarea、button、option元素)

选择器起始版本实例选取:enabled1.0$(":enabled")所有可用(没有disabled属性)的表单控件元素:disabled1.0$(":disabled")所有禁用(带有disabled属性)的表单控件元素:selected1.0$(":selected")所有被选中的:checked1.0$(":checked")所有被选中的radio、checkbox和

4.6 伪类选择器——根据元素在匹配到的所有元素中的特定次序筛选元素

选择器起始版本实例选取:first1.0$("p:first")第一个p标签:last1.0$("p:last")最后一个p标签:even1.0$("tr:even")所有偶数tr标签:odd1.0$("tr:odd")所有奇数tr标签:eq(index)1.0$("li:eq(3)")第4个li标签(index从0开始算起):gt(index)1.0$("li:gt(2)")所有index大于2的li标签(第4、5、6……个li标签):lt(index)1.0$("li:lt(2)")所有index小于2的li标签(第1、2个li标签)

2.7 伪类选择器——根据包含、排除、可见、动画或其他关系筛选元素

选择器起始版本实例选取:has(selector)1.1.4$("ul:has(li.abc)")所有包含类名为"abc"的li标签的ul元素:not(selector)1.0$("input:not(:text)")所有不是文本框的input元素:contains(text)1.1.4$(":contains(abc)")所有包含文本"abc"的元素:parent1.0$(":parent")所有包含子元素或文本内容(哪怕是空格或换行)的元素:empty1.0$(":empty")所有没有子元素和文本内容(哪怕是空格或换行)的元素:visible1.0$(":visible")所有可见的元素:hidden1.0$(":hidden")所有不可见的元素(包括type="hidden"的input元素):header1.2$(":header")所有标题标签：h1 ~ h6:animated1.2$(":animated")所有正在执行动画效果的元素:focus1.6$(":focus")当前获得焦点的元素:root1.9$(":root")当前文档的根元素(html元素):target1.9$(":target")id属性等于当前页面URI中的hash码值的元素:lang(language)1.9$(":lang(en)")所有lang属性以"en"为前缀的元素