簡介：
jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使 用jQuery。
參考文檔：http://jquery.cuishifeng.cn/
一、導入+簡單應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
<style>
.r {
background-color:red; /* 給標簽設置背景顏色為紅色*/
}
</style>
</head>
<body>
<div id="id_1">
123
</div>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<!--導入Jquery文件-->
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script>
$(function () {alert('Hello shuaige');}); //當頁面執行完后加載
//這里$是什么呢? 他可以理解為jQurey創建的對象,類似於python中的類創建的對象,對象去調用方法一樣.!!!僅僅是類似
$('#id_1').text('456');
//分解 $('#id_1') 找到id為id_1的標簽,並把里面的內容修改為456
//這里雖然永不倒dom但是,會dom對jQurey有很大的幫助
$('.c1').addClass('r');
//分解 $('.c1') 找到class為c1的標簽
</script>
</body>
</html>
二、選擇器
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>
7.指定選擇器
<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>
8.子選擇器
<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>
9.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>
10.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>
11.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>
12.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>
13.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>
三、篩選器（過濾選擇器）
濾器主要通過特定的過濾規則來篩選所需的 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'); //索引為偶數的元素
$('li:odd).css('background', '#ccc'); //索引為奇數的元素
$('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 過濾器，必須是網頁初始狀態的已經被激活焦點的元素才能實現元素獲取。
而不是鼠標點擊或者 Tab 鍵盤敲擊激活的。
$('input').get(0).focus(); //先初始化激活一個元素焦點
$(':focus').css('background', 'red'); //被焦點的元素
：:first、:last 和 first()、last()這兩組過濾器和方法在出現相同元素的時候，first 會
實現第一個父元素的第一個子元素，last 會實現最后一個父元素的最后一個子元素。所以，
如果需要明確是哪個父元素，需要指明：
$('#box li:last').css('background', '#ccc'); //#box 元素的最后一個 li
//或
$('#box li).last().css('background', '#ccc'); //同上
2.內容篩選器
//選擇元素文本節點含有 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 過濾器一般是包含的內容為：CSS 樣式為 display:none、input 表單類型為
type="hidden"和 visibility:hidden 的元素。
4.子元素過濾器
子元素過濾器的過濾規則是通過父元素和子元素的關系來獲取相應的元素。
$('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'); //每個父元素奇數 li 元素
$('li:nth-child(even)').css('background', '#ccc'); //每個父元素偶數 li 元素
$('li:nth-child(2)').css('background', '#ccc'); //每個父元素第三個 li 元素
5.其他方法
四、基礎DOM和css操作
1.元素內容操作
在常規的 DOM 元素中，我們可以使用 html()和 text()方法獲取內部的數據。html()方法
可以獲取或設置 html 內容，text()可以獲取或設置文本內容。
$('#box').html(); //獲取 html 內容
$('#box').text(); //獲取文本內容，會自動清理 html 標簽
$('#box').html('<em>www.li.cc</em>'); //設置 html 內容
$('#box').text('<em>www.li.cc</em>'); //設置文本內容，會自動轉義 html 標簽
注意：當我們使用 html()或 text()設置元素里的內容時，會清空原來的數據。而我們期
望能夠追加數據的話，需要先獲取原本的數據。
$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加數據
如果元素是表單的話，jQuery 提供了 val()方法進行獲取或設置內部的文本數據。
$('input').val(); //獲取表單內容
$('input').val('www.li.cc'); //設置表單內容
如果想設置多個選項的選定狀態，比如下拉列表、單選復選框等等，可以通過數組傳遞
操作。
$("input").val(["check1","check2", "radio1" ]); //value 值是這些的將被選定
2.元素屬性操作
除了對元素內容進行設置和獲取，通過 jQuery 也可以對元素本身的屬性進行操作，包
括獲取屬性的屬性值、設置屬性的屬性值，並且可以刪除掉屬性。
$('div').attr('title'); //獲取屬性的屬性值
$('div').attr('title', '我是域名'); //設置屬性及屬性值
$('div').attr('title', function () { //通過匿名函數返回屬性值
return '我是域名';
});
$('div').attr('title', function (index, value) { //可以接受兩個參數
return value + (index+1) + '，我是域名';
});
3.元素樣式操作
元素樣式操作包括了直接設置 CSS 樣式、增加 CSS 類別、類別切換、刪除類別這幾種
操作方法。而在整個 jQuery 使用頻率上來看，CSS 樣式的操作也是極高的，所以需要重點
掌握。
$('div').css('color'); //獲取元素行內 CSS 樣式的顏色
$('div').css('color', 'red'); //設置元素行內 CSS 樣式顏色為紅色
在需要設置多個樣式的時候，我們可以傳遞多個 CSS 樣式的鍵值對即可。
$('div').css({
'background-color' : '#ccc',
'color' : 'red',
'font-size' : '20px'
});
除了行內 CSS 設置，我們也可以直接給元素添加 CSS 類，可以添加單個或多個，並且
也可以刪除它。
$('div').addClass('red'); //添加一個 CSS 類
$('div').addClass('red bg'); //添加多個 CSS 類
$('div').removeClass('bg'); //刪除一個 CSS 類
$('div').removeClass('red bg'); //刪除多個 CSS 類
我們還可以結合事件來實現 CSS 類的樣式切換功能。
$('div').click(function () { //當點擊后觸發
$(this).toggleClass('red size'); //單個樣式多個樣式均可
});
.toggleClass()方法的第二個參數可以傳入一個布爾值， true 表示執行切換到 class 類， false
表示執行回默認 class 類(默認的是空 class)，運用這個特性，我們可以設置切換的頻率。
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); //設置元素長度，直接傳數值，默認加 px
$('div').width('500pt'); //同上，設置了 pt 單位
$('div').width(function (index, value) { //index 是索引，value 是原本值
return value - 500; //無須調整類型，直接計算
});
$('div').height(); //獲取元素的高度，返回的類型為 number
$('div').height(500); //設置元素高度，直接傳數值，默認加 px
$('div').height('500pt'); //同上，設置了 pt 單位
$('div').height(function (index, value) { //index 是索引，value 是原本值
return value - 1; //無須調整類型，直接計算
});
alert($('div').width()); //不包含
alert($('div').innerWidth()); //包含內邊距 padding
alert($('div').outerWidth()); //包含內邊距 padding+邊框 border
alert($('div').outerWidth(true)); //包含內邊距 padding+邊框 border+外邊距 margin
$('strong').offset().left; //相對於視口的偏移
$('strong').position().left; //相對於父元素的偏移
$(window).scrollTop(); //獲取當前滾動條的位置
$(window).scrollTop(300); //設置當前滾動條的位置