jQuery入门学习笔记----第二章 jQuery选择器

jQuery选择器详解

一，基本选择器

<strong>/*分别是id选择器，元素选择器，类选择器，匹配所有元素，合并选择器*/

$(function(){
    $("#id").html("hello world");   //print 等同innerHTML
})
$(function(){
    $("div p").html("hello world");
})
$(function(){
    $(".class").html("hello world");
})
$(function(){
    $("*").html("hello world");
})
$(function(){
    $("#id,p").html("hello world");
})</strong>

二，层次选择器

$("#id p")			//匹配后代元素。即id的后代（无论多少代）
$("#id->p")			//id的子元素。仅一代
$("#id+p")
$("#id").next()			//下一个相邻的元素
$("#id").nextAll()
$("#id").prevAll()
$("#id").prev()
$("#id").preUntil(elemnet)	//区间
$("#id").nextUntil(element)
$("#id~p")			//之后的所有兄弟元素
$("#id").siblings		//所有的兄弟元素，不论前后

三，简单过滤选择器

$("li:first")			//获取第一个元素
$(“li”).first()
$("li:last")			//最后一个
$("li:not(.NotClass)")		//NotClass是一个类名，去除NotClass的其他元素
$("li:even")			//偶数，注意li索引值是从0开始
$("li:odd")			//奇数
$("li:eq(1)")			//指定索引值为1的
$("li:gt(1)")			//大于1
$("li:lt(4)")			//小于4
$(":header")			//选择标题类元素
$("#spanMove:animated")		//选择id为spanMove的元素。获取正在执行动画效果的元素。选择器animated在捕捉动画效果元素时，先自定义一个动画效果函数animateIt(),然后执行该函数，选择器才能获取动画效果元素。

四，内容过滤选择器

:contains(text)	获取包含给定文本的元素
:empty	获取所有不包含子元素或者文本的空元素
:has(selector)(span,.classname,#idname)	获取含有选择器所匹配的元素的元素
:parent	获取含有子元素或者文本的元素
.filter(selector)	获取含有选择器所匹配的元素的元素
.not(selector)	跟上面的相反

 

五，可见性过滤选择器

:hidden	获取所有不可见元素，或者type为hidden的元素
:visible	获取所有可见元素

 

六，属性过滤选择器

[attribute]	包含给定属性的元素
[attribute=value]	等于给定元素
[attribute!=value]	不等于
[attribute^=value]	开头是
[attribute$=value]	结尾是
[attribute*=value]	含有
[selector1][selector2][selector3]	同时满足1,2,3

 

七，子元素过滤选择器

a:nth-child(eq|even|odd|index)	获取每个父元素下的特定位置元素，索引号从1开始
:first-child
:last-child
:only-child	获取每个父元素下的仅有一个子元素

P.S这里是指a的父元素

 

八，表单对象属性过滤选择器

:enabled	获取表单中所有属性为可用的元素
:disabled	不可用
:checked	被选中  这个是checkbox的
:selected	被选中option的元素   这个是select里面的option

P.S：表单对象就是那些input，select之类啥的，让你输入让你选择的那些

例子：

$(“#form1 input:enable”)

$(“select option:selected”)

 

九，表单选择器

:input	获取所有input，textarea，select
:text	所有单行文本框
:password	密码框
:radio	单选框
:checkbox	复选框
:submit	提交按钮
:image	图像域  <input type=”image” title=”Image” src=””/>
:reset	重置按钮
:button	按钮
:file	文件域  <input type=”file” />我们上传东西那个预览