jQuery第1天
javascript
JavaScript 庫：由第三方開發者基於原生 JS 基礎上，封裝了不少更方便的方法，目的爲了快速開發。css
通常狀況下 JavaScript 庫，都是調用第三方封裝好的方法較多，( ) 括號 調用方法會比較多。html
-
java
-
在線API： jQuery在線APIjquery
-
W3School：W3School-jQuery教程（中文版哦）編程
-
下載jQuery：jQuery各版本下載api
-
jQurey3.0： jQuery 3.0 更新數組
官方廣告語：寫的少，作的多 。write less，do more瀏覽器
其餘特色：兼容好，隱式遍歷，鏈式編程 ...less
原生 JS 選中元素：
# 低版本瀏覽器，IE8 如下瀏覽器不支持
document.querySelector("選擇器")
jQuery 選中元素：
# 兼容所有瀏覽器
$("選擇器")
jQuery 和 Zepto
Zepto 實際上是參考 jQuery，他們兩者使用起來幾乎同樣。
jQuery 支持的瀏覽器更多，1.x.x 版本可兼容全部瀏覽器，而 Zepto 主要支持移動端。
jQuery 版本區別
目標
瞭解 jQuery 版本區別
jQuery 版本
1.x.x（推薦使用）
兼容性最好，甚至能兼容到IE6，幾乎能兼容全部 PC 端瀏覽器
2.x.x
只兼容 IE9+ 和主流瀏覽器，低版本瀏覽器不兼容
3.x.x
3.x是2.x版本的升級，2.x再也不維護了，也是隻兼容 IE9+
帶min的表明壓縮版：
發佈到線上的時候用min壓縮版，加載和讀取更快。
開發的時候帶不帶min均可以。
小結
咱們選擇哪一個jQuery版本進行開發？
1. 公司原本用哪一個jQuery版本，就直接用那個版本。
2. 若是沒有，建議用 jquery-1.12.4.min.js 版。
在引入 jQuery 的頁面中，jQuery 會佔用兩個名字。
jQuery === $ // true,徹底相等
load 事件 和 jQuery 入口函數
目標
區別 load 事件 和 jQuery 入口函數
兩者對比
共同點：
兩個事件處理函數內的代碼都會自動執行。
執行時機不一樣：
load 事件：當瀏覽器資源加載完畢後執行，圖片，外鏈文件。
jQuery 入口函數：當 頁面 DOM 加載完畢後執行。
# jQuery 入口函數 比 load 事件更早執行。
入口函數寫法
$(function(){
})
寫法2
$(document).ready(function(){
})
寫法3 瞭解
$().ready(function(){
})
引入 jQuery 文件失敗，因此報錯信息爲 $ 符號未定義。
隱式遍歷 / 隱式迭代
目標
瞭解 jQuery 隱式迭代特徵
概述
jQuery 不少方法內部都會有遍歷，直接調用便可。
$() 循環選中全部符合規則的選擇器
.on() 把全部的JQ對象遍歷添加事件
.css() jQuery內部也有遍歷
參考代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="美女1">
<input type="button" value="美女2">
<input type="button" value="美女3">
<input type="button" value="美女4">
<script src="./lib/jquery-1.12.4.js"></script>
<script>
// ---------------- 原生的寫法 ----------------
// // 1. 查找元素
// var inputs = document.querySelectorAll("input");
// // 2. 循環遍歷，才能夠給每一個 input 添加事件
// inputs.forEach(function (item, index) {
// item.addEventListener("click", function () {
// // 排他第二步，確立本身
// this.style.backgroundColor = "pink";
// })
// });
// ---------------- jQuery 的寫法 ----------------
// 1.查找元素
var $inputs = $('input');
// 2.綁定事件
$inputs.on('click',function(){
// 3.排他思想，排除其餘元素，確立本身
$(this).css("backgroundColor", "pink").siblings().css("backgroundColor", "");
})
</script>
</body>
</html>
jQuery 鏈式編程
目標
使用 jQuery 鏈式編程化簡代碼
概述
jQuery 不少方法都容許鏈式編程。
JQ對象在調用完某個 方法 後，能夠繼續調用其餘方法。
像鏈條同樣連續書寫，連續調用。
參考代碼
$("div").css("background", "red").css("width", "300px").css("height", "300px");
jQuery 修改 CSS 行內樣式
目標
學習 jQuery 修改行內樣式方法
核心方法
.css()
三種用法
用法1：修改單個樣式
.css('屬性', '值')
用法2：獲取單個屬性的值(不傳值表明獲取)
.css('屬性')
用法3：修改多個樣式(傳入樣式對象，同時修改多個)
.css({ 屬性: 值 , 屬性: 值 })
小結
修改單個樣式
.css("屬性", "值")
修改多個樣式
.css({
屬性1: "值1",
屬性2: "值2"
})
若是樣式對象的值的單位是 px，能夠直接寫成數值型數據。
單個樣式獲取
.css("屬性")
JQ 類名操做
學會 jQuery 經常使用類名操做方法
方法名
| 功能 | 方法名 | 備註 |
|---|---|---|
| 添加類 | addClass() |
功能相似 classList.add() |
| 移除類 | removeClass() |
功能相似 classList.remove() |
| 切換類 | toggleClass() |
自帶開關，添加或刪除類的綜合體 |
| 檢測是否有類 | hasClass() |
檢測是否有某個類名，布爾類型 |
鼠標移入移出事件
目標
學習 鼠標移入移出事件的其餘綁定方式
on 寫法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="美女1">
<input type="button" value="美女2">
<input type="button" value="美女3">
<input type="button" value="美女4">
<script src="./lib/jquery-1.12.4.js"></script>
<script>
// ---------------- 原生的寫法 ----------------
// // 1. 查找元素
// var inputs = document.querySelectorAll("input");
// // 2. 循環遍歷，才能夠給每一個 input 添加事件
// inputs.forEach(function (item, index) {
// item.addEventListener("click", function () {
// // 排他第二步，確立本身
// this.style.backgroundColor = "pink";
// })
// });
// ---------------- jQuery 的寫法 ----------------
// 1.查找元素
var $inputs = $('input');
// 2.綁定事件
$inputs.on('mouseover',function(){
// 3.排他思想，排除其餘元素，確立本身
$(this).css("backgroundColor", "pink").siblings().css("backgroundColor", "");
});
$inputs.on('mouseout', function(){
$inputs.css({
"backgroundColor" : "",
});
})
</script>
</body>
</html>
事件函數寫法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="美女1">
<input type="button" value="美女2">
<input type="button" value="美女3">
<input type="button" value="美女4">
<script src="./lib/jquery-1.12.4.js"></script>
<script>
// ---------------- 原生的寫法 ----------------
// // 1. 查找元素
// var inputs = document.querySelectorAll("input");
// // 2. 循環遍歷，才能夠給每一個 input 添加事件
// inputs.forEach(function (item, index) {
// item.addEventListener("click", function () {
// // 排他第二步，確立本身
// this.style.backgroundColor = "pink";
// })
// });
// ---------------- jQuery 的寫法 ----------------
// 1.查找元素
var $inputs = $('input');
// 2.綁定事件
$inputs.mouseover(function(){
// 3.排他思想，排除其餘元素，確立本身
$(this).css("backgroundColor", "pink").siblings().css("backgroundColor", "");
});
$inputs.mouseout(function(){
$inputs.css({
"backgroundColor" : "",
});
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="美女1">
<input type="button" value="美女2">
<input type="button" value="美女3">
<input type="button" value="美女4">
<script src="./lib/jquery-1.12.4.js"></script>
<script>
// ---------------- 原生的寫法 ----------------
// // 1. 查找元素
// var inputs = document.querySelectorAll("input");
// // 2. 循環遍歷，才能夠給每一個 input 添加事件
// inputs.forEach(function (item, index) {
// item.addEventListener("click", function () {
// // 排他第二步，確立本身
// this.style.backgroundColor = "pink";
// })
// });
// ---------------- jQuery 的寫法 ----------------
// 1.查找元素
var $inputs = $('input');
// 2.綁定事件
$inputs.hover(function(){
// 是 jQuery 封裝了鼠標移入移出的綜合方法，容許傳入兩個事件處理函數，
// 第一個表明鼠標移入觸發，第二個是鼠標移出觸發
$(this).css("backgroundColor", "pink").siblings().css("backgroundColor", ""); },function(){ $inputs.css("backgroundColor", ""); }) </script> </body> </html>
jQuery 選擇器
目標
學習 jQuery 選擇器
選擇器三大模塊
-
CSS選擇器 - 徹底支持 ，如
$("div"), $("#id") , $(".class") -
JQ 額外還加了一些
基本篩選器
| 選擇器 | 選擇器功能 | 備註 |
|---|---|---|
:eq(索引值) |
經過索引值選中第幾個 | 如 $("li:eq(0)") |
:even |
索引值偶數 | |
:odd |
索引值奇數 | |
:first |
第一個 | 至關於 :eq(0) |
:last |
最後一個 | 至關於 :eq(-1) |
-
選擇器的方法 - 父子兄
經過方法形式調用，方法記得帶括號。
| 功能 | 方法名 | 備註 |
|---|---|---|
| 父 | .parent() |
父級就只有一個 |
| 子 | .children() |
可選傳入參數，篩選孩子 |
| 兄 | .siblings() |
可選傳入參數，篩選兄弟 |
| 祖先 | .parents("選擇器") |
必傳，祖先必定要傳入選擇器 |
| 後代 | .find("選擇器") |
必傳，查找後代，也須要傳入 |
| 選中第幾個 | .eq(索引值) |
功能和 :eq() 同樣 |
小結
jQuery 選擇器特色？
功能強大，靈活，兼容好。
案例練習
1.點擊按鈕變換盒子顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
input {
margin: 20px;
}
div {
background-color: pink;
width: 100px;
height: 100px;
transition: all .4s;
margin: 20px;
}
.current {
background-color: lightgreen;
width: 200px;
height: 200px;
}
</style>
<!-- 1. 引入 jQuery 核心庫 -->
<script src="./lib/jquery-1.12.4.js"></script>
<!-- 2. 新建 script 寫業務邏輯 -->
<script>
// 3. jQuery 入口函數，業務代碼寫到入口函數內部
$(function () {
// 查找元素
var $input = $('input');
var $boxs = $('div');
// 開關思想
var flag = true
// 綁定事件
$input.on('click', function(){
// 點擊後給div們增長current類
if(flag){
$boxs.addClass('current');
flag = false;
}else{
$boxs.removeClass('current');
flag = true;
}
})
});
</script>
</head>
<body>
<input type="button" value="點我修改/還原盒子樣式">
<div></div>
<div></div>
</body>
</html>
2.點擊按鈕變換盒子顏色經過toggle實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
input {
margin: 20px;
}
div {
background-color: pink;
width: 100px;
height: 100px;
transition: all .4s;
margin: 20px;
}
.current {
background-color: lightgreen;
width: 200px;
height: 200px;
}
</style>
<!-- 1. 引入 jQuery 核心庫 -->
<script src="./lib/jquery-1.12.4.js"></script>
<!-- 2. 新建 script 寫業務邏輯 -->
<script>
// 3. jQuery 入口函數，業務代碼寫到入口函數內部
$(function () {
// 查找元素
var $input = $('input');
var $boxs = $('div');
// 開關思想
$input.on('click', function(){
// toggleClass()方法在內部就判斷$boxs是否有current這個類，若是有就刪除,沒有就添加
$boxs.toggleClass('current');
})
});
</script>
</head>
<body>
<input type="button" value="點我修改/還原盒子樣式">
<div></div>
<div></div>
</body>
</html>
3.唱大戲jQuery版本
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.container {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.container li {
float: left;
margin: 0 10px 10px 0;
transition: all .4s;
}
.container li img {
display: block;
border: 0;
}
.tuise {
opacity: 0.2;
transform: rotate(30deg);
}
</style>
<!-- <script>
// load 瀏覽器加載事件
window.addEventListener("load", function () {
// 1. 查找元素
var lis = document.querySelectorAll("li");
// 2. 遍歷僞數組
lis.forEach(function (item) {
// 2.1 給僞數組的每一個li添加鼠標移入事件
item.addEventListener("mouseover", function () {
// 1. 排除全部
lis.forEach(function (item) {
item.style.opacity = "0.2";
});
// 2. 確立當前
this.style.opacity = "1";
});
// 2.2 給僞數組的每一個li添加鼠標移出事件
item.addEventListener("mouseout", function () {
// 遍歷僞數組
lis.forEach(function (item) {
// 把遍歷的每一個 li 設置成不透明
item.style.opacity = "1";
});
});
});
});
</script> -->
<!-- 1. 引入 jQuery 核心庫 -->
<script src="./lib/jquery-1.12.4.js"></script>
<!-- 2. 新建 script 寫業務邏輯 -->
<script>
// 3. jQuery 入口函數，業務代碼寫到入口函數內部
$(function () {
// 查找元素
var $lis = $('li');
$lis.on('mouseover', function(){
// 排除全部，確立當前
$(this).removeClass('tuise').siblings().addClass('tuise');
});
$lis.on('mouseout', function(){
// 排除全部，確立當前
$lis.removeClass('tuise');
})
});
</script>
</head>
<body>
<div class="wrap">
<ul class="container">
<li><a href="#"><img src="img/01.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/02.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/03.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/04.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/05.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/06.jpg" alt="" /></a></li>
</ul>
</div>
</body>
</html>
效果
4.jQ實現下拉菜單
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
}
.wrap li {
background-color: hotpink;
}
.wrap>ul>li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<!-- 1. 引入 jQuery 核心庫 -->
<script src="./lib/jquery-1.12.4.js"></script>
<!-- 2. 新建 script 寫業務邏輯 -->
<script>
// 3. jQuery 入口函數，業務代碼寫到入口函數內部
$(function () {
// 查找元素，子代選擇器，只查找親兒子
var $lis = $('.nav > li');
// 綁定事件，鼠標移上去就顯示
$lis.on('mouseover', function(){
// 給當前元素的ul孩子標籤設置樣式
$(this).children('ul').css("display", "block")；
});
$lis.on('mouseout', function(){
// 鼠標移出就隱藏
$lis.children('ul').css('display', 'none');
})
});
</script>
</head>
<body>
<div class="wrap">
<ul class="nav">
<li>
<a href="javascript:;">一級菜單1</a>
<ul class="ul">
<li><a href="javascript:;">二級菜單11</a></li>
<li><a href="javascript:;">二級菜單12</a></li>
<li><a href="javascript:;">二級菜單13</a></li>
</ul>
</li>
<li>
<a href="javascript:;">一級菜單2</a>
<ul>
<li><a href="javascript:;">二級菜單21</a></li>
<li><a href="javascript:;">二級菜單22</a></li>
<li><a href="javascript:;">二級菜單23</a></li>
</ul>
</li>
<li>
<a href="javascript:;">一級菜單3</a>
<ul>
<li><a href="javascript:;">二級菜單31</a></li>
<li><a href="javascript:;">二級菜單32</a></li>
<li><a href="javascript:;">二級菜單33</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
效果
5.jQ實現下拉菜單hover方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
}
.wrap li {
background-color: hotpink;
}
.wrap>ul>li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<!-- 1. 引入 jQuery 核心庫 -->
<script src="./lib/jquery-1.12.4.js"></script>
<!-- 2. 新建 script 寫業務邏輯 -->
<script>
// 3. jQuery 入口函數，業務代碼寫到入口函數內部
$(function () {
// 查找元素，子代選擇器，只查找親兒子
var $lis = $('.nav > li');
// 綁定事件，hover方法內部封裝了鼠標移入和鼠標移出事件
$lis.hover(function(){
// toggle方法內部判斷若是子元素ul爲隱藏狀態就顯示，不然就隱藏
$(this).children('ul').toggle();
})
});
</script>
</head>
<body>
<div class="wrap">
<ul class="nav">
<li>
<a href="javascript:;">一級菜單1</a>
<ul class="ul">
<li><a href="javascript:;">二級菜單11</a></li>
<li><a href="javascript:;">二級菜單12</a></li>
<li><a href="javascript:;">二級菜單13</a></li>
</ul>
</li>
<li>
<a href="javascript:;">一級菜單2</a>
<ul>
<li><a href="javascript:;">二級菜單21</a></li>
<li><a href="javascript:;">二級菜單22</a></li>
<li><a href="javascript:;">二級菜單23</a></li>
</ul>
</li>
<li>
<a href="javascript:;">一級菜單3</a>
<ul>
<li><a href="javascript:;">二級菜單31</a></li>
<li><a href="javascript:;">二級菜單32</a></li>
<li><a href="javascript:;">二級菜單33</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
6.jQ實現點擊關閉廣告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
width: 300px;
height: 100px;
background-color: pink;
position: relative;
margin: 20px;
}
.son {
width: 30px;
line-height: 30px;
background-color: skyblue;
text-align: center;
position: absolute;
right: -30px;
top: 0;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 父盒子是廣告分區， son 是關閉按鈕 -->
<div class="father">
父級廣告1
<div class="son">
x
</div>
</div>
<div class="father">
父級廣告2
<div class="son">
x
</div>
</div>
<div class="father">
父級廣告3
<div class="son">
x
</div>
</div>
<div class="father">
父級廣告4
<div class="son">
x
</div>
</div>
</body>
</html>
<script>
// // 需求：點擊關閉按鈕，關閉對應的父元素廣告
// 1. 查找元素
// var sons = document.querySelectorAll(".son");
// // 1. 循環遍歷全部的 son 元素
// for(var i=0; i<sons.length; i++){
// // 2. 循環內部給每一個 son 元素添加點擊事件
// sons[i].onclick = function(){
// // 3. this 表明當前點擊的這個元素，經過 parentNode 查找到對應父級，關閉
// this.parentNode.style.display = "none";
// }
// }
</script>
<!-- 1. 引入 jQuery 核心庫 -->
<script src="./lib/jquery-1.12.4.js"></script>
<!-- 2. 新建 script 寫業務邏輯 -->
<script>
// 3. jQuery 入口函數，業務代碼寫到入口函數內部
$(function () {
// 查找全部類名爲son的元素
var $sons = $('.son');
$sons.on('click', function(){
// 找當前元素的父元素隱藏就完事了
$(this).parent().hide();
})
});
</script>
效果
相關文章
- 1. 04JS第14天 ----- jquery第3天
- 2. 第1天：Javadoc
- 3. JQuery第五天之JQuery動畫
- 4. jQuery學習第一天
- 5. 鋒利Jquery 第一天
- 6. Jquery($第一天)【歷史】
- 7. 《第31天：JQuery - 輪播圖》
- 8. JQUERY選擇器第一天
- 9. jQuery總結第一天
- 10. 1024天軍訓第1天
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • Github 簡明教程
- • 算法總結-股票買賣
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 04JS第14天 ----- jquery第3天
- 2. 第1天：Javadoc
- 3. JQuery第五天之JQuery動畫
- 4. jQuery學習第一天
- 5. 鋒利Jquery 第一天
- 6. Jquery($第一天)【歷史】
- 7. 《第31天：JQuery - 輪播圖》
- 8. JQUERY選擇器第一天
- 9. jQuery總結第一天
- 10. 1024天軍訓第1天