本文實例講述了jQuery層次選擇器用法。分享給大家供大家參考，具體如下：
成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供金牛網(wǎng)站建設(shè)、金牛做網(wǎng)站、金牛網(wǎng)站設(shè)計、金牛網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、金牛企業(yè)網(wǎng)站模板建站服務(wù)，10年金牛做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title2-5/title
!--
引入jQuery
--
script
src="js/jquery-1.10.1.min.js"
type="text/javascript"/script
script
src="js/assist.js"
type="text/javascript"/script
link
rel="stylesheet"
type="text/css"
href="css/style.css"
/
script
type="text/javascript"
$(document).ready(function(){
//選擇
body內(nèi)的所有div元素.
$('#btn1').click(function(){
$('body
div').css("background","#bbffaa");
})
//在body內(nèi)的選擇
元素名是div
的子元素.
$('#btn2').click(function(){
$('body
div').css("background","#bbffaa");
})
//選擇
所有class為one
的下一個div元素.
$('#btn3').click(function(){
$('.one
+
div').css("background","#bbffaa");
})
//選擇
id為two的元素后面的所有div兄弟元素.
$('#btn4').click(function(){
$('#two
~
div').css("background","#bbffaa");
})
});
/script
/head
body
h3層次選擇器./h3
button
id="reset"手動重置頁面元素/button
input
type="checkbox"
id="isreset"
checked="checked"/
label
for="isreset"點(diǎn)擊下列按鈕時先自動重置頁面/label
br
/
br
/
input
type="button"
value="選擇
body內(nèi)的所有div元素."
id="btn1"/
input
type="button"
value="在body內(nèi),選擇子元素是div的。"
id="btn2"/
input
type="button"
value="選擇
所有class為one
的下一個div元素."
id="btn3"/
input
type="button"
value="選擇
id為two的元素后面的所有div兄弟元素."
id="btn4"/
br
/
br
/
!--
測試的元素
--
div
class="one"
id="one"
id為one,class為one的div
div
class="mini"class為mini/div
/div
div
class="one"
id="two"
title="test"
id為two,class為one,title為test的div.
div
class="mini"
title="other"class為mini,title為other/div
div
class="mini"
title="test"class為mini,title為test/div
/div
div
class="one"
div
class="mini"class為mini/div
div
class="mini"class為mini/div
div
class="mini"class為mini/div
div
class="mini"/div
/div
div
class="one"
div
class="mini"class為mini/div
div
class="mini"class為mini/div
div
class="mini"class為mini/div
div
class="mini"
title="tesst"class為mini,title為tesst/div
/div
div
style="display:none;"
class="none"style的display為"none"的div/div
div
class="hide"class為"hide"的div/div
div
包含input的type為"hidden"的div
input
type="hidden"
size="8"/
/div
span
id="mover"正在執(zhí)行動畫的span元素./span
/body
/html
效果圖：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery選擇器用法總結(jié)》、《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jQuery常見經(jīng)典特效匯總》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
$this只是個自定義的變量；
$(this)是將當(dāng)前don對象轉(zhuǎn)換成jquery對象 ；
一般定義jquery變量習(xí)慣$開頭，提高可讀性而已。
$(this)是把DOM對象封裝成jquery對象，其相當(dāng)于一個集合。
用法如下：
a href="" target="_blank" data-id="1010000000125418"jQuery/a
$('a').click(function(){
this.innerHTM==$(this).html()=='jQuery';//三者是一樣的.
this.getAttribute('href')==this.href==$(this).attr('href')//三者是一樣的;
this.getAttribute('target')==this.target==$(this).attr('target')//三者是一樣的;
this.getAttribute('data-id')==$(this).attr('data-id')//二者是一樣的;
});
本文實例講述了jQuery刪除節(jié)點(diǎn)的方法。分享給大家供大家參考，具體如下：
html
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title/title
script
src="js/jquery-1.10.1.min.js"
type="text/javascript"/script
script
type="text/javascript"
//![CDATA[
$(function(){
//第一種刪除的方法
$("ul
li:eq(1)").remove();
//
獲取第二個li元素節(jié)點(diǎn)后，將它從網(wǎng)頁中刪除。
//第二種刪除的方法
var
$li
=
$("ul
li:eq(1)").remove();
//
獲取第二個li元素節(jié)點(diǎn)后，將它從網(wǎng)頁中刪除。
$li.appendTo("ul");
//
把剛才刪除的又重新添加到ul元素里
//所以，刪除只是從網(wǎng)頁中刪除，在jQuery對象中，這個元素還是存在的，我們可以重新獲取它
//第三種刪除的方法
$("ul
li").remove("li[title!=菠蘿]");
//把li元素中屬性title不等于"菠蘿"的li元素刪除
//第四種刪除的方法
$("ul
li:eq(1)").empty();
//
獲取第二個li元素節(jié)點(diǎn)后，清空此元素里的內(nèi)容
});
//]]
/script
/head
body
p
title="選擇你最喜歡的水果."
你最喜歡的水果是?/p
ul
li
title='蘋果'蘋果/li
li
title='橘子'橘子/li
li
title='菠蘿'菠蘿/li
/ul
/body
/html
效果圖如下：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
jQuery 遍歷 - is() 方法
定義和用法
is() 根據(jù)選擇器、元素或 jQuery 對象來檢測匹配元素集合，如果這些元素中至少有一個元素匹配給定的參數(shù)，則返回 true。
語法
.is(selector)
詳細(xì)說明
與其他篩選方法不同，.is() 不創(chuàng)建新的 jQuery 對象。相反，它允許我們在不修改 jQuery 對象內(nèi)容的情況下對其進(jìn)行檢測。這在 callback 內(nèi)部通常比較有用，比如事件處理程序。
假設(shè)我們有一個列表，其中兩個項目包含子元素：
ul
lilist?strongitem?1/strong/li
lispanlist?item?2/span/li
lilist?item?3/li
/ul
您可以向 ul 元素添加 click 處理程序，然后把代碼限制為只有當(dāng)列表項本身，而非子元素，被點(diǎn)擊時才進(jìn)行觸發(fā)：
$("ul").click(function(event)?{
var?$target?=?$(event.target);
if?(?$target.is("li")?)?{
$target.css("background-color",?"red");
}
});
$是用戶jquery中選取的
#是表示id
比如說
html:
input type="text" id="nav" //定義一個id=nav的文本框
jquery:
$(function(){ //固定步驟
$("#nav").focus(function(){ //$就是調(diào)用jquery，("")就是選取里面的東西，$("#nav")就是直接選取id=nav的元素
$(this).css("border-color","#f00"); //$(this)就是之前選取的元素，然后用css改變邊框的顏色，變?yōu)榧t色
});
});
重慶分公司
重慶分公司
