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.1
var uid = document.getElementById("uid");
var $uid = $(uid);

document.writeln( $uid.attr("checked") ); // checked
document.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	字符串	请求的url
type	字符串	将要使用的HTTP方法。通常是POST或GET。如果省略，则为GET
data	对象	一个对象，其属性作为查询参数传递给请求。如果是“GET”请求，则把数据作为查询字符串传递；如果是“POST”请求，则把数据作为请求体传递。在这两种情况下，都是由$.ajax()方法来处理值的编码
contentType	字符串	将要在请求上指定的内容类型。如果省略，默认为application/x-www-form-urlencoded(与表单提交所使用默认类型相同)
dataType	字符串	一个关键字，用来标识响应返回数据的类型。这个值决定在把数据传递给回调函数之前（如果有）进行什么后续处理。有效值如下：xml 、html、json、jsonp、script、text
timeout	数值	设置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( [] ); // true
var isArray2 = $.isArray( new Array() ); // true
// 判断是否是函数
var result1 = $.isFunction( function(){} ); // true
var result2 = $.isFunction( new Function() ); // true
// 检索数组中是否存在指定值，并返回其第一次出现的索引
var index1 = $.inArray( 2, [ 1, 3, 5, 2, 0 ] ); // 3
var 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元素的id
p[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	$("*")	所有元素
#id	1.0	$("#abc")	id="abc"的元素
.className	1.0	$(".resClass")	所有包含类名"resClass"的元素
tagName	1.0	$("p")	所有p元素

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

选择器	起始版本	实例	选取
s1,s2,sN	1.0	$("p,div,#abc")	所有的p元素、div元素和id="abc"的元素
s1s2sN	1.0	$(":radio[name=uid]:checked")	所有被选中的name="uid"的radio元素
ancestor escendant	1.0	$("p span")	p标签内的所有span元素
parent > child	1.0	$("p > span")	所有作为p标签的直接子元素的span元素
prev + next	1.0	$("label + input")	所有紧跟在label元素后面的那个同辈input元素
prev ~ sibings	1.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伪类选择器——表单相关

选择器	起始版本	实例	选取
:input	1.0	$(":input")	所有input、select、textarea和button标签
:text	1.0	$(":text")	所有type="text"的input元素
:password	1.0	$(":password")	所有type="password"的input元素
:radio	1.0	$(":radio")	所有type="radio"的input元素
:checkbox	1.0	$(":checkbox")	所有type="checkbox"的input元素
:submit	1.0	$(":submit")	所有type="submit"的input和button元素
:reset	1.0	$(":reset")	所有type="reset"的input元素和button元素
:button	1.0	$(":button")	所有button标签(不区分type)和type="button"的input元素
:image	1.0	$(":image")	所有type="image"的input元素
:file	1.0	$(":file")	所有type="file"的input元素

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

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

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

选择器	起始版本	实例	选取
:first	1.0	$("p:first")	第一个p标签
:last	1.0	$("p:last")	最后一个p标签
:even	1.0	$("tr:even")	所有偶数tr标签
:odd	1.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"的元素
:parent	1.0	$(":parent")	所有包含子元素或文本内容(哪怕是空格或换行)的元素
:empty	1.0	$(":empty")	所有没有子元素和文本内容(哪怕是空格或换行)的元素
:visible	1.0	$(":visible")	所有可见的元素
:hidden	1.0	$(":hidden")	所有不可见的元素(包括type="hidden"的input元素)
:header	1.2	$(":header")	所有标题标签：h1 ~ h6
:animated	1.2	$(":animated")	所有正在执行动画效果的元素
:focus	1.6	$(":focus")	当前获得焦点的元素
:root	1.9	$(":root")	当前文档的根元素(html元素)
:target	1.9	$(":target")	id属性等于当前页面URI中的hash码值的元素
:lang(language)	1.9	$(":lang(en)")	所有lang属性以"en"为前缀的元素