你的位置:首页 > Java教程

[Java教程]jQuery—一些常见方法(1)


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 >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 >  span  </span></div><div >div2</div><div >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>