建站
咨詢
售后
建站咨詢
新聞中心
如何在jQuery查找元素父節(jié)點？
jquery獲取父元素比如;parent()，parents，closest()，這些都可以查找父元素或節(jié)點，具體步驟如下：
創(chuàng)新互聯(lián)公司專注于孫吳網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供孫吳營銷型網(wǎng)站建設(shè)，孫吳網(wǎng)站制作、孫吳網(wǎng)頁設(shè)計、孫吳網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造孫吳網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供孫吳網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
一.parent([expr])
用一個包含著所有匹配元素的唯一父元素的元素集合。
你用可選的表達式來篩選。
如下：
1.$('#item1').parent().parent；
二.parent
得到含有子元素或者文本的元素
如下：
1.$('li:parent');
2.parents([expr])
得到一個包含著所有匹配元素的祖先元素的元素集合。可以通過一個可選的表達式進行篩選。
如下：
1.$('#items').parents('.parent1');
三.closest([expr])
closest會首先檢查當前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上查找父元素，一層一層往上，直到找到匹配選擇器的元素。如果什么都沒找到則返回一個空的jQuery對象。
jquery的篩選有哪些
jQuery提供了強大的選擇器讓我們獲取對象。在這邊，我人為地將jQuery選擇器分為兩大部分：選擇對象和篩選條件。選擇對象表示要獲取什么對象，篩選條件是對獲取的對象進行篩選，最終留下符合某些特征的對象
1.選擇對象
1).基本
·#id 根據(jù)給定的ID匹配一個元素。例如：$("#id")
·element 根據(jù)給定的元素名匹配所有元素。例如：$("div")
·.class 根據(jù)給定的類匹配元素。例如：$(".style1");
·* 匹配所有元素。例如：$("*")
·selector1,selector2,selectorN 將每一個選擇器匹配到的元素合并后一起返回。例如：$("#id,div,.style1")
2).表單
·:button 匹配所有按鈕。例如：$(":button")
·:checkbox 匹配所有復(fù)選框。例如：$(":checkbox")
·:file 匹配所有文件域。例如：$(":File")
·:hidden 匹配所有不可見元素，或者type為hidden的元素。例如：$("input:hidden")
·:image 匹配所有圖像域。例如：$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(":input")
·:password 匹配所有密碼框。例如：$(":password")
·:radio 匹配所有單選按鈕。例如：$(":radio")
·:reset 匹配所有重置按鈕。例如：$(":reset")
·:submit 匹配所有提交按鈕。例如：$(":submit")
·:text 匹配所有的單行文本框。例如：$(":text")
·:header 匹配如 h1, h2, h3之類的標題元素。例如：$(":header").css("background", "#EEE");
2.篩選條件
1).屬性篩選
·[attribute*=value] 匹配給定的屬性是以包含某些值的元素。例如：$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的屬性，但屬性不等于特定值的元素。例如：$(input[name!='man');
·[attribute$=value] 匹配給定的屬性是以某些值結(jié)尾的元素。例如：$("input[name$='man']")
·[attribute=value] 匹配給定的屬性是某個特定值的元素。例如：$("input[name='man']");
·[attribute] 匹配包含給定屬性的元素。例如：$("div[id]")
·[attribute^=value] 匹配給定的屬性是以某些值開始的元素。例如：$("input[name^='man']")
·[selector1][selector2][selectorN] 同時滿足多個條件。例如：$("input[id][name$='man']")
·:hidden 匹配所有的不可見元素。例如：$("tr:hidden")
·:visible 匹配所有的可見元素。例如：$("tr:visible")
·:checked 匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中的option)。例如：$("input:checked")
·:disabled 匹配所有不可用元素。例如：$("input:disabled")
·:enabled 匹配所有可用元素。例如：$("input:enabled")
·:selected 匹配所有選中的option元素。例如：$("select option:selected")
2).內(nèi)容篩選
·:contains(text) 匹配包含給定文本的元素。例如：$("div:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty")
·:has(selector) 匹配含有選擇器所匹配的元素的元素。例如：$("div:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent")
3).層級篩選
·ancestor descendant 在給定的祖先元素下匹配所有的后代元素。例如：$("form input")
·parent child 在給定的父元素下匹配所有的子元素。例如：$("form input")
·prev + next 匹配所有緊接在 prev 元素后的 next 元素。例如：$("label + input")
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如：$("form ~ input")
·:first-child 匹配第一個子元素。例如：$("ul li:first-child")
·:last-child 匹配最后一個子元素。例如：$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N個子或奇偶元素。例如：$("ul li:nth-child(2)")
·:only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配。例如：$("ul li:only-child")
4).方法篩選
·:animated 匹配所有正在執(zhí)行動畫效果的元素。例如：$("div:animated");
·:eq(index) 匹配一個給定索引值的元素。例如：$("tr:eq(1)")
·:even 匹配所有索引值為偶數(shù)的元素，從 0 開始計數(shù)。例如：$("tr:even")
·:first 匹配找到的第一個元素。例如：$("tr:first")
·:gt(index) 匹配所有大于給定索引值的元素，從 0 開始計數(shù)。例如：$("tr:gt(0)")
·:last 匹配找到的最后一個元素。例如：$("tr:last")
·:lt(index) 匹配所有小于給定索引值的元素。例如：$("tr:lt(2)")
·:not(selector) 去除所有與給定選擇器匹配的元素。例如：$("input:not(:checked)")
·:odd 匹配所有索引值為奇數(shù)的元素，從 0 開始計數(shù)。例如：$("tr:odd")
jquery如何實現(xiàn)一個表格的篩選,也就是按條件查找篩選
使用jquery的each()方法遍歷單元格，如果滿足條件則進行相應(yīng)的操作
$(selector).each(function(index,element))
實例演示：在表格中按姓名查找記錄，找到則突出顯示，否則給出提示
創(chuàng)建Html元素
div?class="box"
span實例演示：在表格中按姓名查找記錄/spanbr
div?class="content"
姓名:nbsp;input?type="text"?name="name"nbsp;input?type="button"?value="查找"
table
trtd張三/tdtd175/tdtd140/td/tr
trtd李四/tdtd170/tdtd120/td/tr
trtd王五/tdtd185/tdtd160/td/tr
/table
/div
/div
設(shè)置css樣式
div.box{width:300px;padding:20px;margin:20px;border:4px?dashed?#ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;margin:10px?0;padding:20px;border:2px?solid?#ff6666;}
input[type='text']{width:100px;padding:5px?10px;margin:5px?0;border:1px?solid?#ff9966;}
input[type='button']{height:30px;margin:10px;padding:5px?10px;}
table{border-collapse:collapse;}
td{width:80px;height:30px;line-height:30px;text-align:center;border:1px?solid?green;}
.selected{font-weight:bold?!important;?background:?#ff99cc?!important;color:#fff;}
編寫jquery代碼
$(function(){?
$(":button").click(function()?{
$("table?tr").removeClass('selected');???//?還原樣式
name?=?$("input[name='name']").val();????//?要查找的名字
flag?=?true;?????????????????????????????//?表示未查到目標
$("table?tr").find("td:first").each(function()?{
if($(this).html()==name){????????????//?如果找到了
$(this).parent("tr").addClass('selected');????//?為整行設(shè)置樣式
flag?=?false;????????????????????//?將未找到標記設(shè)為false
return?false;????????????????????//?提前終止循環(huán)
}
});
if(flag)?????????????????????????????????//?如果沒找到就給出提示
alert("查無此人");??
});
});
觀察效果
如果表中有相應(yīng)記錄
如果表中并無相應(yīng)記錄
jquery多種條件篩選
script?src="jquery-1.10.2.js"/script
script
$(function(){
$("#tj1?span,#tj2?span,#gd1?span,#gd2?span,#gd3?span").click(function(){
$(this).clone(true).appendTo("#yxtj")
});
})
/script
style
span{
margin-left:10px;
}
#gd1?span,#gd2?span,#gd3?span{
display:none;
}
/style
body
div?style="background:#aaa;?color:#fff;width:60%"已選條件：
div?id="yxtj"/div
/div
div?id="tj1"
條件1：span?class="tj1"條件11/spanspan?class="tj1"條件12/spanspan?class="tj1"條件13/span
/div
div?id="tj2"
條件2：span?class="tj2"條件21/spanspan?class="tj2"條件22/spanspan?class="tj2"條件13/span
/div
div?id="gd"
更多：span?class="gd"?id="gdtj1"更多1/spanspan?class="gd"?id="gdtj2"更多2/spanspan?class="gd"?id="gdtj3"更多3/span
/div
div
div?id="gd1"
span?id="gd11"更多11/spanspan?id="gd12"更多12/spanspan?id="gd13"更多13/span
/div
div?id="gd2"
span?id="gd21"更多21/spanspan?id="gd22"更多22/spanspan?id="gd23"更多23/span
/div
div?id="gd3"
span?id="gd31"更多11/spanspan?id="gd32"更多32/spanspan?id="gd33"更多33/span
/div
/div
/body
時間倉促，僅供參考，還有許多需要完善的地方
Jquery實戰(zhàn)
Jquery實戰(zhàn)
基本的CSS選擇器
熟悉web開發(fā)的人員一定對css的選擇功能相當?shù)牧私猓ㄟ^css選擇功能，我們可以在css樣式文件里輕松的將樣式應(yīng)用到選擇的頁面元素上。jQuery也正是采用了這樣的機制，使jQuery的元素選擇能力易常強大。
a——選擇所有元素
#specialID——選擇匹配id為specialID的元素
.specialClass——選擇匹配擁有css類sepcialClass的元素
a#specialID.specialClass——選擇匹配id為specialID、有用css類specialClass的元素
p a.specialClass——匹配擁有css類specialClass、在
元素內(nèi)的元素
除了支持傳統(tǒng)的css選擇器，Jquery還支持CSS3選擇功能。
子節(jié)點選擇器
$("p a") 選擇元素
的直接子節(jié)點的元素，非直接子節(jié)點的元素將不會被選擇到
特性選擇器
特性選擇器在匹配的選擇元素上過濾滿足某特性(屬性)的元素
如我們需要做如下的'選擇：匹配所有指向本網(wǎng)站之外地址的鏈接，我們可以這樣選擇
$("a[href^=http://") 該選擇器選擇具有href屬性，且href屬性值以http://開始的鏈接元素
特性選擇的語法是：
選擇具有某特性(屬性)的元素
form[method]
選擇具有某特性，且屬性值為指定值的元素
input[type=text]
選擇匹配特性以特定字符開頭的元素
div[title^=my] ——選擇匹配title特性值已my開頭的所有div元素
選擇匹配特性以特定字符結(jié)束的元素
a[href$=.pdf] ——選擇引用了pdf文件的所有鏈接元素
其他
a[href*=jquery.com]選擇引用jQuery網(wǎng)站的所有鏈接元素
過濾符
通過過濾符選擇器可以在已選擇的元素中過濾出需要的元素，上面的特性選擇器也屬于過濾符，另外還有“:”字符
如：
li:has(a)—— 選擇匹配包含元素的所有
元素
1. 基礎(chǔ)過濾符：
:first：匹配多個對象中的第一個對象
:last：匹配多個對象中的最后一個對象
:not(selector)：匹配去除了not后面選擇符中內(nèi)容的項，not中的selector只能是過濾選擇器，不能是查找選擇器
:even：匹配所有對象中的第偶數(shù)個
:odd：匹配所有對象中的第奇數(shù)個
:eq(index)：匹配某一下表的單獨某元素
:gt(index)：匹配大于某一下標的所有元素
:lt(index)：匹配小于某一下標的所有元素
:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6
:animated：匹配所有有動畫效果的元素
2. 內(nèi)容過濾符：
:contains(text)：匹配內(nèi)部擁有該文本元素的對象，包含間接有用的情況
:empty：匹配所有沒有子元素的對象
:has(selector)：匹配所有至少含有一個子選擇符的對象
:parent：匹配元素，這些元素包含子元素（包括文本元素）
3. 可見性過濾符：
:hidden：匹配所有隱藏對象，或者input中的hidden類型
:visible：匹配所有可見的對象
4. 子過濾符：
:nth-child(index/even/odd/equation)：匹配子元素中的某一下標/偶數(shù)/奇數(shù)/等式的對象，:eq(index)只能匹配某單一對象的子元素特征，而這個方法可以匹配多個對象的某一子元素共同特征 nth-child過濾器，從1開始計數(shù)，這主要是與css標準兼容。
:first-child：匹配第一個子元素
:last-child：匹配最后一個子元素
這兩個匹配符也可以對多個父對象的所有子元素進行匹配操作
:only-child：如果一個父元素只有一個子元素，就匹配這個子元素
5. 表單過濾符
:input ：匹配表單內(nèi)input元素
:text ：匹配表單內(nèi)input type為text的元素
:password ：匹配表單內(nèi)input type為password的元素
:radio ：匹配表單內(nèi)input type為radio的元素
:checkbox ：匹配表單內(nèi)input type為checkbox的元素
:submit ：匹配表單內(nèi)input type為submit的元素
:image ：匹配表單內(nèi)image的元素
:reset ：匹配表單內(nèi)input type為reset的元素
:button ：匹配表單內(nèi)input type為button的元素
:file ：匹配表單內(nèi)input type為file的元素.
:hidden ：匹配表單內(nèi)input type為hidden的元素或者hidden區(qū)域
:enabled ：匹配所有啟用元素
:disabled ：匹配所有非啟用元素
:checked ：匹配所有選中元素
:selected ：匹配所有下拉列表選中元素
查找選擇器和篩選選擇器的概念區(qū)別
為了能靈活的使用jQuery,認清查找選擇器、篩選選擇器之間的區(qū)別是非常重要的。篩選選擇器，通過對元素應(yīng)用更高的選擇標準（如過濾特性或或其他相關(guān)值），縮小正在匹配的元素的集合；查找選擇器，比如后代選擇器（空格）、子節(jié)點選擇器（）以及兄弟節(jié)點選擇器（+）等，則查找與已選擇元素具有某種關(guān)系的其他元素，而不是通過把標準應(yīng)用于已匹配元素來限制匹配范圍。 ;
如何實現(xiàn)jQuery多條件篩選
$(document).ready(function() { $("#select1 dd").click(function() { $(this).addClass("selected").siblings().removeClass("selected"); if ($(this).hasClass("select-all")) { $("#selectA").remove(); } else { var copyThisA = $(this).clone(); if ($("#selectA").length 0) { $("#selectA a").html($(this).text()); } else { $(".select-result dl").append(copyThisA.attr("id", "selectA")); } } }); $("#select2 dd").click(function() { $(this).addClass("selected").siblings().removeClass("selected"); if ($(this).hasClass("select-all")) { $("#selectB").remove(); } else { var copyThisB = $(this).clone(); if ($("#selectB").length 0) { $("#selectB a").html($(this).text()); } else { $(".select-result dl").append(copyThisB.attr("id", "selectB")); } } }); $("#selectA").live("click", function() { $(this).remove(); $("#select1 .select-all").addClass("selected").siblings().removeClass("selected"); }); $("#selectB").live("click", function() { $(this).remove(); $("#select2 .select-all").addClass("selected").siblings().removeClass("selected"); }); $(".select dd").live("click", function() { if ($(".select-result dd").length 1) { $(".select-no").hide(); } else { $(".select-no").show(); } });});
網(wǎng)頁題目：jquery篩選,jquery篩選子元素
文章來源：http://www.ef60e0e.cn/article/dscocjj.html
