jQuery學習筆記·jQuery基礎

jQuery資源

jQuery三個版本的匯入檔案

jQuery和Js入口函式的區別

• 原生的JS和jQuery入口函式的加載模式不同
• 原生JS會等到DOM元素加載完畢，并且圖片也加載完畢才會執行
• jQuery會等到DOM元素加載完畢，但不會等到圖片也加載完畢就會執行
• 原生的JS函式如果撰寫了多個入口函式，后面撰寫的回覆寫前面撰寫的
• jQuery中如果撰寫了多個入口函式，后面的不會覆寫前面的

jQuery入口函式的四種寫法

//1.第一種寫法
        $(document).ready(function () {

        })
        //2.第二種寫法
        jQuery(document).ready(function () {

        })
        //3.第三種寫法
        $(function () {

        })
        //4.第四種寫法
        jQuery(function () {

        })

jQuery的沖突問題

		//1.釋放$的使用權
        //注意點：釋放操作必須在撰寫其他jQuery代碼之前撰寫
        //       釋放之后就不能再使用$,改為使用jQuery
        //jQuery.noConflict();
        //2.自定義訪問符號
        var nj = jQuery.noConflict();
        nj(function () {
             alert("hello world")
        })

jQuery靜態方法和實體方法

靜態方法創建和呼叫

//1.定義一個類
        function AClass() {

        }
        //2.給這個類添加一個靜態方法
        //直接添加給類就是靜態方法
        AClass.staticMethod = function () {
            alert("staticMethod");
        }
        //靜態方法通過類名呼叫
        AClass.staticMethod()
        //3.給這個類添加一個實體方法
        AClass.prototype.instanceMethod = function () {
            alert("instanceMethod");

        }

實體方法創建和呼叫

		//實體方法通過類的實體呼叫
        //創建一個實體
        var a = new AClass();
        //通過實體呼叫實體方法
        a.instanceMethod();

靜態方法each方法

js原生函式forEach遍歷陣列

• 第一個引數：遍歷到的元素
• 第二個引數：當前遍歷到的索引
• 注意點： 原生的forEach方法只能遍歷陣列，不能遍歷偽陣列

var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
arr.forEach(function (value, index) {
            console.log(value, index);
});

jQuery的each靜態方法遍歷陣列

• 第一個引數：當前遍歷到的索引
• 第二個引數：遍歷到的元素
• 注意點： jQuery的each方法是可以遍歷偽陣列的

var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
$.each(arr, function (index,value) {
            console.log(value, index);
        })
$.each(obj, function (index,value) {
            console.log(value, index);
        })

靜態方法map方法

利用原生JS的map方法遍歷

• 第一個引數：當前遍歷到的元素
• 第二個引數：當前被遍歷到的索引
• 第三個引數：當前被遍歷的陣列
• 注意點： 和原生forEach一樣，不能遍歷的偽陣列

var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
arr.map(function (value, index, array) {
            console.log(value, index, array);
        });

利用jQuery的map方法遍歷

• 第一個引數：要遍歷的陣列
• 第二個引數：每遍歷一個元素后執行的回呼函式
• 回呼函式的第一個引數：要遍歷的元素
• 回呼函式的第二個引數：遍歷到的索引
• 注意點： 和jQuery的靜態方法一樣，map方法也可以遍歷偽陣列

var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
$.map(arr, function (value, index) {
            console.log(index, value);
        });

jQuery中的each靜態方法和map靜態方法的區別

• each靜態方法默認回傳值就是，遍歷誰就回傳誰
• map靜態方法默認的回傳值就是一個空陣列
• each靜態方法不支持在回呼函式中對遍歷的陣列進行處理
• map靜態方法可以在回呼函式中通過return對遍歷的陣列盡心處理，然后生成一個新的陣列回傳

var res1 = $.map(obj, function (value, index) {
            // console.log(index, value);
            return value+index;
        });
var res2 = $.each(obj, function (index,value) {
    // console.log(value, index);
    return value+index;
});
console.log(res1);
console.log(res2);

jQuery的其他靜態方法

$.trim()

• 作用：去除字串兩端的空格
• 引數：需要去除空格的字串
• 回傳值：去除空格之后的字串

var str = "   lnj    ";
var res = $.trim(str);
console.log("---"+str+"---");
console.log("---"+res+"---");

$.iswindow()

• 作用：判斷傳入的物件是否是window物件
• 回傳值：true/false

//陣列
var arr = [1, 3, 5, 7, 9];
//偽陣列
var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
//物件
var obj = {"name":"lnj", age:"33"};
//函式
var fn = function () {

}
//window物件
var w = window;
var res = $.isWindow(w);
console.log(res);

$.isArray()

• 作用：判斷傳入的物件是否是陣列物件
• 回傳值：true/false

$.isFunction()

• 作用：判斷傳入的物件是否是函式物件
• 回傳值：true/false
• 注意點：jQuery本質是函式

var res = $.isFunction(jQuery);
console.log(res);

holdReady方法

• 作用：暫停ready執行

$.holdReady(true);
        $(function () {
            alert("ready");
});

<button>
點擊按鈕
</button>

var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        $.holdReady(false);
    }

jQuery的內容選擇器

HTML頁面

<style>
        div{width: 50px;height: 100px;background: #ff0000;margin-bottom: 50px;}
</style>
<div></div>

<div>我是div</div>

<div>他們我是div123</div>

<div><span></span></div>

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

empty

• 作用：找到既沒有內容也沒有子元素的指定元素

parent

• 作用：找到既有內容或有子元素的指定元素

contains(text)

• 作用：找到包含指定文本內容的指定元素

has(selector)

• 作用：找到包含指定子元素的指定元素

jQuery代碼

// var $div = $("div:empty");
// var $div = $("div:parent");
// var $div = $("div:contains('我是div')");
var $div = $("div:has('span')");
console.log($div);

jQuery屬性和屬性節點

名詞解釋

1.什么是屬性？

• 物件保存的變數就是屬性

2.如何操作屬性？

• 物件.屬性名稱 = 值;
• 物件.屬性名稱;
• 物件[“屬性名稱”]=值;
• 物件[“屬性名稱”];

3.什么是屬性節點？

• 在撰寫HTML代碼時，在HTML標簽中添加的屬性就是屬性節點
• 在瀏覽器找到span這個DOM元素后，展開之后全是屬性
• 在attribute屬性中保持的所有內容都是屬性節點

4.如何操作屬性節點？

• DOM元素.setAttribute(“屬性名稱”, “值”);
• DOM元素.getAttribute(“屬性名稱”);

5.屬性和屬性節點有什么區別？

• 任何物件都有屬性，但是只有DOM物件才有屬性節點

代碼示例

// function Person() {
//
// }
// var p = new Person();
// p.name = "lnj";
// console.log(p.name);

var span = document.getElementsByTagName('span')[0];
span.setAttribute("name", "lnj");
console.log(span.getAttribute("name"));

<span name="it555"></span>

jQuery的attr方法

attr

• 作用：獲取和設定屬性節點的值
• 引數：可以傳遞一個引數，也可以傳遞兩個引數
  如果傳遞一個引數，代表獲取屬性節點的值
  如果傳遞兩個引數，代表設定屬性節點的值
• 注意點：無論找到多少個元素，都只會回傳第一個元素指定的屬性節點的值
• 如果是設定：找到多少個元素就會設定多少個元素，如果設定的屬性節點不存在，那么系統會自動新增

removeAttr(name)

• 作用：洗掉屬性節點
• 引數：洗掉對應屬性節點的名字
• 注意點：會洗掉所有找到元素指定的屬性節點

代碼示例

$(function () {
            console.log($("span").attr("class"));
            $("span").attr("class", "box");
            $("span").attr("abc", "123");

            $("span").removeAttr("class name");

        });

<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>
</body>

jQuery的prop方法

用法與attr方法類似

attr方法與prop方法的區別

在操作具有true和false兩個屬性的屬性節點，如checked，selected或者disabled使用prop(),其他使用attr()

console.log($("input").prop("checked"));// true/false
            console.log($("input").attr("checked"));// checked/undefined

<input type="checkbox"/>

attr方法與prop方法練習

$(function () {
//1.給按鈕添加點擊事件
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
 //2.獲取輸入框輸入的內容
var input = document.getElementsByTagName("input")[0];
var text = input.value;
console.log(text);
//3.修改img的src屬性節點的值
$("img").attr("src", text);
// $("img").prop("src", text);
}
        })

<input type="text"/>
<button>切換圖片</button>
<br>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">

jQuery操作類的相關的方法

方法介紹

1.addClass(class|fn)

• 作用：添加一個類
• 如果要添加多個，多個類名之間用空格隔開即可

2.removeClass([class|fn])

• 作用：洗掉一個類
• 如果要洗掉多個，多個類名用空格隔開即可

3.toggleClass(class|fn[,sw])

• 作用：切換類
• 有就洗掉，沒有就添加

代碼示例

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .class1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .class2{
            border: 10px solid #000;
        }
    </style>
<button>添加類</button>
<button>洗掉類</button>
<button>切換類</button>
<div></div>

var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
   $("div").addClass("class1");
   $("div").addClass("class1 class2");
}
btns[1].onclick = function () {
   $("div").removeClass("class1");
}
btns[2].onclick = function () {
   $("div").toggleClass("class2");
}

jQuery文本值相關的方法

相關方法

1.html([val|fn])

2.text([val|fn])

3.val([val|fn|arr])

代碼示例

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

</style>
<button>設定HTML</button>
<button>獲取HTML</button>
<button>設定text</button>
<button>獲取text</button>
<button>設定value</button>
<button>獲取value</button>
<div></div>
<input type="text"/>

var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
$("div").html("<p>我是段落<span>我是span</span></p>");
}
btns[1].onclick = function () {
console.log($("div").html());
}
btns[2].onclick = function () {
$("div").text("<p>我是段落<span>我是span</span></p>");
}
btns[3].onclick = function () {
console.log($("div").text());
}
btns[4].onclick = function () {
$("input").val("請輸入內容");
}
btns[5].onclick = function () {
console.log($("input").val());
}

jQuery操作CSS樣式的方法

1.逐個設定CSS樣式

$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "red");

2.鏈式設定

• 注意點：鏈式操作如果大于三步，建議分開

$("div").css("width", "100px").css("height", "100px").css("background", "blue");

3.批量設定（常用）

$("div").css({
     "width": "100px",
     "height": "100px",
     "background": "red"
});

4.獲取css樣式值

console.log($("div").css("background"));

jQuery位置和尺寸操作的方法

前臺代碼

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid #000;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }

    </style>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid #000;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }

    </style>
<div class="father">
<div class="son"></div>
</div>
<button>獲取</button>
<button>設定</button>

1.獲取元素的寬度

console.log($(".father").width());

2.獲取元素距離視窗的偏移位

console.log($(".son").offset().left);

3.獲取元素距離定位元素的偏移位

console.log($(".son").position().left);

4.設定元素屬性

$(".father").width("500px");
$(".son").offset({
     left: 10
 });
 // $(".son").position({
 //     left: 10
 // });
 $(".son").css({
     left: "10px"
 })

jQuery的scrollTop

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .scorll{
            width: 100px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
        }
</style>
<div class="scorll">
    我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div
</div>
<button>獲取</button>
<button>設定</button>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br><br><br><br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br><br><br><br>

1.獲取滾動的偏移位

console.log($(".scorll").scrollTop());

2.獲取網頁滾動的偏移位
注意：為了保證瀏覽器的兼容，獲取網頁滾動的偏移位需要按照如下寫法

console.log($("html").scrollTop()+$("body").scrollTop());

3.設定滾動的偏移位

$(".scorll").scrollTop(300);

4.設定網頁滾動的偏移位
同時保證兼容性

$("html,body").scrollTop(300);

jQuery事件

事件系結

jQuery中有兩種系結事件方式
1.eventName(fn);
編碼效率略高/部分事件jQuery沒有實作，所以不能添加
2.on(evenName,fn);
編碼效率略低/所有js事件都可以添加
注意點：可以添加多個相同或者不同型別的事件，不會覆寫
代碼示例

// $("button").click(function () {
            //     alert("hello lnj");
            // });
            // $("button").click(function () {
            //     alert("hello lnj2");
            // });
            // $("button").mouseleave(function () {
            //         alert("hello mouseleave");
            //     });
            // $("button").mouseenter(function () {
            //     alert("hello mouseenter");
            // });

            $("button").on("click", function () {
                alert("hello on lnj1")

            })
            $("button").on("click", function () {
                alert("hello on lnj2")
            })

<button>我是按鈕</button>

事件移除(off方法)

• 如果不傳遞引數，會移除所有的事件
• 如果傳遞一個引數，會移除所有指定型別的事件
• 如果傳遞2個引數，會移除所有指定型別的指定事件
  代碼示例

function test1() {
    alert("hello test1");
}
function test2() {
    alert("hello test2");
}
$("button").click(test1);
$("button").click(test2);
$("button").mouseleave(function () {
        alert("hello mouseleave");
    });
$("button").mouseenter(function () {
    alert("hello mouseenter");
});
//off方法如果不傳遞引數，會移除所有的事件
$("button").off();
//off方法如果傳遞一個引數，會移除所有指定型別的事件
$("button").off("click");
//off方法如果傳遞2個引數，會移除所有指定型別的指定事件
$("button").off("click");

<button>我是按鈕</button>

jQuery事件冒泡和默認行為

前臺代碼

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
<div class="father">
    <div class="son">

    </div>
</div>
<a href="www.baodu.com">我是百度</a>
<form action="www.taobao.com">
    <input type="text">
    <input type="submit">
</form>

1.什么是時間冒泡？
事件發生后，瀏覽器通常首先觸發事件發生元素上的事件處理程式，然后是它的父元素，父元素的父元素……依此類推， 直到檔案的根元素為止，
2.什么是默認行為？
DOM元素本身具有一定的行為方式，比如form表單就有提交方式，
3.如何阻止事件冒泡？
使用stopPropagation()或者return false

$(".son").click(function (event) {
	alert("son");
	// return false;
 	event.stopPropagation();
});
$(".father").click(function () {
    alert("father");
});

4.如何阻止默認行為？
使用preventDefault()或者return false

$("a").click(function (event) {
    alert("彈出注冊框");
    return false;
    event.preventDefault();
});

jQuery事件自動觸發

前臺代碼

<style>
   *{
        margin: 0;
        padding: 0;
    }
    .father{
        width: 200px;
        height: 200px;
        background: red;
    }
    .son{
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>
<div class="father">
    <div class="son">

    </div>
</div>
<a href="http://www.baidu.com"><span>我是百度</span></a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>

1.trigger

• 如果利用trigger自動觸發事件，會觸發事件冒泡，
• 如果利用trigger自動觸發事件，會觸發默認行為，
  2.triggerHandler
• 如果利用triggerHandler自動觸發事件，不會觸發事件冒泡，
• 如果利用triggerHandler自動觸發事件，不會觸發默認行為，

面試問題：a標簽無法直接觸發默認行為，需要使用span標簽

$(".son").click(function (event) {
  alert("son");

});
$(".father").click(function () {
    alert("father");
});
// $(".son").trigger("click");
// $(".son").triggerHandler("click");                     //$("input[type='submit']").trigger("click");
// $("a").click(function () {
//     alert("a");
// });
// $("a").trigger("click");
$("span").click(function () {
    alert("a");
});
$("span").trigger("click");

自定義事件

前臺代碼

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
   <div class="father">
    <div class="son">

    </div>
</div>

想要自定義事件，必須滿足兩個條件

• 事件必須是通過on系結的
• 事件必須是通過trigger來觸發

$(function () {
    $(".son").on("myClick", function () {
        alert("son");
    });
    $(".son").trigger("myClick");
})

事件命名空間

想要事件的命名空間有效，必須滿足兩個條件

• 事件必須是通過on系結的
• 必須是通過trigger來觸發

$(function () {
    $(".son").on("click.zs", function () {
        alert("son1");
    });
    $(".son").on("click.ls", function () {
        alert("son2");
    });
    $(".son").trigger("click.zs ");
})

命名空間面試題

1.利用trigger觸發子元素帶命名空間的事件，那么父元素帶相同命名空間的事件也會被觸發，而父元素沒有命名空間的事件不會被觸發，
2.利用trigger觸發子元素不帶命名空間的事件，那么子元素所有相同型別的事件和父元素所有相同型別的事件都會被觸發，

$(".father").on("click.ls", function () {
   alert("father click1");
});
$(".father").on("click", function () {
    alert("father click2");
});
$(".son").on("click.ls", function () {
    alert("son click1");
});
// $(".son").trigger("click.ls");
$(".son").trigger("click.");

事件委托

前臺代碼

<ul>
    <li>我是第一個li</li>
    <li>我是第二個li</li>
    <li>我是第三個li</li>
</ul>
<button>新增一個li</button>

1.什么是事件委托？
請別人幫忙做事情，然后將結果反饋給我們，
2.在jQuery中，如果通過核心函式找到的元素不止一個，那么在添加事件的時候，
3.jQuery會遍歷所有找到的元素，給所有找到的元素添加事件，

$("button").click(function () {
    $("ul").append("<li>我是新增的li</li>")
});
$("ul").delegate("li", "click", function () {
  console.log($(this).html())
})