jQuery中的一些常見(jiàn)方法小結(jié)(推薦)
1.filter()和not()方法
filter()和not()是一對(duì)反方法,filter()是過(guò)濾.
filter()方法是針對(duì)元素自身。(跟has()方法有區(qū)別)
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*filter(): 過(guò)濾
not():filter的反義詞<BR>*/
$(function(){
//$('div').filter('.box').css('background','red'); <SPAN style="COLOR: #ff0000">//將div中帶有class=‘box'的div的背景色改成紅色</SPAN>
$('div').not('.box').css('background','red'); <SPAN style="COLOR: #ff0000">//將div中除帶有class=‘box'的div的其他div設(shè)置背景色為紅色</SPAN>
?
1 }); </script> <BR></head> <BR><body> <BR><div class="box">div</div><BR> <div>div2</div> <BR></body> <BR></html>
2.has()方法
has()方法表示的是包含的意思,它跟filter()方法是有區(qū)別的。has()方法有父子級(jí)關(guān)系。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*filter(): 過(guò)濾
not():filter的反義詞
has():包含 */
$(function(){
//$('div').has('span').css('background','red'); <SPAN style="COLOR: #ff0000">//只有包含span標(biāo)簽的div(父級(jí))的背景色為紅色</SPAN>
$('div').has('.box').css('background','red'); <SPAN style="COLOR: #ff0000">//只有包含的標(biāo)簽的class值是box的div(父級(jí))的背景色為紅色</SPAN>
});
</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()方法就是尋找下一個(gè)兄弟節(jié)點(diǎn)和上一個(gè)兄弟節(jié)點(diǎn)。
find()方法:尋找
eq():索引
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*next():下一個(gè)兄弟節(jié)點(diǎn)
prev():上一個(gè)兄弟節(jié)點(diǎn)
find():尋找
eq():索引
*/
$(function(){
//$('div').find('h2').css('background','red'); <SPAN style="COLOR: #ff0000">//只會(huì)給div下的所有h2的背景色設(shè)置為紅色</SPAN>
$('div').find('h2').eq(0).css('background','red'); <SPAN style="COLOR: #ff0000">//給div下的第一個(gè)h2的背景設(shè)置為紅色</SPAN>
});
</script>
</head>
<body>
<div>
<h3>h3</h3>
<h2>h2</h2>
<h2>h2</h2>
<h1>h1</h1>
</div>
<h2>haha</h2> //不會(huì)變紅
</body>
</html>
4.index()方法
<script>
/*
index():索引就是當(dāng)前元素在所有兄弟節(jié)點(diǎn)中的位置
*/
$(function(){
alert($('#h').index()); <SPAN style="COLOR: #ff0000"> //索引就是當(dāng)前元素在所有兄弟節(jié)點(diǎn)中的位置</SPAN>
//彈出是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():屬性設(shè)置
*/
$(function(){
alert($('div').attr('title')); <SPAN style="COLOR: #ff0000">//獲取屬性title的值</SPAN>
$('div').attr('title','456'); <SPAN style="COLOR: #ff0000">//設(shè)置title屬性的值是456</SPAN>
$('div').attr('class','box'); <SPAN style="COLOR: #ff0000"> //給div設(shè)置class屬性,值是box</SPAN>
});
</script>
</head>
<body>
<div title="123">div</div>
</body>
</html>
以上這篇jQuery中的一些常見(jiàn)方法小結(jié)(推薦)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery中clone()函數(shù)實(shí)現(xiàn)表單中增加和減少輸入項(xiàng)
這篇文章給大家介紹了jQuery中clone()函數(shù)實(shí)現(xiàn)表單中增加和減少輸入項(xiàng)的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-05-05
jQuery中借助deferred來(lái)請(qǐng)求及判斷AJAX加載的實(shí)例講解
deferred對(duì)象的延遲功能對(duì)jQuery的ajax操作是一個(gè)很大的幫助,尤其是回調(diào)控制,下面我們就來(lái)看一下對(duì)jQuery中借助deferred來(lái)請(qǐng)求及判斷AJAX加載的實(shí)例講解2016-05-05
Javascript函數(shù)中的arguments.callee用法實(shí)例分析
這篇文章主要介紹了Javascript函數(shù)中的arguments.callee用法,結(jié)合實(shí)例形式分析了arguments.callee操作當(dāng)前方法引用的具體技巧,需要的朋友可以參考下2016-09-09
基于JQuery實(shí)現(xiàn)的跑馬燈效果(文字無(wú)縫向上翻動(dòng))
本篇文章分享了如何實(shí)現(xiàn)文字無(wú)縫向上翻動(dòng)效果的示例代碼。代碼清晰明了,可直接下載使用。有興趣的朋友可以看下2016-12-12
jquery+php實(shí)現(xiàn)搜索框自動(dòng)提示
百度上有個(gè)很使用的功能,就是用戶(hù)在搜索的時(shí)候會(huì)自動(dòng)提示相關(guān)搜索條件以供選擇,非常人性化的設(shè)計(jì),我們?nèi)绾螌⒋斯δ芊诺阶约旱捻?xiàng)目中呢,經(jīng)過(guò)一番研究,終于實(shí)現(xiàn)了此功能,分享給大家。2014-11-11
jQuery實(shí)現(xiàn)DIV層收縮展開(kāi)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)DIV層收縮展開(kāi)的方法,實(shí)例分析了jQuery中toggle與animate等方法的使用技巧,需要的朋友可以參考下2015-02-02
jquery focus(fn),blur(fn)方法實(shí)例代碼
jquery focus(fn),blur(fn)方法實(shí)例代碼,需要的朋友可以參考下。2011-12-12

