You are here
jquery 元素选择器 input name id class 有大用 有大大用
children 子元素 find 子孙元素 > 子元素 与 没有 > 的区别
children方法只取子元素
find 既取子 又取孙元素
$('.banner_page span').hover(function () {
alert(1111);
});
以上也是子元素的一个应用实例
children(expr)取得子节点,当expr为空时，取得所有的子节点
children()之考虑子元素而不考虑所有后代元素。
$('#aa').children("input[name='cancelButton']") //id为aa的子元素（其符合input[name='cancelButton']）
eg: <div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
$("div").children() ==>> [<span>Hello</span><p class="selected">Hello Again</p><p>And Again</p> ]
$("div").children(".selected") ==>> [ <p class="selected">Hello Again</p> ]
children纯选择功能.当无参数是是选择所有子元素.当有条件时,按条件所选.
例二是选择class为selected的节点!
大约是jquery对象吧
:nth-child(index/even/odd/equation)
用法: $("ul li:nth-child(2)") ;
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq()
有些类似,不同的地方就是前者是从0开始,后者是从1开始.
:first-child
用法: $("ul li:first-child") ;
说明: 匹配第一个子元素.’:first’
只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
这里需要特别点的记忆下区别.
:last-child
用法: $("ul li:last-child") ;
说明: 匹配最后一个子元素.’:last’只匹配一个元素
,而此选择符将为每个父元素匹配一个子元素.
: only-child
用法: $("ul li:only-child") ;
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.
如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.
parent > child
用法: $("form > input") ;
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素.
$("div a") 是匹配div下面的所有的后代为a的元素
用法:$(”form input”); 返回值 集合元素
说明:在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent> child”区分开.
用法: $(”form >input”) ; 返回值 集合元素
说明:在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
$('#aa').children().css('display','none');所有的子元素隐藏
jquery 第几个元素，第N个元素 ,eq()
使用jquery时经常会遇到，选择器选择一组元素后，需要在这组元素中找到第几个元素。
jquery中使用eq()方法找到第几个元素或第N个元素，jquery中eq()的使用如下：
eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素。
例子：
$('#test').children().eq(1).css({'display':'inline-block'});
将id为test的元素的第二个子元素样式设置为'display':'inline-block'。
另一种写法
$(":eq(index)")如：$("p:eq(1)")
希望该文对您有帮助，注意区分jquery中index的用法。
这里介绍的是根据索引获取元素，那么如何获取元素索引值呢？ children方法只取子元素 find 既取子 又取孙元素 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery.js"></script> </head> <script> $(document).ready(function(){ alert($("p").find("span").html());//如果只取一个 只取第一个 //如果是循环就全取出来 //为什么 这里只取第一个呢 }); </script> <body> <p><span>Hello</span>, how are you?<span>qqqqq</span></p> </body> </html> //find(expr)从子节点找出符合expr的.参数为空就是查找所有 //与filter的区别是filter过滤掉$数组中的节点find过滤到的是子节点 children 是查找所有子 find 是查找所有子孙 $('.views-table').find('th').append("AAAAAAAAAAAA"); 是在所有的子孙元素的结束标签的前面加上AAAAAAAAAAAA $('.views-table').find('td').append("AAAAAAAAAAAA"); 是在所有的子孙元素的结束标签的前面加上AAAAAAAAAAAA $('.views-table').find('tr').append("AAAAAAAAAAAA"); 是在所有的子孙元素的结束标签的前面加上AAAAAAAAAAAA $("div").find() $("div").find('span') 返回的大约是jquery对象吧
种类很多，具体参考帮助文档以及李刚的《疯狂Ajax讲义》。
l 什么是jQuery选择器
l jQuery中的选择器完全集成了CSS的风格。
l 利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素。
l 学会使用选择器是学习jQuery的基础。
l jQuery选择器的优势
l 简介的写法：
$() 函数在很多javascript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。
l 支持CSS1到CSS3选择器
jQuery选择器支持CSS1、CSS2的全部和CSS3的部分选择器，同时拥有少量独有的选择器。
使用jQuery选择器时无需考虑浏览器是否支持这些选择器。
l 完善的处理机制
（1）基本选择器：
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).
l 1、#id 用法: $(”#myDiv”); 返回值 单个元素的组成的集合
说明:这个就是直接选择html中的id=”myDiv”
l 2、Element 用法: $(”div”) 返回值 集合元素
说明:element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a等等.
l 3、class 用法: $(”.myClass”) 返回值 集合元素
说明:这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).
l 4、* 用法: $(”*”) 返回值 集合元素
说明:匹配所有元素,多用于结合上下文来搜索
l 5、selector1, selector2,selectorN 用法:$(”div,span,p.myClass”) 返回值 集合元素
说明:将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素
p class=”myClass”
（2）层次选择器：
如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
l 1 、ancestor descendant
用法:$(”form input”); 返回值 集合元素
说明:在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent> child”区分开.
l 2、parent > child
用法: $(”form >input”) ; 返回值 集合元素
说明:在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
l 3、prev + next
用法:$(”label + input”); 返回值 集合元素
说明:匹配所有紧接在 prev 元素后的 next 元素
l 4、prev ~ siblings
用法:$(”form ~ input”); 返回值 集合元素
说明:匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法siblings() 与前后位置无关, 只要是同辈节点就可以选取
$("#two").siblings("div").css("background","#FF0033");
（3）过滤选择器：
l 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
l 按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器。
l 1、:first
用法: $(”tr:first”) ; 返回值 单个元素的组成的集合
说明:匹配找到的第一个元素
l 2、:last
用法: $(”tr:last”) 返回值 集合元素
说明:匹配找到的最后一个元素.与 :first 相对应.
l 3、:not(selector)
用法: $(”input:not(:checked)”)返回值 集合元素
说明:去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
l 4、:even
用法: $(”tr:even”) 返回值 集合元素
说明:匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
l 5、: odd
用法: $(”tr:odd”) 返回值 集合元素
说明:匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.
l 6、:eq(index)
用法: $(”tr:eq(0)”) 返回值 集合元素
说明:匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
l 7、:gt(index)
用法: $(”tr:gt(0)”) 返回值 集合元素
l 说明: 匹配所有大于给定索引值的元素.
l 8、:lt(index)
用法: $(”tr:lt(2)”) 返回值 集合元素
说明:匹配所有小于给定索引值的元素.
l 9、:header(固定写法)
用法: $(”:header”).css(”background”,“#EEE”) 返回值 集合元素
说明:匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
l 10、:animated(固定写法) 返回值 集合元素
说明: 匹配所有正在执行动画效果的元素
（4）内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
l 1、:contains(text)
用法: $(”div:contains(’John’)”) 返回值 集合元素
说明:匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.
l 2、:empty
用法: $(”td:empty”) 返回值 集合元素
说明:匹配所有不包含子元素或者文本的空元素
l 3、:has(selector)
用法:$(”div:has(p)”).addClass(”test”) 返回值 集合元素
说明:匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.
l 4、:parent
用法: $(”td:parent”) 返回值 集合元素
说明:匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.
（5）可见度过滤选择器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
l 1、:hidden
用法: $(”tr:hidden”) 返回值 集合元素
说明:匹配所有的不可见元素，input 元素的 type 属性为“hidden” 的话也会被匹配到.意思是css中display:none和inputtype=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.
l 2、:visible
用法: $(”tr:visible”) 返回值 集合元素
说明:匹配所有的可见元素.
（6）属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
l 1、[attribute]
用法: $(”div[id]“) ; 返回值 集合元素
说明:匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
l 2、[attribute=value]
用法: $(”input[name='newsletter']“).attr(”checked”,true); 返回值 集合元素
说明:匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.
l 3、[attribute!=value]
用法: $(”input[name!='newsletter']“).attr(”checked”,true); 返回值 集合元素
说明:匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.
l 4、[attribute^=value]
用法: $(”input[name^='news']“) 返回值 集合元素
说明:匹配给定的属性是以某些值开始 开头 的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!
l 5、[attribute$=value]
用法: $(”input[name$=‘letter’]“) 返回值 集合元素
说明:匹配给定的属性是以某些值结尾 结束的元素.
l 6、[attribute*=value]
用法: $(”input[name*=‘man’]“) 返回值 集合元素
说明:匹配给定的属性是以包含某些值的元素.
l 7、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(”input[id][name$=‘man’]“) 返回值 集合元素
说明:复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.
（7）子元素过滤选择器：
l 1、:nth-child(index/even/odd/equation)
用法: $(”ul li:nth-child(2)”) 返回值 集合元素
说明:匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.
l 2、:first-child
用法: $(”ul li:first-child”) 返回值 集合元素
说明:匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.
l 3、:last-child
用法: $(”ul li:last-child”) 返回值 集合元素
说明:匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
l 4、: only-child
用法: $(”ul li:only-child”) 返回值 集合元素
说明:如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
（8）表单对象属性过滤选择器
此选择器主要对所选择的表单元素进行过滤
l 1、:enabled
用法: $(”input:enabled”) 返回值 集合元素
说明:匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.
l 2、:disabled
用法: $(”input:disabled”) 返回值 集合元素
说明:匹配所有不可用元素.与上面的那个是相对应的.
l 3、:checked
用法: $(”input:checked”) 返回值 集合元素
说明:匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.
l 4、:selected
用法: $(”select option:selected”) 返回值 集合元素
说明: 匹配所有选中的option元素.
（9）表单选择器
l 1、:input
用法: $(”:input”) ; 返回值 集合元素
说明:匹配所有 input, textarea, select 和 button 元素
l 2、:text
用法: $(”:text”) ; 返回值 集合元素
说明:匹配所有的单行文本框.
l 3、:password
用法: $(”:password”) ; 返回值 集合元素
说明:匹配所有密码框.
l 4、:radio
用法: $(”:radio”) ; 返回值 集合元素
说明:匹配所有单选按钮.
l 5、:checkbox
用法: $(”:checkbox”) ; 返回值 集合元素
说明:匹配所有复选框
l 6、:submit
用法: $(”:submit”) ; 返回值 集合元素
说明:匹配所有提交按钮.
l 7、:image
用法: $(”:image”) 返回值 集合元素
说明:匹配所有图像域.
l 8、:reset
用法: $(”:reset”) ; 返回值 集合元素
说明:匹配所有重置按钮.
l 9、:button
用法: $(”:button”) ; 返回值 集合元素
说明:匹配所有按钮.这个包括直接写的元素button.
l 10、:file
用法: $(”:file”) ; 返回值 集合元素
说明:匹配所有文件域.
l 11、:hidden
用法: $(”input:hidden”) ; 返回值 集合元素
说明:匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
注意:要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,
五，jQuery中的DOM操作
（1）查找节点
l 查找元素节点
var$usernameElement = $("#username");
alert("jquery"+$usernameElement.val());
l 查找属性节点
jQuery查找到需要的元素节点后，使用attr()方法来获取它的各种属性的值。
$usernameElement.attr("value");
l 查找文本节点
jQuery查找到需要的元素节点后，使用text()方法来获取它的文本内容。
$usernameElement.text();
（2）创建节点
l 创建元素节点
使用 jQuery 的工厂函数 $(HTML) 。该工厂函数会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。
当创建单个元素时, 需注意闭合标签。
var$option = $("<option></option>");
l 创建文本节点
l 创建元素节点后，使用text()方法来设置其节点的文本内容。
$option.text("北京");
l 创建元素节点时，直接将其节点的文本内容插入其中。
var $option = $("<option>北京</option>");
l 创建属性节点
l 创建元素节点后，使用attr()方法来设置其节点的属性。
$option.attr("value","北京");
l 创建元素节点时，直接将其节点的属性插入其中。
var $option = $("<optionvalue="北京">北京</option>");
（3）插入节点
l 内部插入节点
l append(content) :向每个匹配的元素的内部的结尾处追加内容
l appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
l prepend(content):向每个匹配的元素的内部的开始处插入内容
l prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
l 外部插入节点
l after(content) :在每个匹配的元素之后插入内容
l before(content):在每个匹配的元素之前插入内容
l insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
l insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
（4）删除节点
l remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用。
l empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)。
（5）复制节点
l 复制节点
l clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
l clone(true): 复制元素的同时也复制元素中的的事件
<button>保存</button>
<p>段落</p>
$("button").click(function(){
alert("点击按钮");
});
//克隆节点，不克隆事件
$("button").clone().appendTo("p");
//克隆节点，克隆事件
$("button").clone(true).appendTo("p");
（6）替换节点
l replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
l replaceAll(): 颠倒了的 replaceWith() 方法.
l 注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
//<p>段落</p>
//方式一
$("p").replaceWith("<button>登陆</button>");
//方式二
$("<button>登陆</button>").replaceAll("p");
（7）属性操作
l attr(): 获取属性和设置属性。
l 当为该方法传递一个参数时, 即为某元素的获取指定属性。
l 当为该方法传递两个参数时, 即为某元素设置指定属性的值。
l jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等。
l removeAttr(“属性名”): 删除指定元素的指定属性
（8）样式操作
l 获取 class 和设置 class ：class 是元素的一个属性, 所以获取 class 和设置class 都可以使用 attr() 方法来完成。
l 追加样式：addClass()
l 移除样式：removeClass() ---从匹配的元素中删除全部或指定的 class
l 切换样式：toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它。
l 判断是否含有某个样式：hasClass()--- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false。
（9）遍历节点
l 取得匹配元素的所有子元素组成的集合:children(). 该方法只考虑子元素而不考虑任何后代元素.
l 取得匹配元素后面紧邻的同辈元素的集合:next();
l 取得匹配元素前面紧邻的同辈元素的集合:prev()
l 取得匹配元素前后所有的同辈元素:siblings()
l 在jQuery中还有很多遍历节点的方法，具体参看API帮助文档。
（10）包裹节点
l wrap()
<strong title="jQuery">jQuery</strong>
<strongtitle="jQuery">jQuery</strong>
//jQuery代码如下：
$("strong").wrap("<b></b>");
//得到的结果如下
<b><strongtitle="jQuery">jQuery</strong></b>
<b><strongtitle="jQuery">jQuery</strong></b>
l wrapAll()
<strongtitle="jQuery">jQuery</strong>
<strongtitle="jQuery">jQuery</strong>
//jQuery代码如下：
$("strong").wrapAll("<b></b>");
//得到的结果如下
<b>
<strongtitle="jQuery">jQuery</strong>
<strongtitle="jQuery">jQuery</strong>
</b>
l wrapInner()
<strongtitle="jQuery">jQuery</strong>
//jQuery代码如下：
$("strong").wrapInner("<b></b>");
//得到的结果如下
<strongtitle="jQuery"><b>jQuery</b></strong>来自 http://blog.csdn.net/xzm_rainbow/article/details/14224579
1、JQuery的概念
JQuery是一个JavaScript的类库，这个类库集合了很多功能方法，利用类库你可以用一些简单的代码实现一些复杂的JS效果。
2、JQuery实现了 代码的分离
不用再网页中加入如：onclick之类的事件来调用函数了，直接引入JQuery类库和自己编写的JQuery代码就可以了；
如：
$(function(){
$("Element").click{function(){
alert("点击我哦！");
}
}
})；
上面的代码中 只要定义了Element 这个元素 后面的click是动作
alert("点击我哦！");这个是要执行的代码，当然你可以有很多的操作在这个函数中；
这里面的$这个号代表JQuery的意思 ，就是引用类库。
3、JQuery的核心的一些方法
each(callback) '就像循环
$("Element").length; ‘元素的个数，是个属性
$("Element").size(); ’也是元素的个数，不过带括号是个方法
$("Element").get(); ‘某个元素在页面中的集合，以数组的形式存储
$("Element").get(index); ’功能和上面的相同，index表示第几个元素，数组的下标
$("Element").get().reverse(); ‘把得到的数组方向
("Element2")); ’元素2在元素1中的索引值是。。。
4、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦，但是他俩是可以转换滴)
$("*") ‘表示获取所有对象 但是我至今没这样用过
$("#XXX") ’获得 id=XXX 的元素对象（id可以是标签的id或CSS样式id） 常用
$("input[name='username']") 获得input标签中name='userName'的元素对象 常用
$(".abc") ' 获得样式class的名字是.abc的元素对象 常用
$("div") ' 标签选择器 选择所有的div元素 常用
$("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
$("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素
示例：
<html>
<head>
<title>jquery测试</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.1.js"></script>
<style type="text/css">
.checkCss{
color:blue;
}
.redioCss{
color:red;
}
</style>
<script type="text/javascript">
$(function(){
// $("#XXX") 获得id=XXX的所有Jquery对象
$("#subt").click(function(){
// $("XXX") 获得XXX标签名的所有Jquery对象
alert("input 标签的对象个数为："+$("input").length);
// $("XXX[name='YYY']") 获得XXX标签名下name='YYY'的所有Jquery对象
// val()获得属性值
alert("name='userName'的输入框内容为："+$("input[name='userName']").val());
// 注意获得value值的第二种方式
alert("name='note'的输入框内容为："+$("input[name='note']").attr("value"));
alert("下拉菜单被选中项的文本为："+$("#sex option:selected").text());
alert("下拉菜单被选中项的值为："+$("#sex").val());
alert("复选框选中的个数为："+$("input[name='check']:checked").length);
if($("input[name='check']:checked").length>0){
var allCheckValue="";
var allCheckText="";
$("input[name='check']:checked").each(function(){
allCheckValue+=$(this).val()+" ";
allCheckText+=$(this).parent(".checkCss").text()+" ";
});
alert("复选框选中的文本为："+allCheckText+" 值为："+allCheckValue);
}
if($("input[name='status']:checked").length>0){
alert("单选框选中的文本为："+("input[name='status']:checked").val());
}
});
});
</script>
</head>
<body>
姓名：<input type="text" name="userName" width="250"><br>
性别：<select id="sex" name="userSex" style="width: 155">
<option value="1">男</option>
<option value="2">女</option>
<option value="3">不男不女</option>
</select><br>
爱好：<span class="checkCss"><input type="checkbox" name="check" value="1">旅游</span>
<span class="checkCss"><input type="checkbox" name="check" value="2">音乐</span><br>
<span class="checkCss"><input type="checkbox" name="check" value="3">体育</span>
<span class="checkCss"><input type="checkbox" name="check" value="4">文学</span><br>
状态：<span class="redioCss"><input type="radio" name="status" value="1">在职</span>
<span class="redioCss"><input type="radio" name="status" value="2">离职</span><br>
简介：<input type="text" name="note" width="250"><br>
<input type="button" value="提交" id="subt"><br>
</body>
</html>
5、层级元素获取
$("Element1 Element2 Element3 ....") '前面父级 后面是子集
$("div > p") '获取div下面的所有的 p元素
$("div + p") 'div元素后面的第一个 p元素
$("div ~ p") 'div后面的所有的 p元素
6、简单对象获取
$("Element:first") 'HTML页面中某类元素的第一个元素
$("Element:last") 'HTML页面中某类元素的最后一个元素
("input:not(:checked)") 表示选择所有没有选中的复选框
$("Element:even") '获得偶数行
$("Element:odd“）'获得奇数行
$("Element:eq(index)") '取得一个给定的索引值
$("Element:gt(index)") '取得给定索引值的元素 之后的所有元素
$("Element:lt(index)") '取得给定索引值的元素 之前的所有元素
7、内容对象的获取和对象可见性
$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:partnt") '获得元素包含子元素或文本的
("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素
8、其他对象获取方法
$("Element[id]") '所有带有ID属性的元素
$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素
$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素
$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素
= youlika ]" '获得所有某个属性为不是youlika的结尾的元素
$("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素
("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。
9、子元素的获取
$("Element:nth-child(index)") '选择父级下面的第n个元素
$("Element:nth-child(even)") '选择父级下面的偶数
$("Element:nth-child(odd)") '选择父级下面的奇数
$("Element:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父级下面的第一个子元素
$("Element:last-child") '选择父级下面的最后一个子元素
$("Element:only-child") '匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt
10、表单对象获取
$(:input)//查找所有的Input元素，当然也包括下拉列表，文本域，单选框，复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域，例如<input type="image" />
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素，作用与上相反
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表
11、元素属性的设置与移除
("img").attr("src")
$("Element".attr(key,value)") '某一个元素设置属性
$("Element".attr({key:value,key1:value,....})) ‘为某个元素一次性设置多个属性
$("Element").attr(key,function) '为所有匹配的元素设置一个计算的属性值。
$("Element").removeAttr(name)//移除某一个属性