jQuery經常使用操做

時間 2019-12-07

標籤 jquery 經常使用欄目 JQuery 简体版

原文原文鏈接

jQuery

　　jQuery是一個輕量級的JS庫，是一個被封裝好的JS文件，提供了更爲簡便的元素操做方式，jQuery封裝了DOM。css

使用jQuery

引入jQuery文件html

　　<scrtipt src='jquery-1.11.3.js'> </script>jquery

　　注意：引入必須放在其餘jQuery操做以前。數組

jQuery對象

　　jQuery對象是由jQuery對頁面元素進行封裝後的一種體現app

　　jQuery中所提供的全部操做都只針對jQuery對象，其餘對象（DOM）沒法使用ide

工廠函數 -- $()

　　想要獲取jQuery對象，則必須使用工廠函數$()函數

　　在$()中容許傳遞一個選擇器/DOM對象做爲參數，$()可以將選擇器和DOM對象所有封裝成jQuery對象再進行返回動畫

例子：this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery演示</title>
</head>
<body>
    <div id="main">
        id是mian的div元素
    </div>
<button onclick="bClick()">獲取元素</button>
    <script src="jquery-1.11.3.js"></script>
    <script>
        function bClick() {
            //經過jquery選擇器獲取id='main'的元素
            var m = $("#main");
            //設置元素的內容
            m.html('動態設置的值');
            console.log(m)
        }
    </script>
</body>
</html>

DOM對象和jQuery對象之間的轉換spa

　　DOM對象不能使用jQuery提供的操做，反之一樣。

　　一、將DOM對象轉換爲jQuery對象

　　　　語法：var 變量 = $(DOM對象)；

　　　　注意:全部的jQuery對象在起名的時候，最好在變量前加$，主要用於和DOM對象的區分

　　　　例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="main">
        這是div元素
    </div>
    <button onclick="bClick()">DOM - jQuery</button>
    <script src="jquery-1.11.3.js"></script>
    <script>
        function bClick() {
            // 經過DOM的操做，獲得id爲main的元素
            var main = document.getElementById('main');
            // 再將其轉換爲jQuery對象
            var $main = $(main);
            $main.html('轉換爲JQ對象成功！')
        }
    </script>
</body>
</html>

　　二、將jquery對象轉換爲DOM對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="main">
        這是div元素
    </div>
    <button onclick="JQtoDom()">jQuery-DOM</button>
    <script src="jquery-1.11.3.js"></script>
    <script>
        function JQtoDom() {
            // 使用jquery獲得id爲main的元素
            var $main = $("#main");
            // 再將其轉換爲DOM對象
            // var m = $main[0];
            var m = $main.get(0);
            m.innerHTML = '轉換爲DOM對象成功！'
        }
    </script>
</body>
</html>

jQuery選擇器

做用

　　獲取頁面上的元素們，返回值都是由jQuery對象所組成的數組

　　語法：$("選擇器")

基本選擇器

一、ID選擇器

　　$("#id");

　　返回：返回頁面中指定ID值的元素

二、類選擇器

　　$(".className")

　　返回：頁面中指定className的全部元素

三、元素選擇器

　　$("element")

　　返回：頁面中指定標記的全部元素

四、羣組選擇器 / 複合選擇器

　　$("selector1,selector2,...")

　　返回：返回知足函數內全部選擇器的函數們

層級選擇器

一、$("selector1 selector2")

　　後代選擇器

二、$("selector1>selector2")

　　子代選擇器
三、$("selector1+selector2")

　　名稱：相鄰兄弟選擇器

　　做用：匹配牢牢跟在selector1後面且知足selector2選擇器的元素

　　例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="main">
        <p id="p1">這是id爲p1的元素</p>
        <p>這是普通元素</p>
        <p>這是普通元素</p>
        <p>這是普通元素</p>
        <p>這是普通元素</p>
    </div>
    <button onclick="bNB()">相鄰兄弟選擇器</button>
    <script src="jquery-1.11.3.js"></script>
    <script>
        function bNB() {
            $("#p1+p").css('background', 'yellow');
        }
    </script>

</body>
</html>

四、$("selector1~selector2")

　　名稱：通用兄弟選擇器

　　做用：匹配selector1後面全部知足selector2選擇器的元素

　　例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="main">
        <p id="p1">這是id爲p1的元素</p>
        <p>這是普通元素</p>
        <p>這是普通元素</p>
        <p>這是普通元素</p>
        <p>這是普通元素</p>
    </div>
    <button onclick="bNB()">通用兄弟選擇器</button>
    <script src="jquery-1.11.3.js"></script>
    <script>
        function bNB() {
            $("#p1~p").css('color', 'red');
        }
    </script>
</body>
</html>

基本過濾選擇器

　　過濾選擇器一般都會配合着其餘的選擇器一塊兒使用

一、:first

　　只匹配一組元素中的第一個元素

　　$("p:first")

二、:last

　　只匹配一組元素中的最後一個元素

三、:not("selector")

　　在一組元素中，將知足selector選擇器的元素排除出去

四、:odd

　　匹配偶數行元素(奇數下標)

五、:even

　　匹配奇數行元素(偶數下標)

六、:eq(index) -- equals

　　匹配下標等於 index 的元素

七、:gt(index)

　　匹配下標大於 index 的元素

八、:lt(index)

　　匹配下標小於 index 的元素

屬性過濾選擇器

　　依託於html元素的屬性來進行元素過濾的
一、[attribute]

　　做用：匹配包含指定屬性的元素

　　ex:

　　div[id]:匹配具有id屬性的div元素

二、[attribute=value]

　　做用：匹配attribute屬性值爲value的元素

　　ex:

　　　　input[type=text]

　　　　input[type=password]

三、[attribute!=value]

　　做用：匹配attribute屬性值不是value的元素

四、[attribute^=value]

　　做用：匹配attribute屬性值是以value字符開頭的元素

　　ex:

　　　　p[class^=col]

五、[attribute$=value]
　　做用：匹配attribute屬性值是以value字符結尾的元素

六、[attribute*=value]

　　做用：匹配attribute屬性值中包含value字符的元素

子元素過濾選擇器

一、:first-child

　　匹配屬於其父元素中的首個子元素

二、:last-child

　　匹配屬於其父元素中的最後一個子元素

三、:nth-child(n)

　　匹配屬於其父元素中第n個子元素

四、jQuery操做DOM

　　基本操做
　　一、html()
　　　　做用：獲取或設置 jQuery對象中的html內容
　　　　ex:
　　　　　　console.log($("#main").html());
　　　　　　$("#main").html("");

　　二、text()

　　　　做用：獲取或設置 jQuery對象中的text內容

　　三、val()

　　　　做用：獲取或設置 jQuery對象中的value值(表單控件)

　　四、屬性操做

　　　　attr()

　　　　做用：讀取或設置jQuery對象的屬性值

　　　　ex:

　　　　　　$obj.attr("id");

　　　　　　獲取 $obj 的id屬性值

　　　　　　$obj.attr("id","main");

　　　　　　設置$obj對象的id屬性值爲main

　　　　removeAttr("attrName")

　　　　　刪除jQuery對象的attrName屬性

　　　　　ex:

　　　　　　$obj.removeAttr("class");

二、樣式操做

　　一、attr()

　　　　$obj.attr("class","redBack");

　　二、addClass("className")

　　　　做用：將className 添加到元素的class值以後

　　　　ex:

　　　　　　$obj = $obj.addClass("c1");

　　　　　　$obj = $obj.addClass("c2");

　　　　　　連綴調用：

　　　　　　　　$obj.addClass("c1").addClass("c2");

　　三、removeClass("className")

　　　　若是無參的話，則清空類選擇器

　　　　若是有參數的話，則刪除對應的類選擇器

　　　　ex:

　　　　　　$obj.removeClass("c1")

　　　　　　將c1類選擇器從$obj移除出去

　　　　　　$obj.removeClass()

　　　　　　清空$obj的全部類選擇器

　　四、toggleClass("className")

　　切換樣式：

　　　　元素若是具有className選擇器，則刪除

　　　　元素若是沒有className選擇器，則添加

　　五、css("屬性名")

　　　　$obj.css("width");

　　　　獲取$obj對象的width屬性值

　　六、css("屬性名","屬性值")

　　　　$obj.css("background-color","yellow");

　　　　設置$obj對象的background-color的屬性值爲yellow

　　七、css(JSON對象)

　　　　JSON對象：

　　　　是一種約束了格式的對象表現形式

　　　　JSON:JavaScript Object Notation

　　　　JSON對象的表示方式：

　　　　　　一、JSON對象必須使用{}括起來

　　　　　　二、使用鍵值對的方式來聲明數據(表示屬性和值)

　　　　　　三、全部的屬性在使用時必須使用""括起來，值若是是字符串的話，也必須使用""括起來

　　　　　　四、屬性和值之間使用:鏈接

　　　　　　五、多對屬性和值之間使用 , 隔開

　　　　　　ex:

　　　　　　$obj.css({

　　　　　　　　"color":"red",

　　　　　　　　"font-size":"32px",

　　　　　　　　"float":"left"

　　　　　　　　});

遍歷節點

一、children() / children("selector")

　　獲取某jQuery對象的全部子元素或帶有指定選擇器的子元素

　　注意：只考慮子代元素，不考慮後代元素

二、next() / next("selector")

　　獲取某jQuery對象的下一個兄弟元素 / 知足selector的下一個兄弟元素

三、prev() / prev("selector")

　　獲取某jQuery對象的上一個兄弟元素 / 知足selector的上一個兄弟元素

四、siblings() / siblings(selector)

　　獲取某jQuery對象的全部兄弟元素 / 知足selector的全部兄弟元素

五、find("selector")

　　查找知足selector選擇器的全部後代元素

六、parent()

　　查找某jQuery對象的父元素

建立對象　　

語法：$("建立的標記")

ex:
　　一、建立一對div

　　　　var $div = $("<div></div>");

　　　　$div.html("動態建立的div");

　　　　$div.attr("id","container")

　　　　$div.css("color","red");

　　二、建立一對div

　　　　var $div = $("<div id='container' style='color:red;'>動態建立的div</div>");

插入元素

　　做用：將建立好的元素插入到網頁中
　　一、內部插入
　　　　做爲元素的子元素插入到網頁中
　　　　$obj.append($new);
　　　　將$new元素插入到$obj元素中的最後一個子元素位置處(追加)
　　　　$obj.prepend($new);
　　　　將$new元素插入到$obj元素中的第一個子元素位置處
　　二、外部插入
　　　　做爲元素的兄弟元素插入到網頁中
　　　　$obj.after($new);
　　　　將$new元素做爲$obj的下一個兄弟元素插入進來
　　　　$obj.before($new);
　　　　將$new元素做爲$obj的上一個兄弟元素插入進來

刪除元素

$obj.remove();
　　將$obj元素刪除出去

jQuery中的事件處理

1、頁面加載後的執行

　　相似於window.onload 但不一樣於 window.onload

　　jQuery加載後執行的特色：

　　在DOM樹加載完畢的時候就開始執行

　　　　$(document).ready( function(){

　　　　//頁面的初始化操做

　　　　//DOM樹加載完成後就開始運行

　　　　} );

　　　　$().ready( function(){

　　　　//頁面的初始化操做

　　　　//DOM樹加載完成後就開始運行

　　　　} );

　　　　$( function(){

　　　　//頁面的初始化操做

　　　　//DOM樹加載完成後就開始運行

　　　　} );

二、jQuery的事件綁定

方式1

$obj.bind("事件名稱",事件處理函數);

ex:

　　$obj.bind("click",function(){

　　//事件的行爲操做

　　console.log("... ....");

　　});

方式2

　　$obj.事件名稱(function(){

　　//事件處理函數
　　});

　　ex:
　　　　$obj.click(function(){
　　　　//經過 this 來表示觸發該事件的DOM對象
　　　　});

三、事件對象 - event

在綁定事件的時候，容許傳遞 event 參數來表示事件對象

　　$obj.bind("click",function(event){
　　//event表示當前事件的事件對象
　　});

　　$obj.click(function(event){
　　//event表示當前事件的事件對象
　　});

　　event的使用方式與原生JS事件中的event使用方式一致。
　　event.stopPropagation() : 阻止事件冒泡
　　event.offsetX:
　　event.offsetY:
　　event.target:獲取事件源