jQuery搜索子元素的方法
更新時(shí)間：2015年02月10日 14:57:08 作者：woshisap
這篇文章主要介紹了jQuery搜索子元素的方法,實(shí)例分析了children、find等方法的使用技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery搜索子元素的方法。分享給大家供大家參考。具體分析如下：
1. children()方法
用于獲取一個(gè)包含匹配的元素集合中每一個(gè)元素的所有子元素的元素集合，語(yǔ)法格式如下：
復(fù)制代碼 代碼如下:
children([selector])
$("#menu_ul").children().css("color", "blue");
$("#menu_ul").children().css("color", "blue");
2. find()方法
用于從每個(gè)匹配元素中查找符合指定選擇器表達(dá)式的后代元素，格式如下：
復(fù)制代碼 代碼如下:
find([selector])
$("ul").find("span").css("color", "blue");//將ul元素下的span元素的文本元素設(shè)置為藍(lán)色
$("ul").find("span").css("color", "blue");//將ul元素下的span元素的文本元素設(shè)置為藍(lán)色
示例代碼如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索指定元素的子元素</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#login").children("input").css("background","#FCF");//給div元素的直接子元素設(shè)置背景色
$("#login").contents().css("color","red"); //設(shè)置指定元素字節(jié)點(diǎn)的文本顏色
$("#tab").find("td").css("border","1px solid blue").css("color","Green");//設(shè)置指定div元素下的td元素的邊框及字體顏色
})
</script>
</head>
<body>
<h3>搜索指定元素的子元素</h3>
<div>
<div id="login">
用戶名：<input type="text" value="用戶名"/>
密碼：<input type="password" value="密碼" />
<div><input type="submit" value="登錄"/><input type="reset" value="重置"/></div>
</div>
<div id="tab">
<table width="452" height="176" border="1">
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索指定元素的子元素</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#login").children("input").css("background","#FCF");//給div元素的直接子元素設(shè)置背景色
$("#login").contents().css("color","red"); //設(shè)置指定元素字節(jié)點(diǎn)的文本顏色
$("#tab").find("td").css("border","1px solid blue").css("color","Green");//設(shè)置指定div元素下的td元素的邊框及字體顏色
})
</script>
</head>
<body>
<h3>搜索指定元素的子元素</h3>
<div>
<div id="login">
用戶名：<input type="text" value="用戶名"/>
密碼：<input type="password" value="密碼" />
<div><input type="submit" value="登錄"/><input type="reset" value="重置"/></div>
</div>
<div id="tab">
<table width="452" height="176" border="1">
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果圖如下：
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
Jquery實(shí)現(xiàn)的table最后一行添加樣式的代碼
有時(shí)間需要將表格的最后一行加上樣式，方便閱讀等需要，需要的朋友可以參考下。2010-05-05
一個(gè)有意思的鼠標(biāo)點(diǎn)擊文字特效jquery代碼
這篇文章主要介紹了一個(gè)有意思的鼠標(biāo)點(diǎn)擊文字特效jquery代碼,需要的朋友可以參考下2017-09-09
本文是基于jquery代碼實(shí)現(xiàn)的添加和刪除輸入文本框標(biāo)簽代碼，非常不錯(cuò)，具有參考借鑒，需要的朋友一起看下吧2016-05-05
jQuery中animate的幾種用法與注意事項(xiàng)
在今天之前，我對(duì)jQuery的中的animate()方法還停留在最常見的用法，查了一下手冊(cè)，發(fā)現(xiàn)在1.8的時(shí)候增加了幾個(gè)比較有用的回調(diào)函數(shù)，想著就來總結(jié)下jQuery中animate的幾種用法與注意事項(xiàng)，方便自己或者大家有需要的時(shí)候參考借鑒，下面來一起看看吧。2016-12-12
jQuery訪問json文件中數(shù)據(jù)的方法示例
這篇文章主要介紹了jQuery訪問json文件中數(shù)據(jù)的方法,結(jié)合實(shí)力形式分析了jQuery事件響應(yīng)及json文件的加載、讀取、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
jquery創(chuàng)建一個(gè)新的節(jié)點(diǎn)對(duì)象(自定義結(jié)構(gòu)/內(nèi)容)的好方法
jq創(chuàng)建一個(gè)新的節(jié)點(diǎn)對(duì)象,這對(duì)一些自定義功能很有幫助，而且可以隨意控制對(duì)象的結(jié)構(gòu)與內(nèi)容，何樂而不為呢，看到這里，相信有些朋友已經(jīng)按耐不住了，好記下來為大家介紹實(shí)現(xiàn)方法，感興趣的朋友可以了解下哦2013-01-01
基于jquery的bankInput銀行卡賬號(hào)格式化
jquery bankInput插件是銀行卡進(jìn)行格式化顯示，能控制文本框輸入最小最大個(gè)數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時(shí)插件能實(shí)現(xiàn)自動(dòng)加載格式化顯示和支持非輸入框的格式話顯示2012-08-08
今日開始學(xué)習(xí)使用JQuery,嘗試?yán)肑Query來制作一個(gè)動(dòng)態(tài)表格,結(jié)構(gòu)如下2011-05-05
jQuery 入門級(jí)學(xué)習(xí)筆記及源碼
本周公司技術(shù)講座輪到我了，準(zhǔn)備說說現(xiàn)在流行的jQuery，下面是概要提綱，關(guān)鍵是看custom.js，已上傳源碼，程序中“//##”是分段用的，大家可以根據(jù)每一段取消注釋，然后找到相應(yīng)的id或class名查看效果。2010-01-01
jquery+ajax請(qǐng)求且?guī)Х祷刂档拇a
這兩天的工作內(nèi)容不多，基本是關(guān)于jquery中ajax的。之前一直都是寫的最簡(jiǎn)單的ajax請(qǐng)求，并沒關(guān)注怎么獲取ajax返回值的問題。2015-08-08