jquery中的过滤选择器:
1.通过标签的内容来进行过滤
:contains(’内容关键字‘)
例:
$("input").click(function () {
$("p:contains('JJJ')").css("background", "red");
});
2.可见性选择器:
依赖于元素是否可见作为筛选的条件
:hidden 过滤出不可见的元素
:visible 过滤出可见的元素
举例:
1. <p style="display:none">hhh</p> //隐藏
2.
$("input").click(function () {
alert( $("p:hidden('hhh')").text());
});
3.循环遍历的方法
jquery对象.each(function(){
//函数体
});
//注意:
visibility:hidden这种隐藏方式通过:hidden无法过滤的00
opacity 0:透明度为0 不是隐藏
3.属性过滤选择器:
语法:$("基本选择器[属性名]") 过滤出制定属性的元素
$(基本选择器["属性名=属性值"]过滤出保函制定属性并且属性值为制定的值元素
$("input").click(function () {
$("p[title]").each(function () {
alert($(this).text());
});
jquery中提供与选择器相关的一些筛选方法:
链式操作:jquery操作的一个特色
这些方法返回的是选择到的jquery对象的方法
$("p[title=aaa]").each(function () {
alert($(this).css("background","red").css("color","blue"));
});
方法:
first()选中第一个元素//left();
$("input").click(function () {
$("p").first().css("background", "red");
});
//注意:过滤方法主要用于链式操作(提高性能)//链式操作的好处
end()结束当前链式操作并放回前面选择到的jquery对象
例:
$("input").click(function () {
$("p").first().css("background", "red").end;
});
1.last()/eq(index)//传入参数 等价于:eq(index)
2.fillter(":过滤选择器")
$("p").filter(":even").css("background", "red").end;//通过偶数进行过滤
3.not("基本选择器/过滤选择器")方法相当于:not()
例子:将单元格分成不同的颜色
$("input").click(function () {
$("#zz tr").filter(":even").css("background", "red").end().filter(":odd").css("background",
"blue");
});
3 根据元素之间的层次关系进行DOM筛选:
1.对象.children() 获取当前对象的所有子元素
不包括文本节点和空的文本节点
一般规律:只要是用来选择多个元素的方法都可以传入参数
2.对象.parent();直接选择上一级的元素
//jq写入选择器的时候别忘了写#或者.还有在写按钮的时要input
parent("参数") 选择所有的父元素
3.兄弟元素的选择方法:
next() 返回紧临当前对象的下一个兄弟元素
nextAll() 获取对象后所有兄弟元素
prev() 返回紧临上一个兄弟元素
prevAll()返回所有的兄弟元素
siblings()返回所有的对象元素除了当前对象自己本身
例:
<div>
我是大盒子
<div id="xz">
我是小盒子
<p>W</p>
<p>j</p>
</div>
</div>
<input type="button" value="测试" />
<script type="text/javascript">
var divd = $("#xz");
alert( divd.children().length);