jquery彙總

Tiff發表於2018-11-05
jQuery

瞭解jquery

回顧前面學到的js我們遇到的一些不足之處：

  1. 實現一個小功能要寫很多程式碼
  2. 獲取頁面元素不方便
  3. 相容性問題

  4. window.onload事件會覆蓋，我們只能寫一個

  5. 動畫效果，不好實現

我們之所以選擇JQuery，就是為了解決以上的問題的。

jquery特點

具有獨特的鏈式語法和短小清晰的多功能介面；

具有高效靈活的css選擇器，並且可對CSS選擇器進行擴充套件；

擁有便捷的外掛擴充套件機制和豐富的外掛。

Query相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

輕量級

出色的瀏覽器相容性

出色的DOM操作封裝

完善的ajax

鏈式程式設計

隱式迭代（無需for迴圈遍歷dom物件）

完善的文件、強大的社群

豐富的外掛

jquery入門

入口函式

$(document).ready(function(){alert("aaa")})複製程式碼

$(function(){alert("aaa")})複製程式碼

事件處理js  jquery區別

事件源

JS：

docoment.getElementById(“id”);複製程式碼

JQ: 

$(“#id”);複製程式碼

事件

JS: 

docoment.getElementById(“id”).onclick複製程式碼

JQ: 

$(“#id”).click複製程式碼

事件處理程式（監聽器）

JS：

docoment.getElementById(“id”).onclick = function() {  // 語句  };複製程式碼

JQ：

$(“#id”).click（function(){  // 語句}）;複製程式碼

jQuery控制CSS

核心方法：.css()

<body>    
<div id="main">hhh</div>  
<button>點選</button>
</body>複製程式碼

$("button").click(function(){  
$("#main").css({
width:300,     
"background-color":"#f00"  
})
})複製程式碼

注意細節：

1，如果value有px， 需要去掉px(屬性值直接填純數字，jQuery會自動幫你補單位)

2，如果是數字的話，不需要加引號，其它需要加引號

3，如果屬性名中有-，那麼我們也需要給屬性名加上引號

4，如果屬性名中有-， 想去掉引號的話，需要寫成駝峰命名法

5，屬性名可以加引號，也可以不加引號

 jQuery控制HTML

核心方法：html()

修改HTML

.html(引數1)  引數1表示要修改的html內容

訪問HTML

.html()  沒有參數列示訪問

<body>    
<div id="main"></div>   
 <button>修改</button>    
<button>訪問</button>
</body>

<script src="./jquery.js"></script>

<script>
$("button:eq(0)").click(function(){
$("div").html("<h1>haha</h1>")
})

$("button:eq(1)").click(function(){
alert($("div").html()) 
})
</script>複製程式碼

jQuery控制標籤屬性

核心方法：attr();   

有待更新...


相關文章