jquery和html的整合

• jquery是單獨的js檔案 ，通過script標籤的src屬性匯入即可
• 注意：使用jquery的時候如果放到整個網頁的前面，需要把jquery程式碼放到頁面載入函式中。否則應該把jquery程式碼放到整個網頁的後面。

獲取一個jquery物件

• $(“選擇器”) 或者 jQuery(“選擇器”)

• dom物件和jquery物件之間的轉換

  dom物件===>jquery物件
  $(dom物件)
  jquery物件===>dom物件
  方式1:
  jquery物件[index]
  方式2:
  jquery物件.get(index)

頁面載入:

• js:

   window.onload=function(){}//在一個頁面中只能使用一次
  

• jquery 在一個頁面中可以使用多次

   方式1:
   	$(function(){...})
   方式2:
   	$(document).ready(function(){});
  

派發事件:

• $(“選擇器”).click(function(){…});

  等價於 原生js中
  dom物件.onclick=function(){…}

• 掌握事件:

   focus
   blur
   submit
   change
   click
  

jquery中效果:

• 隱藏或展示

   show(毫秒數) hide(毫秒數)
  

• 滑入或滑出

   slideDown(毫秒數):向下滑入
   slideUp(毫秒數):向上滑出
  

• 淡入或淡出

   fadeIn(int):淡入
   fadeOut(int):淡出
  

選擇器總結:

• 基本選擇器★

   $("#id值")  $(".class值")  $("標籤名")  
   
   瞭解:$("*")
   理解:獲取多個選擇器 用逗號隔開
   	$("#id值,.class值")
  

• 層次選擇器 ★

   a b:a的所有b後代
   a>b:a的所有b孩子
   a+b:a的下一個兄弟(大弟弟)
   a~b:a的所有弟弟
   
  

• 基本過濾選擇器:★

   :frist 第一個
   :last 最後一個
   :odd  索引奇數
   :even 索引偶數
   :eq(index) 指定索引
   :gt(index) >
   :lt(index) <
  

• 內容過濾:

   :has("選擇器"):包含指定選擇器的元素
  

• 可見過濾:

   :hidden   在頁面不展示元素 一般指 input type="hidden" 和 樣式中display:none
   :visible 
  

• 屬性過濾器:★

   [屬性名]
   [屬性名="值"]
  

• 表單過濾:

   :input  所有的表單子標籤  input select textarea button
  

屬性和css操作總結:

• 對屬性的操作:

   attr():設定或者獲取元素的屬性
   	方式1:獲取
   		attr("屬性名稱")
   	方式2:設定一個屬性
   		attr("屬性名稱","值");
   	方式3:設定多個屬性  json
   		attr({
   			"屬性1":"值1",
   			"屬性2":"值2"
   		})
   removeAttr("屬性名稱"):移除指定屬性
   新增class屬性的時候 
   	attr("class","值");
   	addClass("指定的樣式值"); 相當於 attr("class","指定的樣式值");
   	removeClass("指定的樣式值");
  

• 對css操作:操作元素的style屬性

   css():獲取或者設定css樣式
   	方式1:獲取	
   		css("屬性名")
   	方式2:設定一個屬性
   		css("屬性名","值")
   	方式3:設定多個
   		css({
   			"屬性1":"值1",
   			"屬性2":"值2"
   		});
  

• 獲取元素的尺寸:

   width()
   height()	
  

遍歷陣列

	陣列.each(function(){});
	$.each(遍歷陣列,function(){});

• 注意:

   each的function中可以加兩個引數 index和dom
   	index是當前遍歷的索引值
   	dom指代的是當前遍歷的dom物件(開發中一般使用this即可)
  

• 設定或者獲取value屬性

   jquery物件.val():獲取
   jquery物件.val("...."):設定
  

• 設定獲取獲取標籤體的內容

   html()
   text()
   
   xxxxx():獲取標籤體的內容
   xxxxx("....."):設定標籤體的內容
   	
   	設定的區別:
   		html:會把字串解析
   		text:只做為普通的字串
   	獲取的區別:
   		html:獲取的html原始碼
   		text:獲取只是頁面展示的內容