jQuery初識------01
目錄
一. 歷史
1. jQuery概念:一款免費且開放原始碼的JavaScript的程式碼庫;
2. jQuery框架:(2006年,JavaScript專家-美國約翰特里),以其強大的DOM框架、Ajax封裝等
一些功能為所有程式設計師所推崇;
3. jQuery的作用:
*DOM操作:強大、實用；
*事件繫結：一個事件觸發多個動作，以及一個事件同時觸發多個事件的處理函式；
*Ajax；
*特效。
*後面可以學下jQuery UI
*手機開發jQuery Mobie;
二. 部署jQuery
jquery-1.8.3.js：（學習版），沒有去除空格與回車，具有可讀性，方便學習
jquery-1.8.3.min.js：（開發版），去除多餘的空格與回車，不具有可讀性，但是程式碼進行壓縮，整個大小隻有92kb
使用JQuery: 複製核心js檔案到專案目錄中即可
三. jQuery教程: jQuery選擇器（九大選擇器）
九類找物件的方法
<1>基本選擇器
=>通過id、class、標籤找物件,以及可以同時找多個物件並賦值
<a> #id ：通過元素的id屬性，匹配元素
eg: <p id='p1'>這是#選擇器</p>
alert($('#p1').html()); //獲取ID選擇器雙標籤裡面的內容
$('#p1').html('重新賦值'); //給物件重新賦值
<b> Element :通過元素名稱，匹配元素
eg: <div>測試</div>
alert($('div').html());
<c> selector1,selector2 ：同時匹配多個選擇器,元素與元素之間用逗號隔開
eg:所有p標籤和div值全部重新賦值
$('div,p').html('這是多條件選擇器');
注意: 裡面不僅可以輸元素,還可以是ID選擇器,這樣可以精確賦值標籤
*所有div標籤和id為p1,class為p的標籤重新賦值
$('div,#p1,.p').html('這是多條件選擇器');
<d> .class ：通過元素的class屬性，匹配元素
eg:<p class='p'>這是類選擇器</p>
$('.p').html('');//把標籤賦值為空;
<2>層級選擇器
=>當基本選擇器中元素匹配物件不適用時,使用層級選擇器;
<ul>
<li><span>這是1號</span></li>
<li><p>這是2號</p></li>
<li><a href=""><span>這是三號</span></a></li>
</ul>
<p id="p1">這是p標籤</p>
<span>這是span1標籤</span>
<li><span>這是li標籤</span></li>
<span>這是span2標籤</span>
<a> ancetor descendant ：選取ancetor元素下的所有後代元素(所有父子孫元素…)
中間用空格隔開;
eg: $('ul li').html('測試'); //ul下所有子標籤li的值改為測試;中間空格;
$('ul li a span').html('測試') //精確把"這是三號"改為'測試';
$('ul li a span').css('color','red'); //把這是三號變成紅色的
<b> parent > child ：選取parent下的子元素(父子關係)
eg: $('a>span').css('color','red'); //通過a標籤獲取其子標籤span
<c> prev + next ：選取prev元素的相鄰的下一個元素（同級）
eg: $('#p1+span').html('這是鄰居'); //通過p標籤獲取下一個元素標籤span
<d> prev~元素 ：選取prev元素的後面所有同級元素
eg: $('#p1~span').html('這是所有鄰居'); //p標籤後面所有的span標籤重新賦值
<3>簡單選擇器
=>常用語有序、無序、td等在同一表格大量出現的標籤
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td class="td1">3</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
<a>:first ：選擇第一個元素
eg: $('td:first').html('11'); //把第一個td的值改為11
<b>:last ：選取最後一個元素
<c>:even ：偶數 索引的值 索引從0開始
$('tr:odd').css('backgroundColor','red') //偶數行背景色變色為紅色,隔行變色
<d>:odd ：奇數
<e>:eq(索引) ：選取索引為index的元素，預設從0開始
eg: $('td:eq(5)').html(666); //將6改為666;
<f>:gt(index) ：選擇索引大於index的元素，預設從0開始
<g>:lt(index) ：選取索引小於index的元素，預設從0開始
<h>:not(selector) ：選擇選擇器不為selector的元素 括號裡面的元素可以是id\類等各種選擇器
eg: $('td:not(.td1)').html(888); //除了td為3不變,其他的td值改為8
<4>內容選擇器
<a> :contains(text) ：匹配元素內容包含text文字的元素
<b> :empty ：匹配元素內容為空的元素
eg: $('td:empty').html(1231); //把td中內容為空的元素賦值為1231;
<c> :has(selector) ：匹配具有元素的元素
<d> :parent ：匹配內容不為空的元素
<5>可見選擇器
<a> :hidden ：匹配所有隱藏元素（display:none與type=hidden）
<b> :visible ：匹配所有可見元素
<6>屬性選擇器
<font color="red">這是1號</font><br>
<font size="5">這是2號</font><br>
<font color="green" size="5">這是3號</font>
<a> [attribute] ：匹配具有某一屬性的元素
eg:$('[color]').html('把color屬性的值改變');//把所有具有color屬性的元素值改變
<b> [attribute=value] ：匹配屬性值等於value的元素
eg: $('[color=red]').html('把color屬性的值=red的改變'); //把color屬性的值=red的改變
<c> [attribute!=value] ：匹配屬性值不等於value的元素
<d> [attribute^=value] ：匹配屬性值以value開始的元素
<e> [attribute$=value] ：匹配屬性值以value結尾的元素
<f> [attribute*=value] ：匹配屬性值包含value的元素
<g> [selector1][selector2][selectorN] ：匹配具有多個指定屬性的元素
eg: $('[color][size]').html('獨一無二'); //找到同時有color屬性和size屬性的元素賦值獨一無二
<7>子元素選擇器
=>瞭解!
<a> :nth-child(index/even/odd) 從1算起 ：匹配滿足條件（索引，偶數，奇數）子元素
<b> :first-child ：選取第一個子元素
<c> :last-child ：選取最後一個子元素
<d> :only-child ：選取子元素且該子元素是唯一的子元素，則匹配
<8>表單選擇器
<a> :input ：匹配所有表單元素（包含select、textarea） 不太適用
eg: console.log($(':input')); //匹配出所有表單元素物件
面試題：jquery中:input與input的區別？
:input是匹配所有表單元素
input單獨匹配input標籤;
<b> :text ：匹配所有text文字框
val()是jquery物件中獲取單標籤的值
eg: $('input:text').val('100'); 把input中所有text文字內容重新賦值100;
<c> :password ：匹配所有密碼框
eg: $('input:password').css('backgroundColor','green');
<d> :radio ：匹配所有單選
<e> :checkbox ：匹配所有複選框
eg: $('input:checkbox').val('活力'); 把所有複選框的值改為活力
<f> :submit ：匹配所有提交按鈕
<g> :reset ：匹配所有重置按鈕
<h> :image ：匹配所有影象域
<i> :button ：匹配所有button按鈕（type=’button’或button標籤）
<j> :file ：匹配所有檔案域
<k> :hidden ：匹配所有隱藏表單
<9>表單物件屬性選擇器
=>以後做批量刪除比較實用
<a> :enabled ：選取所有可用表單
<b> :disabled ：選取所有不可用表單
<*c*> :checked ：選取所有選中的表單元素（單選框與複選框、下拉框）
eg: alert($(':checked').val()); //彈出的是選擇框第一個值
var check=$('input:checkbox:checked'); //獲取input下所有複選框裡面被選中的元素
for (var i = 0; i < check.length; i++) {
alert(check[i].value); //裡面是DOM物件
};
<*d*> :selected ：選取被選中的下拉選框（下拉）
<七>查詢物件操作
<1> index(): 獲取物件的索引下標，從0開始............................
<2> eq(index) ：通過元素的索引匹配元素，預設索引從0開始...............
eg: alert($('a').eq(2).html()); //聯絡我們
<3> siblings(同級元素): 獲取所有的同級元素..........................
<4> filter(expr) ：通過class進行元素過濾匹配元素
eg: alert($('li').filter('.li').html()); //過濾 <a href="">首頁</a>
<5> not(expr) ：匹配不是指定選擇器元素
<6> parent([expr]) ：查詢當前元素的父元素............................
eg: $('span').parent().css('backgroundColor','red');//從兒子找到父親 ,父親只有一個,然後加樣式
<7> children([expr]) ：匹配所有子元素，裡面可以加標識(子元素)..........
eg: $('.li').children('span').html('找到span標籤,li的第二個兒子'); //從父元素找到子元素,兒子有多個,要精確查詢
<8> find(expr) ：通過後代選擇器查詢元素(後代元素)......................
eg: $('.li').find('span').html('這是li的第三個兒子');//直接通過find方法找後代,更簡單,推薦使用
<9> next([expr]) ：查詢下一個元素（相鄰的）
<10> prev([expr]) ：查詢上一個元素（相鄰的）