成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

jQuery是一個優秀的、輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），而jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，并且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。

1、jQuery入口函數與Js入口函數的區別

【注】js入口函數指的是：window.onload = function(){};

區別一：書寫個數不同

Js入口函數只能出現一次，出現多次會存在事件覆蓋的問題。

jQuery的入口函數，可以出現任意多次，并不會存在事件覆蓋問題。

區別二：執行時機不同

Js入口函數是在所有的文件資源加載完成后，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。

jQuery的入口函數，是在文檔加載完成后，就執行。文檔加載完成指的是：DOM樹加載完成后，就可以操作DOM了，不用等到所有的外部資源都加載完成。

文檔加載的順序：從上往下，邊解析邊執行。

2、jQuery對象和DOM對象的相互轉換

①DOM對象此處指的是：使用js操作DOM返回的結果

var btn = document.getElementById(“btnShow”); // btn就是一個DOM對象 

②jQuery對象此處指的是：使用jQuery提供的操作DOM的方法返回的結果

var $btn = $(“#btnShow”); // $btn就是一個jQuery對象

③DOM對象轉換成jQuery對象

var $btn1 = $(btn); // 此時就把DOM對象btn轉換成了jQuery對象$btn1
// $(document）.ready(function(){}); // 調用入口函數
// 此處是將document這個js的DOM對象，轉換成了jQuery對象，然后才能調用jQuery提供的方法：ready

④jQuery對象轉換成DOM對象

// 第一種方式
var btn1 = $btn[0]; // 此時就把jQuery對象$btn轉換成了DOM對象btn1 （推薦使用此方式）
// 第二種方式
var btn2 = $btn.get(0);// 此時就把jQuery對象$btn轉換成了DOM對象btn2

3、jQuery選擇器

符號（名稱） 說明 用法 基本選擇器（重點） # ID選擇器

$(“#btnShow”).css(“color”, “red”);

選擇id為btnShow的一個元素（返回值為jQuery對象，下同）

. 類選擇器

$(“.liItem”).css(“color”, “red”);

選擇含有類liItem的所有元素

element 標簽選擇器

$(“li”).css(“color”, “red”);

選擇標簽名為li的所有元素

層級選擇器 空格 后代選擇器

$(“#j_wrap li”).css(“color”, “red”);

選擇id為j_wrap的元素的所有后代元素li

> 子代選擇器

$(“#j_wrap > ul > li”).css(“color”, “red”);

選擇id為j_wrap的元素的所有子元素ul的所有子元素li

基本過濾選擇器 :eq(index) 選擇匹配到的元素中索引號為index的一個元素，index從0開始

$(“li:eq(2)”).css(“color”, ”red”);

選擇li元素中索引號為2的一個元素

:odd 選擇匹配到的元素中索引號為奇數的所有元素，index從0開始

$(“li:odd”).css(“color”, “red”);

選擇li元素中索引號為奇數的所有元素

:even 選擇匹配到的元素中索引號為偶數的所有元素，index從0開始

$(“li:odd”).css(“color”, “red”);

選擇li元素中索引號為偶數的所有元素

篩選選擇器（方法） （重點） find(selector) 查找指定元素的所有后代元素（子子孫孫）

$(“#j_wrap”).find(“li”).css(“color”, “red”);

選擇id為j_wrap的所有后代元素li

children() 查找指定元素的直接子元素（親兒子元素）

$(“#j_wrap”).children(“ul”).css(“color”,“red”);

選擇id為j_wrap的所有子代元素ul

siblings() 查找所有兄弟元素（不包括自己）

$(“#j_liItem”).siblings().css(“color”, “red”);

選擇id為j_liItem的所有兄弟元素

parent() 查找父元素（親的）

$(“#j_liItem”).parent(“ul”).css(“color”,“red”);

選擇id為j_liItem的父元素

eq(index) 查找指定元素的第index個元素，index是索引號，從0開始

$(“li”).eq(2).css(“color”, “red”);

選擇所有li元素中的第二個

以上這篇jQuery基礎知識點總結(必看)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持綠夏網。