定义:JQuery选择器允许对HTML元素组或单个元素进行操作
基于元素的id、类、类型、属性、属性值等“查找”(或选择)HTML元素。它基于已经存在的CSS选择器,还有一些自定义的选择器
所有的选择器都以美元符号开头:$()
一、元素选择器
基于元素名选取元素 $(“p”)
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
运行结果:点击按钮,p标签隐藏
二、id选择器
JQuery #id选择器通过HTML元素的id属性选取指定的元素
页面中元素的id应该是唯一的。所以要在唯一的元素需要通过#id选择器
语法:$(“#test”)
实例:
// 2.id选择器
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
三、.class选择器
JQuery类选择器可以通过指定的class查找元素
点击按钮后所有带有class=“test”属性的元素都隐藏
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
四、更多实例:
$(“*”) 选取所有元素
$(this) 选取当前HTML元素
$(“p.intro”) 选取class 为intro的<p>元素
$(“p.first”) 选取第一个<p>元素
$(“ul li:first”) 选取第一个<ul>元素的第一个<li>元素
$(“ul li:first-child”) 选取每一个<ul>元素的第一个<li>元素
$(“[href]”)选取带有href属性的元素
$(“a[target=’_blank’]”) 选取target属性值等于”_blank”的<a>元素
$(“a[target!=’_blank’]”) 选取target属性值不等于”_blank”的<a>元素
$(“:button”) 选取所有type=”button”的<input>元素和<button>元素
$(“tr:even”) 选取偶数位置的<tr>元素
$(“tr:odd”) 选取奇数位置的<tr>元素
五、独立文件中使用JQuery函数
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="my_jquery_functions.js"></script>
</head>
六、通过$(“:button”)可以选取所有type=”button”的<input>元素和<button>元素,
如果去掉冒号,$(“button”)只能获取<button>元素
代码实例:
<p id="test1">点进这里测试 <b>button</b></p><p id="test2">点进这里测试 <b>:button</b></p><button>Button 按钮</button><input type="button" value="Input 按钮">
关于:和[]
: JQuery的过滤选择器,语法类似于css中的伪类选择器,可分为基本过滤(p:first),内容过滤(:empty),子元素过滤(:first-child) 和属性过滤[href]。
可以理解为种类的意思,如p:first,p的种类为第一个
[] 属性。如[href]选取带有href属性的元素
$("#id", ".class") 复合选择器
$(div p span) 层级选择器 //div下的p元素中的span元素
$(div>p) 父子选择器 //div下的所有p元素
$(div+p) 相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p) 兄弟选择器 //div后面的所有p元素(同级别)
$(.p:last) 类选择器 加 过滤选择器 第一个和最后一个(first 或者 last)
$("#mytable td:odd") 层级选择 加 过滤选择器 奇偶(odd 或者 even)
$("div p:eq(2)") 索引选择器 div下的第三个p元素(索引是从0开始)
$("a[href='www.baidu.com']") 属性选择器
$("p:contains(test)") // 内容过滤选择器,包含text内容的p元素
$(":emtyp") //内容过滤选择器,所有空标签(不包含子标签和内容的标签)parent 相反
$(":hidden") //所有隐藏元素 visible
$("input:enabled") //选取所有启用的表单元素
$(":disabled") //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素