您的位置:首页 > 产品设计 > UI/UE

jquer基础篇二

2016-03-15 21:41 423 查看
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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: