一.JQuery瞭解

1,原生js的問題

在我們變成的時候回很容易發現,原生的js編程會有很多的問題,尤其是在兼容性方面:

選擇元素,權限兼容的只有getElementById和getElementsByTagName;其他方法都有兼容問題

樣式操作也有兼容問題,還得我們自己封裝，封裝getStyle（）

動畫也麻煩,也得自己封裝，封裝animation（）

HTML節點操作也挺麻煩的

JS裏面麻煩的都是和DOM編程有關的,有兼容問題,還的我們自己封裝.

jQuery是原生JS封裝的,簡化了JS的DOM編程，完美的解決了原生js在DOM操作上的難題

2. JQuery簡單介紹

2.1 官方自我介紹:

jQuery是一個快速、小型的、特性很多的JS庫，它把很多事兒都變得簡單。jQuery是免費的、開源的。

版本線:

1.x版本

2.x版本

3.x版本

jQuery分壓縮版和未壓縮版 ,以下面的兩個版本爲例:

jquery-3.3.1.min.js ：壓縮版，發佈版84.8KB
jquery-3.3.1.js ：常規版，開發版265KB

2.2 引入JQuery

<script src="...." >
</script>

二 .JQuery 對象和 DOM 對象

1.DOM

1.1 DOM 模型

將html xml等文檔結構的標籤語言看成dom模型,下圖爲例,就是一個簡單的DOM模型.

1.2 DOM 節點

元素節點 <html> <ul>... <p>

屬性節點：title src alt ...

文本節點：文本節點

1.3 DOM 對象

以上三種節點類型的具體對象就是Dom對象。
使用層面：凡是JavaSCript能夠直接操作的對象，就是Dom對象。
例如，var title = document.getElementById("myTitile");通過js獲取到的title對象就是一個dom對象（就是<p>對象）

2. JQuery對象

凡是jQuery能夠直接操作的對象，就是jQuery對象。
例如：var $title = $("#myTitile") ; 通過jquery獲取到的 $title 就是一個jquery對象。
同樣一個元素，即可以成爲一個dom對象（javascript對象），也可以成爲一個jquery對象

注意：dom對象只適用於js的各種語法（函數、屬性），jquery對象只用於jquery的各種語法（函數、屬性）。
dom對象和jquery對象的各自獨立。

例如:

title 是dom對象，因此可以使用js屬性或方法 title.innerHTML
$title 是jquery對象，因此可以使用jquery屬性或方法 $title.html()

建議:

js對象直接寫title
jquery 加上$，例如$title

3. JQuery對象和DOM對象的相互轉換

例如:

title.innerHTML;title ->$title

$title.html(); $title->title

3.1 DOM 對象轉化JQuery對象

DOM 對象轉化爲JQuery 對象非常簡單,只需要用到JQuery工廠$().

語法:

$(DOM對象)

        let div = document.querySelector('.box');
        div.onclick = function () {
           window.alert($(div).html());
        }

3.2 JQuery對象轉化DOM 對象

基礎：jquery對象默認是一個數組或集合；dom對象默認是一個單獨的對象

所以將之轉化爲DOM對象有兩種辦法:

看成數組:JQuery對象[0]

看成集合:JQuery對象.get(0)

三.$()選擇器

$ 就是jQuery的核心，query就是選擇的意思

基礎語法:

$(‘選擇器’)，jQuery(‘選擇器’)

$可以用jQuery代替，$和jQuery是同一個函數

選中某個或某類元素

<style type="text/css">
    p {
        float:left;
        width: 60px;
        height: 60px;
        background-color: #ccc;
        margin-left: 10px;
        margin-top: 10px;
    }
</style>

<p></p>
<p></p>
<p></p>
<p></p>

<script src="jQuery.js"></script>
<script>
    console.log($)
    $('p').css('background-color','red');
</script>

1.$()選擇的結果是一個類數組

        console.log($('#box'));
        [div#box]

既然是類數組，就不能直接跟原生js的語法

$('#box').style.backgroundColor = 'red';

選擇結果是類數組,那麼很明顯上面的方式是錯誤的,如果想使用元素方法，可以加[0],將jQuery對象轉成元素對象

$('#box')[0].style.backgroundColor = 'red';

2.使用方法(引號問題)

$(‘選擇器’)裏面的引號不能丟，在jQuery中只有是以下幾個不用加引號，其他全部需要

不需要加引號的選擇

$(this)

$(document)

$(window)

3.文檔加載

// 文檔加載完畢後執行
$(document).ready(function(){
    
})
// 簡寫方案
$(function(){
    console.log($('div'))
})

3.1 window.onload()函數和$(document).ready()函數的對比

函數名	window.onload()	$(document).ready()
執行時機	必須等待網頁中所有的內容(如文檔,圖片,視頻等)加載完畢之後才能執行	網頁中所有DOM結構加載完畢之後即刻開始執行,(如文檔,圖片,視頻等)並沒有完全加載完畢
編寫個數	同一頁面不能編寫多個	同一頁面可以編寫多個
簡化寫法	無	$(function() {....})

四. 選擇器

這個是jQuery 的發明和js沒有關係

寫在引號裏面,:當成篩選的功能符

以下都是序號，篩選器.

1. 基本選擇器

1.1 標籤選擇器

$('標籤名')

$("p").html() 獲取p標籤對象，是jquery對象形式的
$("p").length

1.2 類選擇器

$(".class值")

1.3 id選擇器

$("#id值")

1.4 並集(或)選擇器

逗號分割
$(".class值,#id值")

1.5 交集選擇器（同時存在）

連續直接寫
       $(".class值#id值")
       $("p.myStyle").html()：選中即是p標籤，並且class的值是myStyle
       注意：不能出現歧義
           錯誤寫法 $(".myStylep").html()
       交集選擇器在交接處只能是.或#開頭的選擇器

1.6 全局選擇器：選中全部的元素

選中全部的元素
$("*")

2.層次選擇器

2.1 相鄰選擇器+

$("選擇器1+選擇器2")

2.2 同輩選擇器 ~

$("選擇器1~選擇器2")

2.3 後代選擇器空格

$("選擇器1 選擇器2")

2.4 後代選擇器 >

$("選擇器>選擇器2")

3.屬性選擇器

$("[屬性名]")

       $("[class]") :選中全部元素中有class屬性的元素

   $("[屬性名=屬性值]")
       $("[class=xxx]")
       $("[class='xxx']")


   $("[class!=a]") 不等於，包含兩種：有class但值不是a, 沒有class

$("[class^=a]") class以a開頭的元素

   $("[class$=a]") class以a結尾的元素

   $("[class*=a]") class有a的元素

4. 過濾選擇器

過濾選擇器的一些方法和其他函數類型，例如 $("ul>li:first")等價於$("ul>li").first()
有些不同，例如，可以$("ul>li:odd") ；錯誤$("ul>li").odd();

基本過濾選擇器（從0開始）

:first：最開頭那一個

:last：最後那一個

:even：偶數

:odd:奇數

:eq(index)：第index個

其他選擇過濾器

:gt(index) : >index的全部元素

:lt(index): <index的全部元素

:not(選擇器) :除了...以外

:header:選中所有的標題元素 h1 h2 ...

:focus: 獲取當前焦點的元素

5.可見性選擇器

:visible ：選中所有可見的元素

:hidden：選中所有隱藏的元素

6.is()

判斷是不是返回true,或false

判斷點擊的這個p標籤是不是有這個類叫做

$('p').click(function(){
    alert($(this).is('.t'))
})

還可以判斷是不是奇數的,is()裏面可以寫篩選器

$('p').click(function(){
    alert($(this).is(':odd'))
})

五. 序與迭代

1.序號eq()

按照選擇器選中的元素,然後在通過序號挑選

    <style>
        p {
            display: block;
            width: 200px;
            height: 30px;
            font-size: 18px;
            text-align: center;
            line-height: 30px;
            margin-bottom: 5px;
            border:1px solid #000;
        }
    </style>

    <div class="box1">
        <p>this is box 1</p>
        <p>this is box 2</p>
        <p>this is box 3</p>
    </div>
    <div class="box2">
        <p>this is box 4</p>
        <p>this is box 5</p>
        <p>this is box 6</p>
    </div>

<script>
    $('p').eq(1).css('background-color','pink');
    $('.box2 p').eq(1).css('background-color','orange');
</script>

也就是說 $()函數將返回一個對象隊列,用eq來精確選擇這個隊列中的你想要的元素

2.index()方法

返回這個元素在親兄弟中的排名,無視選擇器怎麼選.

    //index()方法
    $('p').click(function () {
        console.log($(this).index())
    })

依次點擊六個box打印的結果如下:

$(this).index()是一個很常見的寫法,表示觸發這個事件的元素,在親兄弟中的排名.

利用index()方法寫對應

    // 事件綁定在box1裏面的p
    $('.box1 p').click(function(){
        // 改變的是box2裏面的對應的p
        $('.box2 p').eq($(this).index()).css("background-color","red");
    })

3.each() 方法

迭代方法,說白了就是循環

表示遍歷節點,也叫作迭代符合條件的節點

    $('p').each(function(index,item) {
        console.log(index);
        console.log(item);
        //原生js設置樣式
        // item.style.backgroundColor = '#999';
        //JQuery方式
        $(item).css('background-color','#58a');
    })

4.size()方法和length屬性

size() 方法和 length 屬性是一樣的, 獲取jQuery對象中元素的個數.

這兩個數字永遠相同

    //獲取所有p元素的個數
    console.log($('p').length); //6
    console.log($('p').size()); //6

值得注意的是,這兩個獲取到的值死一樣的,但是我個人更推薦使用length屬性,因爲size()方法只有在1.8以下的版本才能用

5. get()方法

get()方法和eq()方法基本一致,都依賴$()的序列

不一樣的是:

get()方法返回的是原生js的DOM對象

eq()方法返回的是JQuery對象

    $('p').get(0).style.backgroundColor = 'pink';
    $('p').eq(1).css('background-color','#999');

六. css樣式

1. 讀取樣式值

讀取樣式，可以讀取計算後的樣式，寫一個參數，爲獲取值的屬性

參數爲屬性字符串，必須加引號

讀取的值有單位

    console.log( $('p:first').css('background-color'));
    console.log( $('p:first').css('width'))

2. 設置屬性值

2.1 設置一個屬性值

如果只設置一個屬性值，需要傳兩個參數，

第一個參數爲需要設置值的屬性

第二個參數爲需要設置的值，如果爲數值，不需要加單位，

    $("p:last").css('background-color','#81C784');
    $("p:last").css('width','300');

2.2 設置多個屬性值

如果想要同時設置多個屬性值，可以寫成JSON

    $('p:odd').css({
        'width':300,
        'height':50,
        'background-color':'#8BC34A',
        'color':'#E0E0E0',
    });

當然,我們也可以單獨的設置每一個樣式達到同樣的效果.

2.3 設置的屬性可以多樣

設置的屬性不僅可以爲改變後的值，還可以設置+= 的值，就是在原有的基礎上加多少像素

    $('p:eq(0)').css('width','+=100px');
    $('p:eq(2)').css('width','+=100');

兩種寫法效果相同.

3. 自定義屬性

3.1 獲取自定義屬性

通過attr()方法獲取自定義屬性

console.log($('p:first').attr('data')); //first

3.2 設置自定義屬性

    $('p:first').attr('data','123');
    //修改自定義屬性data的值從first變爲123

4. 有關於class類名

4.1 添加類名 addClass()

    $('p:last').addClass('last')

4.2 刪除類名 removeClass()

    $('p:last').removeClass('last')

4.3 替換類名 toggleClass()

遵循有則刪除,無則添加原則

$('p:last').toggleClass('last')

5. 關於節點值

5.1 html()

相當於原生JavaScript中的innerHTML

    $('p:first').html();  // 獲取值
    $('p:first').html('<h2>this is h2</h2>'); // 設置值

5.2 text()

就是innerText

    $('p:first').text();  // 獲取值
    $('p:first').text('<h2>this is h2</h2>'); // 設置值

七. 節點關係

1. children()

選中所有的子元素

表示選取親兒子,不選擇後代,選擇所有的子元素

$('.box').children()

選擇所有子元素中的div元素

$('.box').children('div')

還可以添加篩選器

$('.box').children('div:odd')

2. find()

查詢所有的後代選擇器,返回後代所有元素的列表

    console.log($('.box1').find('p'))

注意,和children()方法不一樣,find()方法裏面,必須寫參數,表示後代的誰,

find就是尋找的意思,就是你找後代裏的誰

3. parent()

找父元素,任何一個元素只有一個父元素

    console.log($('.box1 p').parent())

4. parents()

尋找所有的祖先元素,可以傳參數,尋找哪個祖先元素

$('p').parents('div')

5. silbling()

尋找所有的親兄弟元素節點

$('p').sibling()

可以添加選擇器

$('p').sibling('div')

6. prev() next() prevAll() nextAll()

前一個兄弟,後一個兄弟,前所有的兄弟,後所有的兄弟元素節點

7. offsetParent()

查找定位父級

$('p').offsetParent('div')

JQuery學習筆記一(JQuery選擇器.css樣式操作,節點關係)