一篇jquery知識 讓你快速瞭解jquery
1.釋放
,改為使用jQuery
jQuery原理.noConflict();
var nj = jQuery.noConflict(); nj(function () { alert("hello lnj"); });
2、靜態方法和例項方法
// 1.定義一個類
function AClass() {
}
// 給這個類新增一個靜態方法
// 直接新增給類的就是靜態方法
AClass.staticMethod = function () {
alert("staticMethod");
}
// 靜態方法通過類名呼叫
AClass.staticMethod();
//給這個類新增一個例項方法
AClass.prototype.instanceMethod = function () {
alert("instanceMethod");
}
// 例項方法通過類的例項呼叫
// 建立一個例項(建立一個物件)
var a = new AClass();
// 通過例項呼叫例項方法
a.instanceMethod();
each方法：
第一個引數: 當前遍歷到的索引
第二個引數: 遍歷到的元素
注意點:
jQuery的each方法是可以遍歷偽陣列的
*/
// $.each(arr, function (index, value) {
// console.log(index, value);
// });
$.each(obj, function (index, value) {
console.log(index, value);
});
map方法
第一個引數: 要遍歷的陣列
第二個引數: 每遍歷一個元素之後執行的回撥函式
回撥函式的引數:
第一個引數: 遍歷到的元素
第二個引數: 遍歷到的索引
注意點:
和jQuery中的each靜態方法一樣, map靜態方法也可以遍歷偽陣列
*/
// $.map(arr, function (value, index) {
// console.log(index, value);
// });
var res = $.map(obj, function (value, index) {
console.log(index, value);
return value + index;
});
var res2 = $.each(obj, function (index, value) {
console.log(index, value);
return value + index;
});
console.log(res);
console.log(res2);
``
jQuery中的each靜態方法和map靜態方法的區別:
1. each靜態方法預設的返回值就是, 遍歷誰就返回誰
2. map靜態方法預設的返回值是一個空陣列
3. each靜態方法不支援在回撥函式中對遍歷的陣列進行處理
4. map靜態方法可以在回撥函式中通過return對遍歷的陣列進行處理, 然後生成一個新的陣列返回
holdReady方法
$.holdReady(true); 作用: 暫停ready執行
3.內容選擇器
:empty 作用:找到既沒有文字內容也沒有子元素的指定元素
:parent 作用: 找到有文字內容或有子元素的指定元素
:contains(text) 作用: 找到包含指定文字內容的指定元素
:has(selector) 作用: 找到包含指定子元素的指定元素
4. getAttribute() attr()
DOM元素.setAttribute(“屬性名稱”, “值”);
DOM元素.getAttribute(“屬性名稱”);
<body>
<span name = "it666"></span>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {
var span=document.querySelector('span');
//獲取的div是[object HTMLDivElement]
console.log(span.getAttribute("name"));
})
</script>
</body>
5.attr(name|pro|key,val|fn)
<body>
<span name = "it666"></span>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {
$("span").attr("name");
})
</script>
</body>
主要區別
呼叫 getAttribute() 的主體必須是元素(Element) 不可用$()訪問
呼叫 attr() 的主體必須是物件(Object) 不可用Element訪問
6.prop方法
特點和attr方法一致
注意點:
prop方法不僅能夠操作屬性, 他還能操作屬性節點
**官方推薦**:在操作屬性節點時,具有 true 和 false 兩個屬性的屬性節點，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
7.jquery操作類相關的方法
1.addClass(class|fn)
作用: 新增一個類
如果要新增多個, 多個類名之間用空格隔開即可
2。removeClass([class|fn])
作用: 刪除一個類
如果想刪除多個, 多個類名之間用空格隔開即可
3.toggleClass(class|fn[,sw])
作用: 切換類
有就刪除, 沒有就新增
8.jquery操作文字相關方法
1.html([val|fn])
和原生JS中的innerHTML一模一樣
2.text([val|fn])
和原生JS中的innerText一模一樣
3.val([val|fn|arr]) 操作有value屬性的元素
9.jquery位置和尺寸操作方法
1.offset() 作用: 獲取元素距離視窗的偏移位
2.position() 作用: 獲取元素距離定位元素的偏移位
注意：原生js中的offsetLeft相當於position() offsetLeft必須用Element主體呼叫 與jquery的offset()不一樣
10.srollTop()方法
作用： 獲取滾動的偏移位
注意點: 為了保證瀏覽器的相容, 獲取網頁滾動的偏移位需要按照如下寫法
// 設定網頁滾動偏移位
// 注意點: 為了保證瀏覽器的相容, 設定網頁滾動偏移位的時候必須按照如下寫法
$("html,body").scrollTop();
11、事件繫結 jQuery中有兩種繫結事件方式
1.eventName(fn);
編碼效率略高/ 部分事件jQuery沒有實現,所以不能新增
2.on(eventName, fn);
編碼效率略低/ 所有js事件都可以新增
注意：js中有HTML DOM addEventListener() 方法繫結事件的方式
12、事件移除 off();
off方法如果不傳遞引數, 會移除所有的事件
off方法如果傳遞一個引數, 會移除所有指定型別的事件
$("button").off("click");
off方法如果傳遞兩個引數, 會移除所有指定型別的指定事件
$("button").off("click", test1);
13、事件冒泡和預設行為
阻止事件冒泡：
if(event && event.stopPropagation){ event.stopPropagation() }else { window.event.cancelable=true; };
阻止預設行為： event.preventDefault();
14.事件自動觸發
trigger: 如果利用trigger自動觸發事件,會觸發事件冒泡
triggerHandler: 如果利用triggerHandler自動觸發事件, 不會觸發事件冒泡
15、jquery自定義事件
想要自定義事件, 必須滿足兩個條件
1.事件必須是通過on繫結的
2.事件必須通過trigger來觸發
$(".son").myClick(function (event) {
alert("son");
});
` $(".son").on("myClick", function () {
alert("son");
});
$(".son").triggerHandler("myClick");
自定義名稱空間
想要事件的名稱空間有效,必須滿足兩個條件
1.事件是通過on來繫結的
2.通過trigger觸發事件
$(".son").on("click.zs", function () {
alert("click1");
});
$(".son").on("click.ls", function () {
alert("click2");
});
// $(".son").trigger("click.zs");
$(".son").trigger("click.ls");
**16、jquery自定義動畫 animate({}) **
delay方法的作用就是用於告訴系統延遲時長
第一個引數: 接收一個物件, 可以在物件中修改屬性
第二個引數: 指定動畫時長
第三個引數: 指定動畫節奏, 預設就是swing
第四個引數: 動畫執行完畢之後的回撥函式
17、事件委託delegate() 方法
delegate() 方法為指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程式，並規定當這些事件發生時執行的函式。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//事件委託
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<div style="background-color:red">
<p>這是一個段落。</p>
<button>請點選這裡</button>
</div>
</body>
</html>