jQuery:JavaScript庫,即 library，是一個封裝好的特定的集合（方法和函數）。設計的宗旨是“write Less，Do More”
優點:
-
輕量級。核心文件才幾十kb，不會影響頁面加載速度。
-
跨瀏覽器兼容，基本兼容了現在主流的瀏覽器。
-
鏈式編程、隱式迭代。
-
對事件、樣式、動畫支持，大大簡化了DOM操作。
-
支持插件擴展開發。有着豐富的第三方的插件，例如：樹形菜單、日期控件、輪播圖等。
-
免費、開源。
jQuery入口函數
//簡單易用 $(function(){ ... // 此處是頁面 DOM 加載完成的入口 }); //繁瑣方法 $(document).ready(function(){ ... // 此處是頁面 DOM 加載完成的入口 }) /* 總結： 1. 等着 DOM 結構渲染完畢即可執行內部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。 2. 相當於原生 js 中的 DOMContentLoaded。 3. 不同於原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執行內部代碼。 4. 更推薦使用第一種方式。 */$ jQuery的頂級對象
-
$是 jQuery 的別稱，在代碼中可以使用 jQuery 代替，但一般爲了方便，通常都直接使用 $ 。
-
$是jQuery的頂級對象，相當於原生JavaScript中的 window。把元素利用$包裝成jQuery對象，就可以調用jQuery 的方法。
-
jQuery對象和DOM對象
-
用原生 JS 獲取來的對象就是 DOM 對象
-
jQuery 方法獲取的元素就是 jQuery 對象。
-
jQuery 對象本質是： 利用$對DOM 對象包裝後產生的對象（僞數組形式存儲）。
jQuery對象和DOM對象的轉換
<button>點擊</button>
<script>
var btn = document.querySelector('button');
console.log(btn instanceof Element);//true
// 把DOM對象轉換爲 jQuery 對象
console.log($(btn) instanceof jQuery);//true
console.log($('button') instanceof jQuery);//true
// 2.jQuery 對象轉換爲 DOM 對象有兩種方法：
// 2.1 jQuery對象[索引值]
console.log($('button')[0] instanceof Element);//true
// 2.2 jQuery對象.get(索引值)
console.log($('button').get(0) instanceof Element);//true
</script>
/*
總結：實際開發比較常用的是把DOM對象轉換爲jQuery對象，這樣能夠調用功能更加強大的jQuery中的方法。
*/
基礎選擇器
$("選擇器") // 裏面選擇器直接寫 CSS 選擇器即可，但是要加引號
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $("#id") | 獲取指定的ID的元素 |
| 全選選擇器 | $("*") | 匹配所有元素 |
| 類選擇器 | $(".class") | 獲取同一類名的元素 |
| 標籤選擇器 | $("div") | 獲取同一標籤的元素 |
| 並集選擇器 | $("div,p,li") | 獲取多個元素 |
| 交集選擇器 | $("li.current") | 交集元素(例如類名是current的li標籤) |
層次選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| 子代選擇器 | $("ul>li") | 使用>號,獲取親兒子層級的元素,注意並不會獲取孫子層級的元素 |
| 後代選擇器 | $("ul li") | 使用空格,代表後代選擇器,獲取後代選擇器,獲取ul下的所有li元素,包括孫子 |
基礎選擇器和層級選擇器案例代碼
<div>我是div</div>
<div class="nav">我是nav div</div>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(".nav").css('color', 'yellow')
$(function () {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
篩選選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| :first | $("li:first") | 獲取第一個li元素 |
| :last | $("li:last") | 獲取最後一個li元素 |
| :eq(index) | $("li:eq(index)") | 獲取到li元素中索引號是index的元素,索引號從0開始 |
| :odd | $("li:odd") | 獲取帶li元素中所有的索引號爲奇數的元素 |
| :even | $("li:even") | 獲取帶li元素中所有的索引號爲偶數的元素 |
案例
<ol>
<li>ol的1li</li>
<li>ol的2li</li>
<li>ol的3li</li>
<li>ol的4li</li>
<li>ol的5li</li>
<li>ol的6li</li>
</ol>
<ul>
<li>ul的1li</li>
<li>ul的2li</li>
<li>ul的3li</li>
<li>ul的4li</li>
<li>ul的5li</li>
<li>ul的6li</li>
</ul>
<script>
$('ol li:first').css('color', 'green')//第一個
$("ol li:eq(3)").css('color', 'gold')//eq(索引號),索引號從0 開始
$('ol li:last').css('color', 'red')//最後一個
$('ul li:odd').css('background-color', 'red')//奇數
$('ul li:even').css('background-color', 'green')//偶數
</script>
jQuery中還有一些篩選方法，類似DOM中的通過一個節點找另外一個節點，父、子、兄以外有所加強。
| 語法 | 用法 | 說明 |
|---|---|---|
| parent() | $('li').parent() | 查找父級,獲取到的是上一級(獲取到親生父親,無法獲取爺爺) |
| children(selector) | $('ul').children('li') | 相當於$('ul>li')獲取親兒子層級的元素,注意並不會獲取孫子層級的元素 |
| find(selector) | $('ul').find('li') | 相當於$('ul li')獲取到的是ul下的所有的li |
| siblings(selector) | $('.first').siblings('li') | 獲取到l類名是first的li元素所有的兄弟元素 |
| nextAll() | $('.first').nextAll() | 獲取到l類名是first的li元素後面所有的同輩元素 |
| prevAll() | $('.last').prevAll() | 獲取到l類名是last的li元素前面所有的同輩元素 |
| next() | $('.first').next() | 獲取到l類名是first的li元素後面第一個的同輩元素 |
| prev() | $('.last').prev() | 獲取到l類名是last的li元素前面第一個的同輩元素 |
| hasClass(class) | $('div').hasClass('className') | 返回的是布爾值,判斷div是否含有某個類名 |
| eq(index) | $('li'):eq(index) | 獲取到li元素中索引號是index的元素,索引號從0開始 |
案例
<div class="grandfather">
<div class="father">
<div class="son">兒子</div>
</div>
</div>
<div class="nav">
<p>我是P1</p>
<div>
<p>我是p2</p>
</div>
</div>
<script>
// 注意一下都是方法 帶括號
$(function () {
// 1. 父 parent() 返回的是 最近一級的父級元素 親爸爸
console.log($('.son').parent());
// 2. 子
// (1) 親兒子 children() 類似子代選擇器 ul>li
// $(".nav").children("p").css("color", "red");
// (2) 可以選裏面所有的孩子 包括兒子和孫子 find() 類似於後代選擇器
$(".nav").find("p").css("color", "red");
})
</script>
jQuery設置樣式
$('div').css('屬性', '值')
jQuery排他思想
<body>
<button>排他</button>
<button>排他</button>
<button>排他</button>
<script>
$(function () {
// 隱式迭代給每一個button添加了點擊事件
$('button').click(function () {
// 給當前點擊的元素添加背景顏色
// console.log($(this).index()); //獲取當前點擊按鈕的索引號
$(this).css('background', 'green');
// 當前點擊的元素的所有兄弟元素去掉背景色
$(this).siblings('button').css('background', '')
})
})
</script>
jQuery隱式迭代
// 遍歷內部 DOM 元素（僞數組形式存儲）的過程就叫做隱式迭代。
// 簡單理解：給匹配到的所有元素進行循環遍歷，執行相應的方法，而不用我們再進行循環，簡化我們的操作，方便我們調用。
$('div').hide(); // 頁面中所有的div全部隱藏，不用循環操作
jQuery鏈式編程
<script src="./jquery.min.js"></script>
<script>
// 入口函數
$(function () {
$('button').click(function () {
// 給當前這個元素添加背景色同樣給他的所有兄弟元素設置其他顏色
$(this)
.css('background', 'pink')
.css('color', 'green')
.siblings()
.css('background', 'green')
.css('color', 'pink');
// 給當前這個元素的的兄弟元素設置字體顏色
// $(this).siblings().css('color','green');
})
})
</script>
</head>
<body>
<button>排他</button>
<button>排他</button>
<button>排他</button>
</body>
jQuery操作css方法
//獲取設置css樣式
<script>
// 入口函數
$(function () {
//返回字符串,當前設置的寬度帶單位
console.log($('div').css('width'));
// 多個屬性樣式的情況下的語法 .css({'key':'value','key':'value',...})
$('div').css({
// 如果是複合屬性不加引號的時候必須採用駝峯命名,如果值不是數字就必須加引號
// 'background-color': 'gray',
backgroundColor: 'yellow',
width: '100px',
border: '1px solid black'
})
})
//設置刪除切換類
// 1.添加類
$("div").addClass("current");
// 2.刪除類
$("div").removeClass("current");
// 3.切換類
$("div").toggleClass("current");
</script>
jQuery效果
-
顯示隱藏：show() / hide() / toggle() ;
-
劃入畫出：slideDown() / slideUp() / slideToggle() ;
-
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
-
自定義動畫：animate() ;
注意：
動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。
jQuery爲我們提供另一個方法，可以停止動畫排隊：stop() ;
顯示隱藏: show() / hide() / toggle()
show/hide/toggle(speed,[easing],[fn])
1.參數都可以省略,無動畫直接顯示(隱藏)
2.speed:三種預定速度之一的字符串("slow","normal","fast")或表示動畫時長的毫秒數值
3.[easing]:(Optional)用來切換效果.默認是會"swing"可用參數"linear"
4.[fn]:回調函數,在動畫完成時執行的函數,每個元素執行一次
案例
<style>
div {
width: 150px;
height: 200px;
background-color: red;
}
</style>
<script src="./jquery.min.js"></script>
<script>
// 入口函數
$(function () {
// 點擊第一個按鈕以後盒子顯示 時間是1秒
$('button').eq(0).click(function () {
$('div').show('1000'); //顯示
})
// 點擊第二個按鈕以後盒子隱藏 時間是1秒
$('button').eq(1).click(function () {
$('div').hide('1000'); //隱藏
})
// 點擊第三個按鈕以後盒子切換顯示 時間是1秒
$('button').eq(2).click(function () {
$('div').toggle('1000'); //切換
})
})
</script>
</head>
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
滑入滑出:slideDown() / slideUp() / slideToggle()
slideDown/ slideUp/ slideToggle(speed,[easing],[fn])
1.參數都可以省略
2.speed:三種預定速度之一的字符串("slow","normal","fast")或表示動畫時長的毫秒數值
3.[easing]:(Optional)用來切換效果.默認是會"swing"可用參數"linear"
4.[fn]:回調函數,在動畫完成時執行的函數,每個元素執行一次
案例
<style>
div {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
<script src="./jquery.min.js"></script>
<script>
// 入口函數
$(function () {
// 上拉滑動
$('button:eq(0)').click(function () {
$('div').slideUp()
})
// 下拉滑動
$('button:eq(1)').click(function () {
$('div').slideDown(500)
})
// 切換滑動
$('button:eq(2)').click(function () {
$('div').slideToggle(500)
})
})
</script>
</head>
<body>
<button>上拉滑動</button>
<button>下拉滑動</button>
<button>切換滑動</button>
<div></div>
淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
fadeIn/ fadeOut/ fadeToggle([speed,[easing],[fn]])
1.參數都可以省略
2.speed:三種預定速度之一的字符串("slow","normal","fast")或表示動畫時長的毫秒數值
3.[easing]:(Optional)用來切換效果.默認是會"swing"可用參數"linear"
4.[fn]:回調函數,在動畫完成時執行的函數,每個元素執行一次
fadeTo([speed,Opacity,[easing],[fn]])
1.Opacity:透明度,取值0~1之間(必須寫)
2.speed:三種預定速度之一的字符串("slow","normal","fast")或表示動畫時長的毫秒數值(必須寫)
3.[easing]:(Optional)用來切換效果.默認是會"swing"可用參數"linear"
4.[fn]:回調函數,在動畫完成時執行的函數,每個元素執行一次
案例
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切換</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
// 淡入淡出切換 fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
// 修改透明度 fadeTo() 這個速度和透明度要必須寫
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
自定義動畫:animate
animate(params,[speed],[easing],[fn])
1.params:想要更改的樣式屬性,以對象的形式傳遞,必須寫.屬性名可以不用帶引號,如果是符合屬性則需要採取駝峯命名法,例如backgroundColor
2.speed:三種預定速度之一的字符串("slow","normal","fast")或表示動畫時長的毫秒數值
3.[easing]:(Optional)用來切換效果.默認是會"swing"可用參數"linear"
4.[fn]:回調函數,在動畫完成時執行的函數,每個元素執行一次
案例
<body>
<button>動起來</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
停止動畫排隊:stop()
-
stop() 方法用於停止動畫或效果。
-
stop() 寫到動畫或者效果的前面， 相當於停止結束上一次的動畫。
總結: 每次使用動畫之前，先調用 stop() ,在調用動畫。
案例
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
margin-top: 100px;
float: left;
margin-left: 10px;
width: 50px;
height: 50px;
background-color: green;
}
</style>
<script src="./jquery.min.js"></script>
<script>
// 入口函數
$(function () {
$('ul li').hover(function () {
$(this).stop().animate({
width: 100
}, 200)
}, function () {
$(this).stop().animate({
width: 50
}, 200)
})
})
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
jQuery屬性操作
元素固有屬性prop(),更適合操作表單屬性：disabled / checked / selected 等。
//獲取語法
prop('屬性')
//設置語法
prop('屬性','屬性值)
元素自定義元素attr().用戶自己給元素添加的屬性，我們稱爲自定義屬性。 比如給 div 添加 index =“1”。
//獲取語法
attr('屬性')//類似原生的getAttribute()
//設置語法
attr('屬性','屬性值)//類似原生的setAttribute()
// 注意：attr() 除了普通屬性操作，更適合操作自定義屬性。（該方法也可以獲取 H5 自定義屬性）
數據緩存data()
//獲取語法
data('name')//向被選元素獲取數據
//設置語法
data('name','value')//向被選元素附加數據
// 注意：同時，還可以讀取 HTML5 自定義屬性 data-index ，得到的是數字型。
案例
<script src="./jquery.min.js"></script>
<script>
// jq中的API一個參數數獲取,兩個參數是設置 input相關的(checked disabled selected)值是布爾值
// prop 固有屬性(內置屬性) 獲取或設置
// attr 自定義屬性 獲取或設置
// data 忽略 ,不要用,容易出問題 出現獲取不到jQuery的值
// 入口函數
$(function () {
// 獲取 布爾值
console.log($('input').prop('checked'));
// 設置
$('input').prop('checked', false)
console.log($('div').attr('data-index'));
$('div').attr('data-index', '100')
})
</script>
</head>
<body>
<a href="www.baidu.com" title="Hello World">
你好
</a>
<input type="checkbox" name="" id="" >
<div index="1" data-index="2">div盒子</div>
<span data-a="a">123</span>
</body>
演示代碼
<body>
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
//1. element.prop("屬性名") 獲取元素固有的屬性值
console.log($("a").prop("href"));
$("a").prop("title", "我們都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// console.log($("div").prop("index"));
// 2. 元素的自定義屬性 我們通過 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 數據緩存 data() 這個裏面的數據是存放在元素的內存裏面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 這個方法獲取data-index h5自定義屬性 第一個 不用寫data- 而且返回的是數字型
console.log($("div").data("index"));
})
</script>
</body>
jQuery文本屬性
常見操作有三種：html() / text() / val() ; 分別對應JS中的 innerHTML 、innerText 和 value 屬性，主要針對元素的內容還有表單的值操作.
1.普通元素內容html()(相當與原生的innerHTML)
html()//獲取元素內容
html("內容")//設置元素的內容
1.普通元素內容text()(相當與原生的innerText)
text()//獲取元素內容
text("內容")//設置元素的內容
1.普通元素內容val()(相當與原生的value)
val()//獲取表單的值
val("內容")//設置表單的值
案例
<body>
<div>
<span>我是內容</span>
</div>
<input type="text" value="請輸入內容">
<script>
// 1. 獲取設置元素內容 html()
console.log($("div").html());
// $("div").html("123");
// 2. 獲取設置元素文本內容 text()
console.log($("div").text());
$("div").text("123");
// 3. 獲取設置表單值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>
jQuery元素操作
遍歷元素
//1. each(方法遍歷匹配的每一個元素。主要用DOM處理。each 每個
//2.裏面的回調函數有2個參數: index 是每個元素的索引號; demEle 是每個DOM元素對象，不是jquery對象
//3.所以要想使用jquery方法，需要給這個dom元素轉換爲jquery對敘$(domEle)
$('div').each(function(index,domEle){...})
//1. S.each0方法可用於遍歷任何對象。主要用於數據處理，比如數組，對象
//2, 裏面的國數有2個參數: index 是每個元素的索引號;element遍歷內容
注意:此方法用於遍歷jQuery對象中的每一項，回調函數中元素爲DOM對象，想
$.each(object,function(index,element)(...))
案例
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// 如果針對於同一類元素做不同操作，需要用到遍歷元素（類似for，但是比for強大）
var sum = 0;
var arr = ["red", "green", "blue"];
// 1. each() 方法遍歷元素
$("div").each(function(i, domEle) {
// 回調函數第一個參數一定是索引號 可以自己指定索引號號名稱
// console.log(i);
// 回調函數第二個參數一定是 dom 元素對象，也是自己命名
// console.log(domEle); // 使用jQuery方法需要轉換 $(domEle)
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍歷元素 主要用於遍歷數據，處理數據
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 輸出的是 name age 屬性名
console.log(ele); // 輸出的是 andy 18 屬性值
})
})
</script>
</body>
創建,添加,刪除
1.創建
$("<li></i>");//動態的創建了-一個<li>
2.1.內部添加
element.append("內客")
//把內容放入匹配元素內部最後面，類似原生appendChild.element.prepend("內容")
element.prepend("內客")
//把內客放入匹配元素內部最前面。
2.2.外部添加
element.after("內容")//把內容放入目標元素前面,類似原生appendChild
element.before("內容") //把內容放入目標元素前面
2.2.1.內部添加元素，生成之後，它們是父子關係。
2.2.2.外部添加元素，生成之後，他們是兄弟關係，
3.刪除元素
element.remove()// 刪除匹配的元素(本身)
element.empty()// 刪除匹配的元素集合中所有的子節點
element.html("")// 清空匹配的元素內容
3.1remove()刪除元素本身
3.2.empt() 和html(")" 作用等價，都可以刪除元表裏面的內容，只不過html還可以設置內容
注意:以上只是元素的創建、添加、刪除方法的常用方法，其他方法請參詳API。
案例
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 創建元素
var li = $("<li>我是後來創建的li</li>");
// 2. 添加元素
// 2.1 內部添加
// $("ul").append(li); 內部添加並且放到內容的最後面
$("ul").prepend(li); // 內部添加並且放到內容的最前面
// 2.2 外部添加
var div = $("<div>我是後媽生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 刪除元素
// $("ul").remove(); 可以刪除匹配的元素 自殺
// $("ul").empty(); // 可以刪除匹配的元素裏面的子節點 孩子
$("ul").html(""); // 可以刪除匹配的元素裏面的子節點 孩子
})
</script>
</body>
jQuery尺寸操作
| 語法 | 用法 |
|---|---|
| width()/height() | 取得匹配元素寬度和高度的值 只算width/height |
| innerWidth()/innerHeight() | 取得匹配元素寬度和高度的值 包含padding |
| outerWidth()/outerHeight() | 取得匹配元素寬度和高度的值 包含padding border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素寬度和高度的值 包含padding , border , margin |
以上參數爲空,獲取的是相應的值,返回值是數字型
如果參數爲數字,修改的是相應的值
參數可以不必寫單位
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 獲取設置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 獲取設置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 獲取設置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 獲取設置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
jQuery位置操作
jQuery的位置操作主要有三個： offset()、position()、scrollTop()/scrollLeft()
-
語法 用法 offset() 設置或獲取元素偏移 1.offset()方法設置或返回被選元素相對於文檔的便宜座標,跟父級沒有關係2.該方法有兩個屬性left,top.offset().top(left)獲取的是距離文檔頂部(左側)的距離3.可以設置元素的偏移:offset({top:10,left:30}) position() 獲取元素偏移 1.position()方法用於返回被選元素相對於帶有定位的父級偏移座標,如果父級沒有定位,則以文檔爲準2.該方法有兩個屬性left,top.positiont().top(left)獲取的是距離帶有定位的父級頂部(左側)的距離3.該方法只能獲取 scrollTop()/scrollLeft() 設置或獲取元素被捲去的頭部和左側 1.scrollTop()/scrollLeft()方法設置或返回被選元素被捲去的頭部2.不跟參數是獲取,參數爲不帶單位的數字則是被捲去的頭部 <body> <div class="father"> <div class="son"></div> </div> <div class="back">返回頂部</div> <div class="container"></div> <script> $(function() { // 1. 獲取設置距離文檔的位置（偏移） offset console.log($(".son").offset()); console.log($(".son").offset().top); // $(".son").offset({ // top: 200, // left: 200 // }); // 2. 獲取距離帶有定位父級位置（偏移） position 如果沒有帶有定位的父級，則以文檔爲準 // 這個方法只能獲取不能設置偏移 console.log($(".son").position()); // $(".son").position({ // top: 200, // left: 200 // }); // 3. 被捲去的頭部 $(document).scrollTop(100); // 被捲去的頭部 scrollTop() / 被捲去的左側 scrollLeft() // 頁面滾動事件 var boxTop = $(".container").offset().top; $(window).scroll(function() { // console.log(11); console.log($(document).scrollTop()); if ($(document).scrollTop() >= boxTop) { $(".back").fadeIn(); } else { $(".back").fadeOut(); } }); // 返回頂部 $(".back").click(function() { // $(document).scrollTop(0); $("body, html").stop().animate({ scrollTop: 0 }); // $(document).stop().animate({ // scrollTop: 0 // }); 不能是文檔而是 html和body元素做動畫 }) }) </script> </body>jQuery事件註冊 -
優點: 操作簡單，且不用擔心事件覆蓋等問題。
-
缺點: 普通的事件註冊不能做事件委託，且無法實現事件解綁，需要藉助其他方法。
語法
element.事件(function(){}) $('div').click(function(){ //事件處理程序 })案例
<body> <div></div> <script> $(function() { // 1. 單個事件註冊 $("div").click(function() { $(this).css("background", "purple"); }); $("div").mouseenter(function() { $(this).css("background", "skyblue"); }); }) </script> </body>jQuery事件處理
-
on(): 用於事件綁定，目前最好用的事件綁定方法
-
off(): 事件解綁
-
trigger() / triggerHandler(): 事件觸發
事件處理on()綁定事件
//優點1:可以綁定多個事件,多個處理事件處理程序 $('div').on({ 'click', function () { console.log('456');}, 'mouseleave', function () {console.log('789');},}) // 優點2: on可以實現事件委派/事件委託 // 事件委託:原來加載子元素身上的事件綁定在父元素身上,就是把事件委派給父元素 $("ul").on("click", "li", function () { console.log(this); //this指向的是li console.log($(this).index()); }) // 優點3: on可以給動態添加的元素綁定事件 var li = '<li>事件委派/事件委託</li>'; $('ol').append(li) $('ol').on("click", "li", function () { console.log(this); //this指向的是li console.log($(this).index()); })事件處理off()解綁事件
$(function () { /* 優點: 操作簡單，且不用擔心事件覆蓋等問題。 缺點: 普通的事件註冊不能做事件委託，且無法實現事件解綁，需要藉助其他方法。 */ // 給同一個元素綁定多個事件 鏈式編程 $('div').on('click', function () { console.log('456'); }) .on('mouseleave', function () { console.log('789'); }) //給同一個元素綁定多個事件,這多喝事件做的事情是一樣的的(回調函數是一樣) $('div').on('mouseenter mouseleave', function () { $(this).toggleClass('current') }) // 優點2: on可以實現事件委派/事件委託 // 事件委託:原來加載子元素身上的事件綁定在父元素身上,就是把事件委派給父元素 $("ul").on("click", "li", function () { console.log(this); //this指向的是li console.log($(this).index()); }) // 優點3: on可以給動態添加的元素綁定事件 var li = '<li>事件委派/事件委託</li>'; $('ol').append(li) $('ol').on("click", "li", function () { console.log(this); //this指向的是li console.log($(this).index()); }) $('div').off(' mouseleave') $('ul').off('click') //不能寫到li //如果有的事件只想觸發一次,可以使用one()來綁定事件 // 只能執行一次 $("ul").one("click", "li", function () { console.log(this); //this指向的是li console.log($(this).index()); }) }) </script> </head> <body> <div></div> <ul> <li>事件委派/事件委託</li> <li>事件委派/事件委託</li> <li>事件委派/事件委託</li> <li>事件委派/事件委託</li> <li>事件委派/事件委託</li> </ul> <ol></ol> 事件處理 trigger() 自動觸發事件
自動觸發事件 trigger() 和 triggerHandler() ;
語法
//第一種 tigger() element.click()//第一種簡寫形式 element.tigger('type')//第二種自動觸發模式 //第二種 tiggerHandler() 不會觸發元素的默認行爲 element.tiggerHandler(type) //第三種自動觸發模式案例
<style> div { width: 100px; height: 100px; background-color: pink; } </style> <script src="jquery.min.js"></script> <script> $(function () { $("div").on("click", function () { alert(11); }); // 自動觸發事件 // 1. 元素.事件() // $("div").click();會觸發元素的默認行爲 // 2. 元素.trigger("事件") // $("div").trigger("click");會觸發元素的默認行爲 $("input").trigger("focus"); // 3. 元素.triggerHandler("事件") 就是不會觸發元素的默認行爲 $("div").triggerHandler("click"); $("input").on("focus", function () { $(this).val("你好嗎"); }); // $("input").triggerHandler("focus"); $('a').triggerHandler() }); </script> </head> <body> <div></div> <input type="text"> <a href="www.baidu.com"> 百度一下</a> </body>jQuery事件對象
語法
element.on(events,[selector],function(event){}) //阻止默認行爲:event.preventDefault() 或者 return false //阻止冒泡: event.stopPropagation()案例
<body> <div></div> <script> $(function() { $(document).on("click", function() { console.log("點擊了document"); }) $("div").on("click", function(event) { // console.log(event); console.log("點擊了div"); event.stopPropagation(); }) }) </script> </body>jQuery拷貝對象
語法
$.extend([deep],target,object1,[objectN])
-
deep:如果設爲true爲深拷貝，默認爲false 淺拷貝
-
target:要拷貝的目標對象
-
object1:待拷貝到第一個對象的對象。
-
objectN:待拷貝到第N個對象的對象。
5.淺拷貝目標對象引用的被拷貝的對象地址，修改目標對象會影響被拷貝對象。6.深拷貝，前面加true,完全克隆，修改目標對象不會影洞被拷貝對象。
案例
<script> $(function() { // 1.合併數據 var targetObj = {}; var obj = { id: 1, name: "andy" }; // $.extend(target, obj); $.extend(targetObj, obj); console.log(targetObj); // 2. 會覆蓋 targetObj 裏面原來的數據 var targetObj = { id: 0 }; var obj = { id: 1, name: "andy" }; // $.extend(target, obj); $.extend(targetObj, obj); console.log(targetObj); }) </script> -
-