这里来总结下JQuery中常用的选择器，以下JQ函数均定义在$(function(){});函数（即JS 中window.onload函数中）
1.基本选择器
基本选择器包括ID选择器、类选择器、元素名称选择器等，使用形式与CSS中添加样式的格式相似
$(function(){
//ID选择器，选择元素id属性等于"ID"的元素 输出"根据id选择"
alert($("#ID").val());
//类选择器 选择元素class属性等于"classname"的元素 输出"根据元素css类名选择"
alert($(".classname").val());
//元素名称选择器 输出"根据元素名称选择"
alert($("a").text());
//选择页面所有的元素,注意此处选择是从HTML页面根元素开始选择
alert($("*").length);
//组合选择，选择元素名称为input或元素名称为a的元素
alert($("input,a").length); //输出3
});页面主体部分:
<body>
<input type="text" id="ID" value="根据id选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素css类名选择" />
</body>2.层次选择器
$(function(){
alert($("#divTest a").length); //后代选择器，根据ID选择父元素 要选取的后代元素名称与父元素间以空格隔开
// 选取所有的后代 包括儿子、孙子 输出3
alert($("#divTest>input").length);//后代选择器，根据ID选择父元素 要选取的后代元素名称与父元素间以>连接
//只选取儿子这一代 输出4
alert($("#next+input").length);// 查找下一个同辈元素（即兄弟元素）
//先根据ID查找主元素 主元素与要查找的兄弟元素间以+号连接 只找一个 输出1
alert($("#next~input").length);// 查找所有的同辈元素 （即兄弟元素）
//先根据ID查找主元素 主元素与要查找的兄弟元素间以~号连接 查找所有的兄弟元素 输出2
});<body>
<div id="divTest">
<input type="text" value="文本框一" />
<input type="text" id="next" />
<input type="text" value="文本框二" />
<input type="text" title="文本框三" value="文本框三" />
<a>1<input type="text" value="文本框四" /></a>
<a>2<a>3</a></a>
</div>
</body>3.过滤选择器
$(function(){
alert($("li:first").html());//取出第一个li元素的内容 输出"Java"
alert($("li:last").html());//取出最后一个li元素的内容 输出"JavaWeb"
alert($("ul input:not(:checked)").val());
// ul input 取出ul下所有的input元素 排除checked的元素 输出"不学习"
alert($("li:even").get(0).innerHTML);
//even 返回li对象数组的偶数项（下标从0开始）,共两个第1个为Java 第2个为数据库 输出"Java"
alert($("li:odd").get(1).innerHTML);
//odd 返回li对象数组的奇数项（下标从0开始）第1个为C++ 第2个为JavaWeb 输出"JavaWeb"
alert($("li:eq(2)").html());
//返回li对象数组的第二项（下标从0开始） 输出"数据库"
alert($("li:gt(1)").length);
//返回li对象数组中下标大于1的对象（下标从0开始）输出2
alert($("li:lt(1)").length);
//返回li对象数组中下标小于1的对象（下标从0开始）输出1
alert($(":header").length);
//返回h标题对象 输出 2
});
<body>
<div id="divTest">
<ul>
<li>Java</li>
<li>C++</li>
<li>数据库</li>
<li>JavaWeb</li>
<input type="radio" value="学习" checked="checked" />学习
<input type="radio" value="不学习" />不学习
<h1>Header 1</h1>
<h2>Header 2</h2>
</ul>
</div>
</body>
$(function(){
//过滤选择内容包含'Java'字符串的元素 输出元素内容 输出Java并发编程
//alert($("li:contains('Java')").html());
//过滤选择内容为空的元素 输出1
alert($("li:empty").length);
//过滤选择内容不为空（包含文本元素或子元素）的元素 输出5
alert($("li:parent").length);
//过滤选择子元素包含<a>标签的元素 输出 <a>Go语言从入门到精通<a>
alert($("li:has(a)").html());
});
<body>
<div id="Test">
<ul>
<li>Java并发编程</li>
<li>C语言</li>
<li>C++</li>
<li>oracle数据库</li>
<li><a>Go语言从入门到精通</a></li>
<li></li>
</ul>
</div>
</body>
$(function(){
//选择不可见元素
alert($("li:hidden").html());
//选择可见元素
alert($("li:visible").html());
});
<body>
<ul>
<li>可见</li>
<li style="display: none;">不可见</li>
</ul>
</body>
$(function(){
//选择input元素中包含name属性的input元素 输出6
alert($("input[name]").length);
//选择input元素中包含type元素且type元素的属性值等于button的input元素 输出浪潮优派
alert($("input[type='button']").val());
//选择input元素中包含type元素且type元素的属性值不等于button的input元素 输出5
alert($("input[type !='button']").length);
//选择input元素中包含name属性且属性值以‘b’开头 输出百度
alert($("input[name^='b']").val());
//选择input元素中包含name属性且属性值包含‘s’ 输出2
alert($("input[name*='s']").length);
//选择input元素中包含name属性且属性值以‘o’结尾 输出浪潮优派
alert($("input[name$='o']").val());
//选择input元素中包含name属性且属性值包含'chao'且必须用空格隔开（前后均可） 输出浪潮优派
alert($("input[name~='chao']").val());
//符合条件测试 输出浪潮优派
alert($("input[type^='b'][name~='lang']").val());
});页面主体部分：
<body>
<input type="text" name="baidu" value="百度" /><br />
<input type="text" name="souhu" value="搜狐" /><br />
<input type="text" name="google" value="谷歌" /><br />
<input type="text" name="sougou" value="搜狗" /><br />
<input type="text" name="xinlang" value="新浪" /><br />
<input type="button" name="lang chao" value="浪潮优派" /><br />
</body>7.子元素过滤选择器
$(function(){
//选取div中第一个子元素的所有元素
//输出数据结构、红黑树、算法、HTML
//注意分号前有空格
alert($("div :first-child").text());
//选取div中第一个元素是span的元素
//输出数据结构
alert($("div span:first-child").text());
//选取div中最后一个元素是span的元素、
//输出Web前端技术 B-树
alert($("div span:last-child").text());
//选取div下第一个span子元素 要求该span 前或后有同名的兄弟元素
//输出数据结构 二叉树
alert($("div span:first-of-type").text());
//选取div 下只有一个b元素作为子元素的元素 输出 算法
alert($("div b:only-child").text());
//选取div下 第二个子元素是span元素的元素
//输出 C语言 二叉树
//注意 下标从1开始
alert($("div span:nth-child(2)").text());
//选取div下得b元素 且b元素前后没有同名的兄弟节点
alert($("div b:only-of-type").text());
//选取div下span元素 且元素是偶数项
//下标从1开始
//输出 C语言 Web前端技术 二叉树 B-树
alert($("div span:nth-child(even)").text());
//选取div下span元素 且元素是奇数项
//下表从1开始
//输出 数据结构 Java基础 B+树
alert($("div span:nth-child(odd)").text());
});
<body>
<div>
<span>数据结构</span>
<span>C语言</span>
<span>Java基础</span>
<span>Web前端技术</span>
</div>
<div>
<b>红黑树</b>
<span>二叉树</span>
<span>B+树</span>
<span>B-树</span>
</div>
<div>
<b>算法</b>
</div>
<div>
<b>HTML</b>
<b>CSS</b>
<i>JS</i>
</div>
</body>
$(function(){
//选择input标签 select textarea button 同样属于input标签 输出15
alert($(":input").length);
//获取所有单行文本框 输出2
alert($(":text").length);
//获取密码框 输出1
alert($(":password").val());
//获取单选按钮 输出male
alert($(":radio").val());
//获取复选框 输出football
alert($(":checkbox").val());
//选取提交按钮 输出提交
alert($(":submit").val());
//选取重置按钮 输出重置
alert($(":reset").val());
//获取图片按钮 输出2
alert($(":image").length);
//选取按钮 输出2 <button>标签也在其中
alert($(":button").length);
//选取上传文件框 输出1
alert($(":file").length);
}); <body>
<form>
<input type="button" value="Input Button" /><br />
<input type="checkbox" value="football" /><br />
<input type="file" value="upload" /><br />
<input type="hidden" value="ok" /><br />
<input type="image" value="a.jpg" /><br />
<input type="password" value="pass" /><br />
<input type="radio" value="male" /><br />
<input type="reset" value="重置" /><br />
<input type="submit" value="提交" /><br />
<input type="text" name="name" value="zhangsan" /><br />
<input type="text" name="age" value="20" /><br />
<select>
<option>Option1</option>
<option>Option2</option>
</select><br />
<textarea cols="10" rows="5">多行文本框</textarea>
<button type="button">Button</button><br />
<input type="image" src="b.jpg" />
<img src="b.jpg" />
</form>
</body>9.表单选择器（二）
$(function(){
//选择 不可用的单行文本框 输出2
alert($(":text:disabled").length);
//选择 可用的单行文本框 输出2
alert($(":text:enabled").length);
//选择 被选中的复选框 输出football
alert($(":checkbox:checked").val());
//选择被选中的下拉菜单 输出 菏泽
alert($("select :selected").text());
//注意中间不加空格意义不同 不加空格表示选择选中的下拉菜单 输出0
alert($("select:selected").length);
}); <body>
<form id="myform">
<input type="text" name="myschook" value="浪潮" /><br />
<input type="text" name="myworkplace" value="盛大" disabled="disabled" /><br />
<input type="text" name="myage" value="22" disabled="disabled" />
<input type="text" name="myname" value="mts" /><br />
<input type="checkbox" name="hobby" value="football" checked="checked" />足球<br />
<input type="checkbox" name="hobby" value="basketball" />篮球<br />
<input type="checkbox" name="hobby" value="tennis" />网球<br />
<select>
<option selected="selected">菏泽</option>
<option>烟台</option>
</select>
</form>
</body>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
