该文详细介绍了jQuery的各种选择器，包括基本选择器（如id、class、元素选择器）、层次选择器（后代、直系后代、相邻和后续兄弟选择器）、过滤选择器（如:first、:last、:not、:even、:odd等）以及表单选择器，帮助读者理解和掌握jQuery中用于高效选取DOM元素的方法。
目录
jQuery选择器之总结笔记
首先来介绍一下什么是jQuery？
1. jQuery是一个非常优秀的JavaScript库。
2. 更确切的说，jQuery是JavaScript框架，因为它定义了自己的语法。
3. jQuery的优秀特性：
（1）轻量级，压缩版jQuery只有30多K；
（2）出色的跨浏览器兼容性，不必考虑firefox、IE6、IE7、IE8、Safari、Opera等不同浏览器的兼容性问题；
（3）完善的Ajax应用，使Ajax变得简单；
（4）DOM操作简单化；
（5）丰富的插件支持，强大的易扩展性；
（6）一句话：Write Less，Do More。写的更少，但做的更多。
如何在Html中引入jQuery库
<script src="jquery-1.9.1.min.js"></script>
基础选择器
基础选择器分为四类：1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器
1基本选择器
基本选择器又分为五类:
1、id选择器 2、class选择器 3、 element选择器 4、*选择器 5、组合选择器
1.1 id选择器
通过dom对象的id定位dom对象，通过id找对象，id在当前页面是唯一的
语法规则：$(“#dom对象的id值”)
1.2 class选择器
使用标签的类名定位dom对象.
语法规则：$(“.class类名”)
1.3 elemen选择器
使用标签名定位dom对象。
语法规则：$(“标签名称”)
1.4 *选择器
表示所有的元素。
语法规则：$(“*”)
1.5 组合选择器
表示所有的元素。
语法规则：$(“*”)
基本选择器例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(function () {
$("#one").css("background-color", "red");//id
$(".two").css("color", "yellow");//class
$("p").css("border", "1px solid bule");//ement
$("*").css("text-decoration", "underline")//*
$("#oen, .two,p span").css("fon-weight", "bold")//组合
})
</script>
</head>
<body>
<div id="one">div1</div>
<div class="two">div2</div>
<p class="p1">p1</p>
<p class="p2">p2 <br>
<span>SPAN</span>
</p>
</body>
</html>2层次选择器
层次选择器共有四种：1、后代选择器 2、直系后代 3、prev + next 4、prev ~siblings
2.1：后代选择器
根据父元素获取下面的任何元素
语法规则：$（“父亲元素 子元素”）
2.2：直系后代
父元素下的第一个子元素
语法规则：$(“父亲元素>子元素”)
2.3：prev + next
下一个兄弟元素
语法规范：$(".one+p")
2.4：prev ~siblings
元素后面的所有兄弟元素
语法规范：$("#two~p")
层次选择器例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(function () {
//01后代选择器
$("div span").css("color", "purple");
//02直系后代
$("div>span").css("color", "red").css("font-size", "26px");
//03下一个兄弟元素，等同于next（）方法
//$(".list1").css("background-color","pink")
$(".list1").next("li").css("background-color", "pink")
//04prev~siblings (元素后面的所有兄弟元素，等同于nextAll()方法)
//$(".list2~li").css("border","3px solid green").slideUp(1000);
$(".list2").nextAll("li").css("border", "3px solid green")
})
</script>
</head>
<body>
<div>
<span>div下的直系span</span>
<p>
<span>div > p > span</span>
</p>
</div>
<ul>
<li class="list1">北京</li>
<li>天津</li>
<li class="list2">上海</li>
<li>重庆</li>
<li>四川</li>
<li>广西</li>
<li>云南</li>
</ul>
</body>
</html>
3过滤选择器
常用的过滤选择器有以下6种：
1、基本过滤选择器 2、内容过滤选择器 3、可见性过滤选择器
4、属性过滤选择器 5、子元素过滤选择器 6、表单过滤选择器
3.1基本过滤选择器
根据元素在页面中的位置来选取元素。常见的有以下几种：
1、:first 和 :last
取第一个元素或者最后一个元素
语法规范：$("第一个元素:first")
$("最后一个元素:last")
2、:not
取非...的元素
语法规范：$("div:not(.one)")
注：所有div里面没有类名为one的元素
3、:even 和 :odd
取偶数索引或奇数索引元素,索引从0开始,even表示偶数,odd表示奇数
语法规范：$('tr:odd')
$('tr:even')
4、:eq(x)
取指定索引的元素
语法规范：$('tr:eq(2)').css('background','red')
5、:gt(x)和:lt(x)
取大于x索引或小于x索引的元素
语法规范：$('ul li:gt(2)').css('color','red')
$('ul li:lt(2)').css('color','orange')
6、:header
取h1-h6 标题元素
语法规范：$(':header').css('background','yellow');
7、:animateIt
选取正在执行动画的元素
语法规范：
$(function(){
function animateIt(){
$("#mover").slideToggle("slow",animateIt);
}
animateIt();
//:animateIt取动画元素
$(":animated").css("background","pink");
})
8、:focus
改变当前获取焦点的元素
语法规范：
$(function(){
//$("form input:focus").css("background","red")
$("input").focus(function(){
$(this).css("background","red")
})
})
3.2、内容过滤选择器
指的是根据元素的内部文字或者子元素来选取元素，常用的有以下几种：
1、contains（text）（取包含指定文本的内容元素）
$(function(){
//找到包含jquery内容的li
$("li:contains(jquery)").css("background","red")
})2、empty(取不包含子元素或文本元素为空的元素)
$(function(){
$("li:empty").html("没有内容").css("background","red")
})3、has（selector）（取选择器匹配的元素）
$(function(){
$("*").css({"margin":"0","padding":"0"})
//has(selector)(取选择器匹配的元素)
$("div:has(span)").css("border","1px solid #f00")
})
4、parent（取包含子元素或文本的元素）
$(function(){
$("ol li:parent").css("border","1px solid #000")
})
3.3、可见性过滤选择器
指的是根据元素的可见与不可见这两种状态来选取元素。
1、hidden（取不可见元素）
$(function(){
$(document).ready(function(){
$("div:hidden").show(500)
//:hidden只匹配css属性设置为display:none type="hidden"的元素
alert($("input:hidden").val())
})
})
2、visible（取可见性元素）
$(function(){
$("div:visible").css("background","pink")
//:visible只匹配显示的元素(css未设置display:none的元素)
})3.4、属性过滤选择器
1、[attribute](取拥有attribute属性的元素)
$(function(){
$("a[title]").css({"text-decoration":"none","color":"red"});
});2、[attribute = value]和[attribute != value]
$(function(){
$("a").css("text-decoration","none");
$('a[class="item"]').css('color',"red");
$('a[class!="item"]').css('color',"blue");
})3、属性以某些字符开头结尾或包含某些字符
$(function(){
//识别大小写,输入字符串时可以输入引号,[title^=jQuery]和[title^="jQuery"]是一样的
$("a").css("text-decoration","none");
$('a[title^=jQuery]').css('color','red');
$('a[title$=jQuery]').css('font-size','24px');
$('a[title*=jQuery]').css('text-decoration','line-through');
})4、复合属性过滤选择器
$(function(){
//[selector1][selector2]复合型属性选择器
$('a[title^=jQuery][class=item]').hide();
})3.5、子元素过滤选择器
指的是选择在某一个元素下的子元素的一种伪类选择器。
1、first-child和last-child
$(document).ready(function(){
//selector:first-child返回的是整个第一个子元素
$('div.one :first-child').css("background","#bbffaa");
$("div.one :last-child").css("background","orange");
})2、only-child仅包含一个子元素
//当某个元素有且仅有一个子元素时,:only-child才会生效
$('p:only-child').css('border','1px solid #ff0000').css('width','200px')3、nth-child(x)第x个元素
//序数词，获取第x个子元素,第一个dom元素就是1而不是0，
$("tr:nth-child(3)").css("background","red");4、nth-child（even）和nth-child（odd）
$('tr:even').css('background', 'red')
$('tr:odd').css('background', 'blue')5、nth-child(xn+y)通顺式表达方式
$('tr:nth-child(2n)').css('background','red')3.6、表单过滤选择器
1、enabled和disabled（取可用或不可用元素）
//:enabled和:disabled的匹配范围包括input,select,textarea
$(':enabled').css('border','2px solid red')
$(':disabled').css('border','2px solid green')2、checked(取选中的单选框或复选框元素)
$(':checked').css('background','#ff0000').each(function(){
alert($(this).val())
})3、selected（取下拉列表被选中的元素）
//selected(取下拉列表被选中的元素)
$("#sel").change(function(){
alert($(":selected").val())
})4、表单选择器
1、input（取input textarea select button元素）
//取input单行文本框,textarea多行文本框,select,button元素
$(":input").css("background","red");
2、text（取单行文本框元素）和password（取密码框元素）
// :text (取单行文本框元素) 同$("input[type=text]")
// :password（取密码框元素）同$("input[type=password]")
$(":text,:password").css("border","2px solid red")
3、radio（取单选框元素）
$(":radio").parent().css("background","pink")
4、checkbox（取复选框元素）
$(":checkbox").parent().css("background","red")
//弹出被选复选框的值
//方法1
// $(":checkbox:checked").each(function(){
// alert($(this).val())
// })
//方法2
// $("input[type=checkbox][checked]").each(function(){
// alert($(this).val())
// })
//方法3
// $(":checked").each(function(){
// alert($(this).val())
// })5、submit (取提交按钮元素)
$(":submit").css("background","yellow")6、reset(取重置按钮元素)
$(":reset").css("background","green")7、button (取按钮元素)
$(":button").css("background","blue")8、file (取上传域元素)
$(":file").css("background","chocolata")9、hidden(取上传或元素)
$(":hidden").prev("label").css("background","orange")
扫一扫
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
