jQuery

• jQuery是js的一個函式庫，就是用js寫的一堆函式。

jQuery的優點

• 封裝了各種DOM操作的API，簡化了js的DOM開發。
• jQuery中有各種選擇器，能夠快速定位DOM。
• 解決了瀏覽器相容問題。
• 使用鏈式程式設計，隱式迭代簡化了js的開發。
• 簡化了ajax的開發。
• jQuery有豐富的外掛。

引入jQuery

<script src="jQuery檔案所在的路徑"></script>

window.onload和document.ready的區別

• 1.window.onload：
  整個頁面載入完畢：包含音訊、視訊
  一個頁面只能寫一個window.onload，寫多次，後寫的會覆蓋前面的，只顯示最後寫的。

• 2.document.ready：
  整個DOM樹繪製/渲染完畢，節點載入完畢
  一個頁面可以寫多個，從上到下依次顯示

    window.onload = function(){
    			alert("window.onload1");
    		}
  
    	window.onload = function(){
    		alert("window.onload2");
    	}
    	
    	$(function(){
    	alert("jq1");
    	});
  
    	$(function(){
    		alert("jq2");
    	});
  

jQuery程式設計風格

$.(document).ready(function(){
		//JQ程式碼,相當於原生js的：document.ready
})
簡寫：
$.(function(){
})

JQ物件和JS物件轉化

JQ物件：通過jQuery選擇器拿到DOM物件，然後對其封裝，使其能夠呼叫jQuery的API，
相當於把DOM物件重新包裝了一下。

$("選擇器"):JQ物件
JQ物件不等於JS物件JQ的函式不能和JS混用

JS物件轉換為JQ物件：
var JQ物件 = $(JS物件)
JQ物件轉JS物件：
var JS物件 = $("選擇器")[0];

jQuery選擇器

基本選擇器

• id選擇器

語法
$("#id")：獲取對應id的JQ物件

<h1 id="col" onclick="change()">color</h1>
//頁面載入完畢時點選時觸發change函式修改樣式
<script type="text/javascript">
		//document.ready:
		//DOM樹繪製完畢，即頁面所有節點載入完畢
		$(document).ready(
			function(){
				//註冊方法
				$("#col").click(function(){
					//this:觸發當前事件的節點
					$(this).css("background-color","red");
			});
		});
</script>

• 標籤選擇器：

$(“標籤名”)

<style type="text/css">
	
    li{list-style: none; line-height: 22px; cursor: pointer;}
    .current{background: #6cf; font-weight: bold; color: #fff;}
</style>
<ul>
    <li id="current">jQuery簡介</li>
    <li>jQuery語法</li>
    <li>jQuery選擇器</li>
    <li>jQuery事件與動畫</li>
    <li>jQuery方法</li>
</ul>

<script type="text/javascript">
   $(function(){
       //對該頁面的所有li新增click事件
       //隱式迭代，隱式遍歷
       $("li").click(function(){
           //給id為current新增
           $("#current").addClass("current");
       });
   });

• 類選擇器：

$(".類名")

$(".cls").addClass("current");
給類名為cls的新增current樣式

層次選擇器

• 後代選擇器：空格
  $(“選擇器1 選擇器2”);

• 子選擇器：
  $(“選擇器1>選擇器2”)

• 鄰兄選擇器：>
  $(“選擇器1+選擇器2”)

• 後兄選擇器：+
  $(“選擇器1~選擇器2”)
  只選中後面的兄弟

• .siblings(“選擇器”)：
  選擇滿足選擇器的所有兄弟

• 層次選擇器API：

  JQ的方法可以使用鏈式程式設計：
  .next(“選擇器”)：下一個兄弟

  .prev(“選擇器”)：上一個兄弟

  .siblings(“選擇器”):獲取所有兄弟

  .children(“選擇器”)：獲取所有孩子，不包含孩子的後代

  .parent(“選擇器”):獲取父節點

  .parents(“選擇器”)：獲取所有祖先

屬性選擇器：

• $ ("[屬性名]")：獲取包含該屬性的標籤
  例如：$(“a[href]”)
• $("[屬性名=‘屬性值’]")：
  獲取包含該屬性，並且屬性值=條件的標籤
• $("[屬性名！=‘屬性值’]")：
  獲取包含該屬性，並且屬性值!=條件的標籤
• $("[屬性名^=‘屬性值’]")：
  獲取包含該屬性，並且屬性值以條件值開頭
• $ ("[屬性名$=‘屬性值’]")：
  獲取包含該屬性，並且屬性值以條件值結尾
• $("[屬性名*=‘屬性值’]")：
  獲取包含該屬性，並且屬性值包含條件值
• 屬性選擇器經常和其它選擇器結合使用

過濾選擇器

• 基本過濾選擇器：從多箇中選出一個或者多個
  ：eq(index):相等
  ：gt(index):大於
  ：lt(index):小於
  ：first:第一個
  ：last:最後一個
  ：even:偶數
  : odd:奇數
  下標從0開頭

• 可見性過濾選擇器：
  選擇器：hidden :獲取隱藏的元素
  選擇器：show :獲取顯示的元素
  可見性過濾選擇器：
  選擇器：hidden :獲取隱藏的元素
  選擇器：show :獲取顯示的元素

繫結事件：

js和jQuery都是基於事件觸發

• 1.直接通過事件名繫結
  • .click()
    點選事件
  • .mouseover()
    滑鼠移入事件
  • .mouseout()
    滑鼠移出事件

$().mouseover(function(){
     //移入後執行的操作
}).mouseout(function(){
    //移出後執行的操作
});
簡化寫法：
$().hover(function(){
    //移入後執行的操作
},function(){
    //移出後執行的操作
});
hover=mouseover+mouseout;

• .focus()
  focus:獲取焦點事件
• .blur();
  blur:失去焦點事件
  失去滑鼠游標
• 2.通過bind()進行繫結
  .bind():對節點繫結事件
  繫結一個事件：
  .bind(“事件名”,function(){})
  繫結多個事件：

.bind({
		事件名1：function(){},
		事件名2：function(){}
		...
});

• JQ如何獲取一個元素的innerHTML/innerText和元素的value

  js	jQuery
  nnerHTML	.html()
  nnerText	.text()
  value	.val()

• JQ建立節點

	$(html字串)：建立節點
	$("<li>承宗</li>")

• JQ插入節點
  • 往節點內部插：通過父節點插入
    插入到最後：
  • 父節點.append(要插入的節點)
    要插入的節點.appendTo(父節點)
  • 插入到頭部：
    父節點.prepend(要插入的節點)
    要插入的節點.prependTo(父節點)
  • 往節點外部插入：通過同輩節點插入
  • 插如後為弟弟：
    節點.after(要插入的節點)
    要插入的節點.insertAfter(節點）
  • 插入後為哥哥節點：
    節點.before(要插入的節點);
    要插入的節點.insertBefore(節點);

注意：

JQ的insertBefore：插入同輩節點
JS的insertBefore：是插入子節點

• JQ刪除節點
  • .remove(“選擇器”):
    刪除節點，同時刪除該節點下的所有子節點，並且解除該節點繫結的所有事件
  • .detach(“選擇器”)：返回值為刪除的節點物件:JQ物件
    刪除節點，同時刪除該節點下的所有子節點，但會保留該節點繫結的所有事件和資料
  • .empty()：
    清空節點下的元素

注意：

empty()：只是清空子節點，但保留當前節點
remove()/detach()：刪除該節點同時刪除其子節點

• 刪除一般都是先定位節點，再刪除；
  但也可以通過使用有參函式新增選擇器進行刪除：刪除多個

var $deletedLi = $("li").detach("li.xxoo");

• 替換節點
  老節點.replaceWith(新節點)
  新節點.replaceAll(老節點)
• 克隆節點
  節點.clone(true/false):
  返回值為克隆的新節點：JQ物件
  預設是false:不復制節點上繫結的事件
  true:會複製節點繫結的事件
• JQ：each():重點
• 遍歷陣列、集合

//function無參
$(選擇器).each(function(){
	//$(this):獲取當前元素：JQ物件
})

//function有參
$(選擇器).each(function(index,data){
	//index:下標
	//data:當前元素：JS物件
})

$.each(要遍歷的陣列,function(index,data){});
一般用於遍歷JS陣列

$(選擇器).each():遍歷頁面節點
$.each():遍歷JS陣列

總結：暫時總結下知識點，等以後有時間在加上案列