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