jquery基礎知識基本使用概述(1)
jQuery基本介紹
為什麽要學jQuery
【01-讓div顯示與設置內容.html】
使用JS操作DOM的時候,會遇到以下的一些缺點:
//1. 獲取元素的方法太少且長,麻煩。
//2. 遍歷偽數組很麻煩,通常要嵌套一大堆的for循環。
//3. 註冊的事件會覆蓋。
//4. 有兼容性問題。
//5. 實現動畫很麻煩
初體驗
【02-讓div顯示與設置內容.html】
$(document).ready(function () {
$("#btn1").click(function () {
//隱式叠代:偷偷的遍歷,在jQuery中,不需要手動寫for循環了,會自動進行遍歷。
$("div").show(200);
});
$("#btn2").click(function () {
$("div").text("我是內容");
});
});
使用jQuery的優點
//1. 獲取元素的方式非常的簡單,而且非常的豐富
//2. jQuery的隱式叠代特性,不再需要書寫for循環語句。
//3. 使用jQuery完全不用考慮兼容性問題。
//4. jQuery提供了一系列動畫相關的函數,使用非常方便。
//5. 代碼簡單、粗暴。
沒有對比,就沒有傷害,有了對比,處處戳中要害。
什麽是jQuery?
jQuery是一個快速的、輕量的、功能豐富的js庫。
jQuery的官網 http://jquery.com/
jQuery就是一個js庫,使用jQuery的話,會比使用JavaScript更簡單。
js庫:把一些常用到的方法寫到一個單獨的js文件,使用的時候直接去引用這js文件就可以了。(animate.js、common.js)
使用步驟
引包(引入js文件)
<script src="jquery-1.11.1.js"></script>
入口函數
$(document).ready(function () {
});
?
$(function(){
});
功能實現
$("#btnShowDiv").click(function () {
$("div").show(1000);
});
版本介紹
官網下載地址:http://jquery.com/download/
jQuery版本有很多,分為1.x 2.x 3.x
大版本分類:
1.x版本:能夠兼容IE678瀏覽器(最終版本1.12.4)
2.x版本:不兼容IE678瀏覽器(最終版本2.2.4)
?
//jQuery目前正在更新的版本
3.x版本:不兼容IE678,更加的精簡(在國內不流行,因為國內使用jQuery的主要目的就是兼容IE678),3.x版本只是在原來的基礎上增加了一些新的特性。
關於壓縮版和未壓縮版
jquery-1.12.4.min.js:壓縮版本,適用於生產環境,因為文件比較小,去除了註釋、換行、空格等東西,但是基本沒有顆閱讀性。
jquery-1.12.4.js:未壓縮版本,適用於學習與開發環境,源碼清晰,易閱讀。
入口函數
入口函數的好處:
1. 等待文檔加載完成,保證能夠獲取到元素
2. 形成了一個沙箱,防止全局變量汙染。
兩種寫法:
//第一種寫法
$(document).ready(function() {
});
//第二種寫法
$(function() {
});
jQuery入口函數與js入口函數的對比
1. JavaScript的入口函數要等到頁面中所有資源(包括圖片、文件)加載完成才開始執行。
2. jQuery的入口函數只會等待文檔樹加載完成就開始執行,並不會等待圖片、文件的加載。
jQuery對象與DOM對象(重點)
基本概念:
1. DOM對象:使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象。
2. jQuery對象:jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。
3. jQuery對象其實就是DOM對象的包裝集(包裝了DOM對象的集合(偽數組))
jQuery對象與DOM對象的區別:
1. DOM對象與jQuery對象的方法不能混用。
2. DOM對象可以和jQuery對象相互轉化
DOM對象轉換成jQuery對象:【聯想記憶:花錢】
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對象轉jQuery對象
jQuery對象轉換成DOM對象:
var $li = $(“li”);
//第一種方法(推薦使用)
$li[0]
//第二種方法
$li.get(0)
選擇器
什麽是jQuery選擇器
jQuery選擇器是jQuery為我們提供的一組方法,讓我們更加方便的獲取到頁面中的元素。註意:jQuery選擇器返回的是jQuery對象。
jQuery選擇器有很多,基本兼容了CSS1到CSS3所有的選擇器,並且jQuery還添加了很多更加復雜的選擇器。【查看jQuery文檔】
jQuery選擇器雖然很多,但是選擇器之間可以相互替代,就是說獲取一個元素,你會有很多種方法獲取到。所以我們平時真正能用到的只是少數的最常用的選擇器。
css選擇器
jQuery完全兼容css選擇器
名稱 | 用法 | 描述 |
---|---|---|
ID選擇器 | $(“#id”); | 獲取指定ID的元素 |
類選擇器 | $(“.class”); | 獲取同一類class的元素 |
標簽選擇器 | $(“div”); | 獲取同一類標簽的所有元素 |
並集選擇器 | $(“div,p,li”); | 使用逗號分隔,只要符合條件之一就可。 |
交集選擇器 | $(“div.redClass”); | 獲取class為redClass的div元素 |
子代選擇器 | $(“ul>li”); | 使用>號,獲取兒子層級的元素,註意,並不會獲取孫子層級的元素 |
後代選擇器 | $(“ul li”); | 使用空格,代表後代選擇器,獲取ul下的所有li元素,包括孫子等 |
跟CSS的選擇器一模一樣。
過濾選擇器
這類選擇器都帶冒號:
名稱 | 用法 | 描述 |
---|---|---|
:eq(index) | $(“li:eq(2)”).css(“color”, ”red”); | 獲取到的li元素中,選擇索引號為2的元素,索引號index從0開始。 |
:odd | $(“li:odd”).css(“color”, ”red”); | 獲取到的li元素中,選擇索引號為奇數的元素 |
:even | $(“li:even”).css(“color”, ”red”); | 獲取到的li元素中,選擇索引號為偶數的元素 |
:first | $(“li:first”).css(“color”, ”red”); | 獲取到的li元素中的第一個 |
:last | $(“li:last”).css(“color”, ”red”); | 獲取到的li元素中的最後一個 |
篩選選擇器(方法)
篩選選擇器的功能與過濾選擇器有點類似,但是用法不一樣,
篩選選擇器
主要是方法。
名稱 | 用法 | 描述 |
---|---|---|
children(selector) | $(“ul”).children(“li”) | 獲取當前元素的所有子元素中的li元素 |
find(selector) | $(“ul”).find(“li”); | 獲取當前元素中的後代元素中的li元素 |
siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟節點,不包括自己本身。 |
parent() | $(“#first”).parent(); | 查找父親 |
eq(index) | $(“li”).eq(2); | 相當於$(“li:eq(2)”) ,index從0開始 |
next() | $(“li”).next() | 找下一個兄弟 |
prev() | $(“li”).prev() | 找上一次兄弟 |
其他補充
mouseover與mouseenter
mouseover和mouseoverenter都有鼠標經過的意思,但是在註冊鼠標經過事件的時候,推薦使用
mouseenter
mouseenter 與 mouseover 的不同
-
mouseover與mouseout是一對事件,當鼠標經過當前元素或者當前元素的子元素的時候,mouseover事件都會觸發【事件冒泡】。
-
mouseenter與mouseleave是一對事件,只有當鼠標經過當前元素時,事件會觸發,鼠標經過子元素,mousenter事件是不會觸發的。
index方法
index()
方法返回的是當前元素在所有兄弟元素裏面的索引。
<ul>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
</ul>
當碰到這種結構的時候,推薦給li註冊事件,這樣通過index方法才能獲取到正確的索引值。
jquery基礎知識基本使用概述(1)