前端jquery部分很精彩
一、簡(jiǎn)介
jQuery是一個(gè)兼容多瀏覽器的javascript庫(kù)，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國(guó)人John Resig在紐約的barcamp發(fā)布，吸引了來(lái)自世界各地的眾多JavaScript高手加入，由Dave Methvin率領(lǐng)團(tuán)隊(duì)進(jìn)行開發(fā)。如今，jQuery已經(jīng)成為最流行的javascript庫(kù)，在世界前10000個(gè)訪問(wèn)最多的網(wǎng)站中，有超過(guò)55%在使用jQuery。
二、選擇器
1.id選擇器
<body>
<div id="demo">我是一個(gè)div</div>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').css('color','red');
</script>
</body>
2.元素標(biāo)簽名選擇器element
<body>
<div>我是一個(gè)div</div>
<div>我是一個(gè)div</div>
<div>我是一個(gè)div</div>
<h3>標(biāo)題1</h3>
<h3>標(biāo)題2</h3>
<h3>標(biāo)題3</h3>
<h3>標(biāo)題4</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('div').css('color','red');
$('h3').css('color','red').css('font-size','30px');
</script>
</body>
3.類選擇器
<body>
<h3 class="demo">我是一個(gè)擁有class的h3</h3>
<h3 class="demo">我是一個(gè)擁有class的h3</h3>
<h3 class="demo" >我是一個(gè)擁有class的h3</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('.demo').css('color','red');
</script>
4.*選擇器（匹配所有元素）
<body>
<div id="demo">我是一個(gè)div</div>
<div>我是一個(gè)div</div>
<div>我是一個(gè)div</div>
<div>我是一個(gè)div</div>
<h3>標(biāo)題1</h3>
<h3>標(biāo)題2</h3>
<h3>標(biāo)題3</h3>
<h3>標(biāo)題4</h3>
<h3 class="demo">我是一個(gè)擁有class的h3</h3>
<h3 class="demo">我是一個(gè)擁有class的h3</h3>
<h3 class="demo" >我是一個(gè)擁有class的h3</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('*').css('color','red'); //選擇所有元素
<script>
</body>
5.群組選擇器
<body>
<div id="demo">我是一個(gè)div</div>
<h3>標(biāo)題1</h3>
<h3 class="demobox">我是一個(gè)擁有class的h3</h3>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo,.demobox,h3').css('color','red');
</script>
</body>
6.后代選擇器
<body>
<ul>
<li>
<a>ul的li的a標(biāo)簽</a>
<a>ul的li的a標(biāo)簽</a>
<a>ul的li的a標(biāo)簽</a>
</li>
</ul>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('ul li a').css('color','red');
</script>
</body>
6.指定選擇器
<body>
<div class="demo">class的div</div>
<p class="demo">class的p</p>
<div>普通div</div>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('div.demo').css('color','red');
</script>
</body>
7.子選擇器
<body>
<div id="demo">
<p>子p1</p>
<p>子p2</p>
<p>子p3</p>
<div>
<p>孫子p1</p>
<p>孫子p2</p>
<p>孫子p3</p>
</div>
</div>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo>p').css('color','red');
</script>
</body>
8.next(選擇器)
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
//$('#demo').next('p').css('color','red'); //第一種方法
$('#demo+p').css('color','red'); //第二種方法
</script>
</body>
9.nextall(選擇器)
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
//$('#demo').nextAll().css('color','red'); //第一種方法
$('#demo~p').css('color','red'); //第二種方法
</script>
</body>
10.prev方法
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').prev().css('color','red');
</script>
</body>
11.prevall方法
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').prevAll().css('color','red');
</script>
</body>
12.slbings()方法
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-2.2.3.min.js"></script>
<script>
$('#demo').siblings().css('color','red');
</script>
</body>
三、篩選器（過(guò)濾選擇器）
濾器主要通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選所需的 DOM 元素，和 CSS 中的偽類的語(yǔ)法類
：使用冒號(hào)(:)開頭。
1.基本篩選
$('li:first').css('background', '#ccc'); //第一個(gè)元素
$('li:last).css('background', '#ccc'); //最后一個(gè)元素
$('li:not(.red)).css('background', '#ccc'); //非 class 為 red 的元素
$('li:even').css('background', '#ccc'); //索引為偶數(shù)的元素
$('li:odd).css('background', '#ccc'); //索引為奇數(shù)的元素
$('li:eq(2)).css('background', '#ccc'); //指定索引值的元素
$('li:gt(2)').css('background', '#ccc'); //大于索引值的元素
$('li:lt(2)').css('background', '#ccc'); //小于索引值的元素
$(':header').css('background', '#ccc'); //頁(yè)面所有 h1 ~ h6 元素
focus 過(guò)濾器，必須是網(wǎng)頁(yè)初始狀態(tài)的已經(jīng)被激活焦點(diǎn)的元素才能實(shí)現(xiàn)元素獲取。
而不是鼠標(biāo)點(diǎn)擊或者 Tab 鍵盤敲擊激活的。
$('input').get(0).focus(); //先初始化激活一個(gè)元素焦點(diǎn)
$(':focus').css('background', 'red'); //被焦點(diǎn)的元素
：:first、:last 和 first()、last()這兩組過(guò)濾器和方法在出現(xiàn)相同元素的時(shí)候，first 會(huì)實(shí)現(xiàn)第一個(gè)父元素的第一個(gè)子元素，last 會(huì)實(shí)現(xiàn)最后一個(gè)父元素的最后一個(gè)子元素。所以，如果需要明確是哪個(gè)父元素，需要指明：
$('#box li:last').css('background', '#ccc'); //#box 元素的最后一個(gè) li
//或$('#box li).last().css('background', '#ccc'); //同上
//選擇元素文本節(jié)點(diǎn)含有 ycku.com 文本的元素
$('div:contains("ycku.com")').css('background', '#ccc');
$('div:empty').css('background', '#ccc'); //選擇空元素
$('ul:has(.red)').css('background', '#ccc'); //選擇子元素含有 class 是 red 的元素
$(':parent').css('background', '#ccc'); //選擇非空元素
jQuery 提供了一個(gè)名稱和:parent 相似的方法， 但這個(gè)方法并不是選取含有子元素或文本
的元素，而是獲取當(dāng)前元素的父元素，返回的是元素集合。
$('li').parent().css('background', '#ccc'); //選擇當(dāng)前元素的父元素
$('li').parents().css('background', '#ccc'); //選擇當(dāng)前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //選擇當(dāng)前元素遇到 div 父元素停止
3.可見(jiàn)性過(guò)濾器
-
$('p:hidden).size(); //元素 p 隱藏的元素
$('p:visible').size(); //元素 p 顯示的元素
注意：:hidden 過(guò)濾器一般是包含的內(nèi)容為：CSS 樣式為 display:none、input 表單類型為
type="hidden"和 visibility:hidden 的元素。
4.子元素過(guò)濾器
子元素過(guò)濾器的過(guò)濾規(guī)則是通過(guò)父元素和子元素的關(guān)系來(lái)獲取相應(yīng)的元素。
$('li:first-child').css('background', '#ccc'); //每個(gè)父元素第一個(gè) li 元素
$('li:last-child').css('background', '#ccc'); //每個(gè)父元素最后一個(gè) li 元素
$('li:only-child').css('background', '#ccc'); //每個(gè)父元素只有一個(gè) li 元素
$('li:nth-child(odd)').css('background', '#ccc'); //每個(gè)父元素奇數(shù) li 元素
$('li:nth-child(even)').css('background', '#ccc'); //每個(gè)父元素偶數(shù) li 元素
$('li:nth-child(2)').css('background', '#ccc'); //每個(gè)父元素第三個(gè) li 元素
5.其他方法
四、基礎(chǔ)DOM和css操作
1.元素內(nèi)容操作
在常規(guī)的 DOM 元素中，我們可以使用 html()和 text()方法獲取內(nèi)部的數(shù)據(jù)。html()方法
可以獲取或設(shè)置 html 內(nèi)容，text()可以獲取或設(shè)置文本內(nèi)容。
$('#box').html(); //獲取 html 內(nèi)容
$('#box').text(); //獲取文本內(nèi)容，會(huì)自動(dòng)清理 html 標(biāo)簽
$('#box').html('<em>www.li.cc</em>'); //設(shè)置 html 內(nèi)容
$('#box').text('<em>www.li.cc</em>'); //設(shè)置文本內(nèi)容，會(huì)自動(dòng)轉(zhuǎn)義 html 標(biāo)簽
注意：當(dāng)我們使用 html()或 text()設(shè)置元素里的內(nèi)容時(shí)，會(huì)清空原來(lái)的數(shù)據(jù)。而我們期
望能夠追加數(shù)據(jù)的話，需要先獲取原本的數(shù)據(jù)。
$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加數(shù)據(jù)
如果元素是表單的話，jQuery 提供了 val()方法進(jìn)行獲取或設(shè)置內(nèi)部的文本數(shù)據(jù)。
$('input').val(); //獲取表單內(nèi)容
$('input').val('www.li.cc'); //設(shè)置表單內(nèi)容
如果想設(shè)置多個(gè)選項(xiàng)的選定狀態(tài)，比如下拉列表、單選復(fù)選框等等，可以通過(guò)數(shù)組傳遞
操作。
$("input").val(["check1","check2", "radio1" ]); //value 值是這些的將被選定
2.元素屬性操作
除了對(duì)元素內(nèi)容進(jìn)行設(shè)置和獲取，通過(guò) jQuery 也可以對(duì)元素本身的屬性進(jìn)行操作，包
括獲取屬性的屬性值、設(shè)置屬性的屬性值，并且可以刪除掉屬性。
$('div').attr('title'); //獲取屬性的屬性值
$('div').attr('title', '我是域名'); //設(shè)置屬性及屬性值
$('div').attr('title', function () { //通過(guò)匿名函數(shù)返回屬性值
return '我是域名';
});
$('div').attr('title', function (index, value) { //可以接受兩個(gè)參數(shù)
return value + (index+1) + '，我是域名';
});
3.元素樣式操作
元素樣式操作包括了直接設(shè)置 CSS 樣式、增加 CSS 類別、類別切換、刪除類別這幾種操作方法。而在整個(gè) jQuery 使用頻率上來(lái)看，CSS 樣式的操作也是極高的，所以需要重點(diǎn)掌握。
$('div').css('color'); //獲取元素行內(nèi) CSS 樣式的顏色
$('div').css('color', 'red'); //設(shè)置元素行內(nèi) CSS 樣式顏色為紅色
在需要設(shè)置多個(gè)樣式的時(shí)候，我們可以傳遞多個(gè) CSS 樣式的鍵值對(duì)即可。
$('div').css({
'background-color' : '#ccc',
'color' : 'red',
'font-size' : '20px'
});
除了行內(nèi) CSS 設(shè)置，我們也可以直接給元素添加 CSS 類，可以添加單個(gè)或多個(gè)，并且
也可以刪除它。
$('div').addClass('red'); //添加一個(gè) CSS 類
$('div').addClass('red bg'); //添加多個(gè) CSS 類
$('div').removeClass('bg'); //刪除一個(gè) CSS 類
$('div').removeClass('red bg'); //刪除多個(gè) CSS 類
我們還可以結(jié)合事件來(lái)實(shí)現(xiàn) CSS 類的樣式切換功能。
$('div').click(function () { //當(dāng)點(diǎn)擊后觸發(fā)
$(this).toggleClass('red size'); //單個(gè)樣式多個(gè)樣式均可
});
.toggleClass()方法的第二個(gè)參數(shù)可以傳入一個(gè)布爾值， true 表示執(zhí)行切換到class 類，false表示執(zhí)行回默認(rèn) class 類(默認(rèn)的是空 class)，運(yùn)用這個(gè)特性，我們可以設(shè)置切換的頻率。
var count = 0;
$('div').click(function () { //每點(diǎn)擊兩次切換一次 red
$(this).toggleClass('red', count++ % 3 == 0);
});
4.css方法
jQuery 不但提供了 CSS 的核心操作方法，比如.css()、.addClass()等。還封裝了一些特殊功能的 CSS 操作方法，我們分別來(lái)了解一下。
$('div').width(); //獲取元素的長(zhǎng)度，返回的類型為 number
$('div').width(500); //設(shè)置元素長(zhǎng)度，直接傳數(shù)值，默認(rèn)加 px
$('div').width('500pt'); //同上，設(shè)置了 pt 單位
$('div').width(function (index, value) { //index 是索引，value 是原本值
return value - 500; //無(wú)須調(diào)整類型，直接計(jì)算
});
$('div').height(); //獲取元素的高度，返回的類型為 number
$('div').height(500); //設(shè)置元素高度，直接傳數(shù)值，默認(rèn)加 px
$('div').height('500pt'); //同上，設(shè)置了 pt 單位
$('div').height(function (index, value) { //index 是索引，value 是原本值
return value - 1; //無(wú)須調(diào)整類型，直接計(jì)算
});
alert($('div').width()); //不包含
alert($('div').innerWidth()); //包含內(nèi)邊距 padding
alert($('div').outerWidth()); //包含內(nèi)邊距 padding+邊框 border
alert($('div').outerWidth(true)); //包含內(nèi)邊距 padding+邊框 border+外邊距 margin
$('strong').offset().left; //相對(duì)于視口的偏移
$('strong').position().left; //相對(duì)于父元素的偏移
$(window).scrollTop(); //獲取當(dāng)前滾動(dòng)條的位置
$(window).scrollTop(300); //設(shè)置當(dāng)前滾動(dòng)條的位置
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
- jQuery 驗(yàn)證插件 Web前端設(shè)計(jì)模式(asp.net)
- 基于jQuery的前端數(shù)據(jù)通用驗(yàn)證庫(kù)
- jquery圖片延遲加載 前端開發(fā)技能必備系列
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
- web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁(yè)打印
- web的各種前端打印方法之jquery打印插件jqprint實(shí)現(xiàn)網(wǎng)頁(yè)打印
- jQuery前端框架easyui使用Dialog時(shí)bug處理
- web前端設(shè)計(jì)師們常用的jQuery特效插件匯總
- jQuery前端分頁(yè)示例分享
相關(guān)文章
jQuery實(shí)現(xiàn)圣誕節(jié)禮物動(dòng)畫案例解析
這篇文章主要介紹了jQuery實(shí)現(xiàn)圣誕節(jié)禮物動(dòng)畫案例解析的相關(guān)資料,需要的朋友可以參考下2016-12-12
用jquery ajax獲取網(wǎng)站Alexa排名的代碼
其實(shí)就是利用了jquery的ajax功能，獲取遠(yuǎn)程的xml文件，讀取指定內(nèi)容的代碼，對(duì)于學(xué)習(xí)jquery的朋友是個(gè)不錯(cuò)的參考。2009-12-12
jQuery動(dòng)畫效果相關(guān)方法實(shí)例分析
這篇文章主要介紹了jQuery動(dòng)畫效果相關(guān)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)動(dòng)畫效果所用到的常見(jiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2015-12-12
JQuery實(shí)現(xiàn)ajax請(qǐng)求的示例和注意事項(xiàng)
今天小編就為大家分享一篇關(guān)于JQuery實(shí)現(xiàn)ajax請(qǐng)求的示例和注意事項(xiàng)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2018-12-12
jquery獲取自定義屬性(attr和prop)實(shí)例介紹
jquery中用attr()方法來(lái)獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會(huì)經(jīng)常用到attr()，attr()有4個(gè)表達(dá)式2013-04-04
這篇文章主要介紹了jQuery判斷元素是否存在的可靠方法,需要的朋友可以參考下2014-05-05
jQuery模擬新浪微博首頁(yè)滾動(dòng)效果的方法
這篇文章主要介紹了jQuery模擬新浪微博首頁(yè)滾動(dòng)效果的方法,實(shí)例分析了jQuery使用animate、css等方法實(shí)現(xiàn)滾動(dòng)特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jquery+Ajax實(shí)現(xiàn)簡(jiǎn)單分頁(yè)條效果
這篇文章主要為大家詳細(xì)介紹了jquery+Ajax實(shí)現(xiàn)簡(jiǎn)單分頁(yè)條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了jQuery Ajax中的事件詳細(xì)介紹,本文詳細(xì)的講解了AJAX的局部事件和全局事件、事件的順序等內(nèi)容,需要的朋友可以參考下2015-04-04
jquery解析XML字符串和XML文件的方法說(shuō)明
本篇文章主要是對(duì)jquery解析XML字符串和XML文件的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02