jQuery第一天(基本概念及選擇器)

時間 2019-12-05

標籤 jquery 第一天基本概念選擇器欄目 JQuery 简体版

原文原文鏈接

01

什麼是jQuery?

jQuery的官網 jquery.com/javascript

jQuery就是一個js庫，使用jQuery的話，會比使用JavaScript更簡單。css
js庫：把一些經常使用到的方法寫到一個單獨的js文件，使用的時候直接去引用這js文件就能夠了。（animate.js、common.js）html

咱們知道了，jQuery其實就是一個js文件，裏面封裝了一大堆的方法方便咱們的開發，其實就是一個增強版的common.js，所以咱們學習jQuery，其實就是學習jQuery這個js文件中封裝的一大堆方法。java

jQuery的版本

官網下載地址：jquery.com/download/ jQuery版本有不少，分爲1.x 2.x 3.xjquery

大版本分類：數組

1.x版本：可以兼容IE678瀏覽器
2.x版本：不兼容IE678瀏覽器
1.x和2.x版本jquery都再也不更新版本了，如今只更新3.x版本。

3.x版本：不兼容IE678，更加的精簡（在國內不流行，由於國內使用jQuery的主要目的就是兼容IE678）
複製代碼

關於壓縮版和未壓縮版瀏覽器

jquery-1.12.4.min.js:壓縮版本，適用於生產環境，由於文件比較小，去除了註釋、換行、空格等東西，可是基本沒有顆閱讀性。
jquery-1.12.4.js:未壓縮版本，適用於學習與開發環境，源碼清晰，易閱讀。
複製代碼

jQuery的入口函數

使用jQuery的三個步驟：bash

1. 引入jQuery文件
2. 入口函數
3. 功能實現
複製代碼

關於jQuery的入口函數：dom

//第一種寫法
$(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對象的集合(僞數組))
4.DOM對象與jQuery對象的方法不能混用
複製代碼

DOM對象轉換成jQuery對象：【聯想記憶：花錢】

var $obj = $(domObj);
//$(document).ready(function(){}); 就是典型的DOM對象轉jQuery對象
複製代碼

jQuery對象轉換成DOM對象：

var $li = $("li");
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)
複製代碼

$其實就是一個函數，參數不一樣，功能就不一樣
- 1. 參數是一個function，入口函數
```
$(function (){
        
    });
複製代碼
```
- 1. $(domObj) 把dom對象轉換成jquery對象
```
$(document).ready(function (){
        
    });
複製代碼
```
- 1. 參數是一個字符串,用來找對象
```
$("div") $("#btn") $(".current")
複製代碼
```

選擇器

jQuery選擇器

jQuery選擇器是jQuery爲咱們提供的一組方法，讓咱們更加方便的獲取到頁面中的元素。（注意：jQuery選擇器返回的是jQuery對象)

jQuery選擇器有不少，基本兼容了CSS1到CSS3全部的選擇器，而且jQuery還添加了不少更復雜的選擇器。（查jQuery位置）

jQuery選擇器雖然不少，可是選擇器之間能夠互相替代，就是說獲取一個元素，有不少種方法獲取到。平時使用的只是少數最經常使用的選擇器

基本的選擇器

名稱	用法	描述
ID選擇器	$("#id");	獲取指定ID的元素
類選擇器	$(".class");	獲取同一類class的元素
標籤選擇器	$(「div");	獲取同一類標籤的全部元素
並集選擇器	$("div,p,li");	使用逗號分隔，只要符合條件之一便可
交集選擇器	$("div.redClass")	獲取class爲redClass的div元素

總結：跟css的選擇器用法如出一轍。

層級選擇器

名稱	用法	描述
子代選擇器	$(「ul>li」);	使用>號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素
後代選擇器	$(「ul li」);	使用空格，表明後代選擇器，獲取ul下的全部li元素，包括孫子等

過濾選擇器

這類選擇器都帶冒號:

名稱	用法	描述
: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元素中，選擇索引號爲偶數的元素

篩選選擇器(方法)

篩選選擇器的功能與過濾選擇器有點相似，可是用法不同，篩選選擇器主要是方法。

名稱	用法	描述
children(selector)	$(「ul」).children(「li」)	至關於$(「ul>li」)，子類選擇器
find(selector)	$(「ul」).find(「li」);	至關於$(「ul 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()	找上一次兄弟

$("選擇器").eq(index);----jq對象
$("選擇器").get(index);----js對象

index

$('').index(DOM對象 | jQuery對象)
- 返回 DOM對象或者 jQuery對象在當前選擇器中的索引, jQuery對象找不到返回 -1, DOM對象找不到返回 0 因此不建議使用 DOM對象查找
$('').index();
- 不傳遞參數，返回這個元素在html文檔中同輩中的索引位置。