JQuery 知識點

1.jQuery簡介：

jquery是JavaScript+查詢（Query）吠式，是由javascript編寫的js庫陡厘，為編寫javascript提供了更高效便捷的接口

2.jQuery核心功能：

HTML 元素選取：提供了在文檔上查找dom元素的方式特占。
HTML 元素操作：提供了對dom元素的操作增刪改功能糙置。
CSS 操作：提供了對dom元素樣式的修改功能。
HTML 事件函數(shù) ：擴展了javascript事件是目，并實現(xiàn)了兼容谤饭。
JavaScript 特效和動畫。
AJAX ：簡化了javascript對于ajax的調(diào)用。
Utilities ：提供了若干工具函數(shù)揉抵。

3.jQuery的引入方式：

加載本地的jQuery文件

<script type="text/javascript" src="jquery-1.9.1.js"> </script>

引入網(wǎng)絡(luò)上的jQuery文件

<script type=“text/javascript” src=“http://ajax亡容。googleapis。com/ajax/libs /jquery/1.4.0/jquery.min.js"> </script>

4.jQuery入門程序

//當(dāng)網(wǎng)頁加載后彈出helloworld對話框

$(document).ready(function() {
    alert('hellowworld');
});

//簡寫形式
        $(function(){
            
        });
//$:jQuery的核心函數(shù)冤今，用于獲取document對象闺兢。
//ready():jQuery提供的事件函數(shù)，表示當(dāng)文檔加載后調(diào)用響應(yīng)函數(shù)

5.jQuery的基本語法

$(selector).action();

$：jQuery的核心函數(shù),也可編寫成jQuery

selector：jQuery的查找網(wǎng)頁元素的表達式,返回jQuery封裝的DOM對象
action：jQuery的內(nèi)置函數(shù)

 <script>
        $(function(){
            // $(selector).action();

            $(".p1").html("新內(nèi)容");

            let pcontent =  $(".p1").html();  //將類名為".p1"的html內(nèi)容賦值給變量
            // let pcontent =  $(".p1").text();  //純文本內(nèi)容
            console.log(pcontent);//將變量打印從控制臺打印

            $("input[name='username']").val("張三");//通過name屬性的name值找到input框戏罢，并改變其value屬性的值屋谭；

            let inputValue = $("input[name='username']").val();//通過name屬性的name值找到input框，并將其value屬性的值賦給變量
            console.log('inputValue :',inputValue);
        })
    </script>

6.jquery對象與DOM對象的區(qū)別

jQuery 對象：就是通過jQuery封裝的DOM對象龟糕，兼容性更強
jQuery對象中封裝了dom對象
jQuery對象擴展了dom對象的屬性及方法
jQuery對象：

var $div = $("#div");
$div.html('使用jquery對象操作');

DOM對象：

var div = document.getElementById('div');
div.innerHTML="使用dom對象操作";

var $variable = jQuery 對象;
var variable = DOM 對象;

7.Jquery對象與DOM對象的轉(zhuǎn)換

將DOM對象轉(zhuǎn)換為jQuery對象：用$()把DOM對象包裝起來

//DOM對象轉(zhuǎn)換為jquery對象的方式
var div = document.getElementById('div');
var $div = $(div);
$div.html('使用jquery對象操作');

將jQuery對象轉(zhuǎn)換為DOM對象：一個jQuery對象可以封裝多個DOM對象桐磁；通過size()方法，返回選擇器選擇的dom對象的數(shù)量

/*使用數(shù)組下標(biāo)獲取dom對象*/
var firstInput = $input[0];
//使用get方法獲取
var firstInput = $input.get(0);
/*獲取jquery封裝的dom對象的數(shù)量*/
var size = $input.size();

image.png

8.jquery選擇器

基本選擇器

$("#id").action()   //id選擇器:選擇一個具有指定id屬性的單個元素
$("元素").action()  //元素選擇器: 參數(shù)為html標(biāo)簽名讲岁，返回該標(biāo)簽對應(yīng)的jQuery對象（封裝一組DOM對象）
$(".class").action() //  類選擇器:參數(shù)為css的樣式類名我擂，返回使用當(dāng)前樣式類渲染的jQuery對象
$("*").action() //通配符選擇器：匹配所有元素對應(yīng)的jQuery對象

高級選擇器

屬性選擇器：通過元素的屬性來獲取相應(yīng)的元素

    * [attribute]： 匹配包含指定屬性的元素
     $("div[id]") //獲取所有具有id值的div對象

    * [attribute=value]：匹配給定的屬性是某個特定值的元素
     $("input[name=‘userName’]") 獲取name取值為userName的輸入框

    * [attribute!=value]：匹配所有不含有指定的屬性，或者屬性不等于特定值的元素
     $("input[name!=‘userName’]")獲取name取值為非userName的輸入框

    * [attribute^=value]：匹配給定的屬性是以某些值開始的元素
    $("input[name^=‘news’]")獲取name取值以news開頭的輸入框

    * [attribute$=value]：匹配給定的屬性是以某些值結(jié)尾的元素
    $("input[name$=‘end’]")獲取name取值以end結(jié)尾的輸入框

    * [attribute*=value]:匹配給定的屬性是以包含某些值的元素
    $("input[name*=‘con’]") 獲取name取值包含con的輸入框

    * [attributeFilter1][attributeFilterN]：組合使用
    $("input[id][name$=‘man’]")  
    //獲取具有id屬性缓艳，name取值以man結(jié)尾的輸入框

層次選擇器：通過 DOM 元素之間的層次關(guān)系來獲取特定元素, 例如后代元素, 子元素, 相鄰元素, 兄弟元素

$("form input") 獲取form表單下所有input標(biāo)簽
$("form > input") 獲取form表單下直接子節(jié)點input標(biāo)簽

偽類選擇器

$(".class:first") 獲取第一個樣式類名為class的元素
$(" .class:first-child") 獲取樣式類名為class的元素的第一個子元素
$(".class:empty") 獲取樣式類名為class且沒有子元素的選擇器

9.jQuery的DOM操作

DOM的增刪改

創(chuàng)建DOM元素: 使用 jQuery 的工廠函數(shù) $(html)扶踊，會根據(jù)傳入的 html 字符串創(chuàng)建一個 jQuery的DOM 對象并返回

//通過$符號創(chuàng)建的元素為jquery對象,對象在內(nèi)存中類似于innerHTML
var image = $('<img src="1.png" alt="圖片" style="width: 100px;"/>');
//插入body下
$(document.body).append(image);

插入dom元素：將jQuery的dom對象插入到指定位置上

image.png
刪除DOM元素

image.png
修改DOM元素

image.png

DOM屬性的設(shè)定

屬性操作：獲取或設(shè)定DOM元素屬性值

 <script>
      $(function () {
        const src1 = $("img").attr("src","image/advpic.jpg");
        alert(src1);
      });
    </script>

image.png

DOM樣式的設(shè)定

樣式操作：修改目標(biāo)元素所使用的樣式類

//獲取樣式取值
$('#div').css("font-size")
//設(shè)定一個樣式
$('#div').css('color','red');
//批量設(shè)定樣式
$('#div').css({color:'red','background-color':'yellow'});

image.png

DOM對象的html設(shè)定
Html設(shè)置：用于設(shè)置元素內(nèi)部的html代碼或字符
- obj.html():讀取和設(shè)置某個元素中的HTML 內(nèi)容，與dom中的innerHTML一致郎任。
- obj.text():讀取和設(shè)置某個元素中的文本內(nèi)容，與dom中的innerText一致