欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery中獲取元素的幾種方式小結(jié)

 更新時(shí)間：2011年07月05日 23:17:21   作者：  
jquery中獲取元素的幾種方式小結(jié)，需要的朋友可以參考下。
1 從集合中通過(guò)指定的序號(hào)獲取元素
html：
復(fù)制代碼 代碼如下:

<div>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>

JS
復(fù)制代碼 代碼如下:

<script type="text/javascript">
jQuery(function(){
$("p").eq(2).css("color","red");
$("p").eq(3).css("color","red");
})
</script>

2 獲取指定條件一致和指定范圍的元素
html:
復(fù)制代碼 代碼如下:

<div>
<p>0</p>
<p>1</p>
<p class="center">2</p>
<p class="center">3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>

JS
復(fù)制代碼 代碼如下:

<script type="text/javascript">
jQuery(function(){
$("p").filter('.center').css("color","red");
})
$(function(){
$("p").slice(5,7).css("color","yellow");
})
</script>

3 獲取與條件表達(dá)式一致的元素
html:
復(fù)制代碼 代碼如下:

<div>
<p>0</p>
<p>1</p>
<p class="center">2</p>
<p class="center">3</p>
<p>4</p>
<p class="aa">5</p>
<p>6</p>
<p>7</p>
</div>

js
復(fù)制代碼 代碼如下:

<script type="text/javascript">
jQuery(function(){
$("p").each(function(){
switch(true){
case $(this).is(".center"):
$(this).css("color","red");
break;
case $(this).is(".aa"):
$(this).css("color","yellow");
break;
}
})
})
</script>

4 獲取元素的上一個(gè)元素和下一個(gè)元素
Html:
復(fù)制代碼 代碼如下:

<div id="aa">
<p>1號(hào)</p>
<p class="yes">2號(hào)</p>
<p>3號(hào)</p>
<p>4號(hào)</p>
<p>5號(hào)</p>
<p class="yes">6號(hào)</p>
<p class="yes">7號(hào)</p>
</div>

js
復(fù)制代碼 代碼如下:

//獲取元素的下一個(gè)元素
jQuery(function(){
$("p").next(".yes").css("color","red");
})
//獲取元素的上一個(gè)元素
jQuery(function(){
$("p").prev(".yes").css("color","red");
})

5 獲取元素的父元素和子元素
html:
復(fù)制代碼 代碼如下:

<div id="aa">
<p>1號(hào)</p>
<p class="yes">2號(hào)</p>
<p>3號(hào)</p>
<p>4號(hào)</p>
<p>5號(hào)</p>
<p class="yes">6號(hào)</p>
<p class="yes">7號(hào)</p>
</div>

js
復(fù)制代碼 代碼如下:

//獲取元素的父元素
jQuery(function(){
$("p").parent().css("color","red");
})
//獲取元素的子元素
jQuery(function(){
$("#aa").children(".yes").css("color","red");
})

相關(guān)文章

  • jQuery實(shí)現(xiàn)容器間的元素拖拽功能

    jQuery實(shí)現(xiàn)容器間的元素拖拽功能

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)容器間的元素拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-12-12
  • jQuery Easyui datagrid editor為combobox時(shí)指定數(shù)據(jù)源實(shí)例

    jQuery Easyui datagrid editor為combobox時(shí)指定數(shù)據(jù)源實(shí)例

    當(dāng)在datagrid行內(nèi)部應(yīng)用添加編輯操作時(shí)，引入combobox是非常方便的操作，這篇文章主要介紹了jQuery Easyui datagrid editor為combobox時(shí)指定數(shù)據(jù)源實(shí)例，有興趣的可以了解一下。
    2016-12-12
  • jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果

    jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果

    這篇文章主要介紹了jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-09-09
  • 修復(fù)jQuery tablesorter無(wú)法正確排序的bug(加千分位數(shù)字后)

    修復(fù)jQuery tablesorter無(wú)法正確排序的bug(加千分位數(shù)字后)

    這篇文章主要介紹了如何修復(fù)jQuery tablesorter無(wú)法正確排序的bug(加千分位數(shù)字后)的相關(guān)資料,需要的朋友可以參考下
    2016-03-03
  • 動(dòng)態(tài)加載jQuery的方法

    動(dòng)態(tài)加載jQuery的方法

    這篇文章主要介紹了動(dòng)態(tài)加載jQuery的方法,可實(shí)現(xiàn)判定后加載jQuery的功能,需要的朋友可以參考下
    2015-06-06
  • 使用Jquery操作Cookies

    使用Jquery操作Cookies

    這篇文章介紹了使用Jquery操作Cookies的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-05-05
  • jQuery中的select操作詳解

    jQuery中的select操作詳解

    這篇文章主要介紹了jQuery中的select操作詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2016-11-11
  • Easyui的組合框的取值與賦值

    Easyui的組合框的取值與賦值

    最近開(kāi)發(fā)了一個(gè)項(xiàng)目，其中有功能要用戶點(diǎn)擊下拉框可以實(shí)現(xiàn)多選的效果，下文給大家分享實(shí)現(xiàn)核心代碼和combobox的取值與賦值的代碼，對(duì)easyui組合框相關(guān)知識(shí)感興趣的朋友一起看看吧
    2016-10-10
  • Jquery拖拽并簡(jiǎn)單保存的實(shí)現(xiàn)代碼

    Jquery拖拽并簡(jiǎn)單保存的實(shí)現(xiàn)代碼

    今閑著無(wú)聊 順便看了下jquery ui的拖拽插件，實(shí)現(xiàn)拖拽的方法很簡(jiǎn)單，看到效果后興奮小下...
    2010-11-11
  • jQuery中parent()方法用法實(shí)例

    jQuery中parent()方法用法實(shí)例

    這篇文章主要介紹了jQuery中parent()方法用法,實(shí)例分析了parent()方法的功能、定義及取得緊鄰父元素的使用技巧,需要的朋友可以參考下
    2015-01-01

最新評(píng)論