jQuery—一些常见方法（1）【filter(),not(),has(),next(),prev(),find(),eq(),index(),attr(),】...

最新推荐文章于 2021-02-09 17:11:52 发布

yuxiaoyu.

最新推荐文章于 2021-02-09 17:11:52 发布

阅读量223

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/moranhuishou/p/5580925.html

版权

1.filter()和not()方法

filter()和not()是一对反方法，filter()是过滤.

filter()方法是针对元素自身。（跟has()方法有区别）

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*filter(): 过滤
not():filter的反义词
*/
$(function(){
	//$('div').filter('.box').css('background','red');   //将div中带有class=‘box’的div的背景色改成红色
	$('div').not('.box').css('background','red');       //将div中除带有class=‘box’的div的其他div设置背景色为红色

}); </script> 
</head> 
<body> 
<div class="box">div</div>
 <div>div2</div> 
</body> 
</html>

2.has()方法

has()方法表示的是包含的意思，它跟filter()方法是有区别的。has()方法有父子级关系。　

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*filter(): 过滤
not():filter的反义词
has():包含 */
$(function(){
	//$('div').has('span').css('background','red');  //只有包含span标签的div(父级)的背景色为红色
	$('div').has('.box').css('background','red');   //只有包含的标签的class值是box的div(父级)的背景色为红色
	});
</script>
</head>

<body>
<div> div
    <span class="box">
    span
    </span>
</div>
<div class="box">div2</div>
<div class="haha">div3</div>
</body>
</html>

3.next()、prev()、find()、eq()方法

next()、prev()方法就是寻找下一个兄弟节点和上一个兄弟节点。

find()方法：寻找　

eq():索引

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*next():下一个兄弟节点
prev():上一个兄弟节点
find():寻找
eq():索引
*/
$(function(){
	//$('div').find('h2').css('background','red');     //只会给div下的所有h2的背景色设置为红色
	$('div').find('h2').eq(0).css('background','red');   //给div下的第一个h2的背景设置为红色
	});
</script>
</head>

<body>
<div>
　　<h3>h3</h3>
    <h2>h2</h2>
    <h2>h2</h2>
    <h1>h1</h1>
</div>
<h2>haha</h2>   //不会变红

</body>
</html>

4.index()方法　

<script>
/*
index():索引就是当前元素在所有兄弟节点中的位置
*/
$(function(){
	alert($('#h').index());  //索引就是当前元素在所有兄弟节点中的位置
							//弹出是3
	});
</script>
</head>

<body>
<div>
	<h3>h3</h3>
    <h2>h2</h2>
    <h2>h2</h2>
    <h3 id="h">h3</h3>
    <h1>h1</h1>
</div>
<h2>haha</h2>

</body>
</html>

4.attr()方法　　

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*
attr():属性设置
*/
$(function(){
	alert($('div').attr('title'));  //获取属性title的值
	$('div').attr('title','456');   //设置title属性的值是456
	$('div').attr('class','box');   //给div设置class属性，值是box
	});
</script>
</head>

<body>
<div title="123">div</div>
</body>
</html>

转载于:https://www.cnblogs.com/moranhuishou/p/5580925.html

yuxiaoyu.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery—一些常见方法（1）【filter(),not(),has(),next(),prev(),find(),eq(),index(),attr(),】...

1.filter()和not()方法filter()和not()是一对反方法，filter()是过滤.filter()方法是针对元素自身。（跟has()方法有区别）<script type="text/javascript" src="jquery-1.12.3.min.js"></script><script>/*filter(): 过...
复制链接

扫一扫