前端jQurey
2020-09-15 03:15:18 企業開發
目錄
- 1.楔子
- 2.jqeury介紹
- 2.1為什么要使用jQuery
- 2.2jQuery 的兩大特點
- 2.3什么是 jQuery
- 3.jQuery的使用
- 3.1使用 jQuery 的基本步驟
- 3.2jQuery 的入口函式和 $ 符號
- 3.2.1入口函式（重要）
- 3.2.2jQuery的 $ 符號
- 4.js中的DOM物件 和 jQuery物件比較（重點，難點）
- 5.jQuery查找標簽
- 6.jQuery操作標簽
- 6.1標簽內文本操作
- 6.2檔案標簽操作
- 6.2.1插入標簽
- 6.2.2洗掉標簽 remove、detach和empty
- 6.2.3修改標簽 replaceWith和replaceAll
- 6.2.4克隆標簽 clone
- 6.3屬性操作
- 6.3.1attr() 設定屬性值、者獲取屬性值
- 6.3.2removeAttr() 移除屬性
- 6.3.3prop()
- 6.4class類屬性
- 6.4.1addClass添加類名
- 6.4.2removeClass移除類名
- 6.4.3toggleClass類的切換
- 6.5val 表單控制元件value屬性
- 6.6css樣式
- 6.7盒子樣式屬性
- 6.7.1內容 : 寬度(width)和高度(height)
- 6.7.2內容+padding : 寬度(innerWidth)和高度(innerHeight)
- 6.7.3內容+padding+border : 寬度(outerWidth)和高度(outerHeight)
- 6.8滾動條距離屬性
- 7.jQuery影片效果
- 7.1顯示影片
- 7.2隱藏影片
- 練習 ： 實作點擊按鈕顯示盒子，再點擊按鈕隱藏盒子
- 7.3開關式顯示隱藏影片
- 7.4滑入和滑出
- 7.4.1滑入影片效果：（類似于生活中的卷簾門）:下拉影片，顯示元素，
- 7.4.2滑出影片效果： 上拉影片，隱藏元素，
- 7.4.3滑入滑出切換影片效果：
- 7.5淡入淡出影片
- 7.6自定義影片
- 7.6.1語法：
- 7.6.2作用：執行一組CSS屬性的自定義影片，
- 7.7停止影片
- 8.jQuery的事件操作
- 8.1系結事件
- 8.2解綁事件
- 8.3補充 一次性事件
- 8.4事件委托（事件代理）
- 9.示例
1.楔子
需求一：有html標簽關系如下，請找到所有的含有a標簽的li標簽
<div>
<ul>
<li class="city">北京</li>
<li class="city"><a href=https://www.cnblogs.com/fengqiang626/p/"">上海
天津
原生js實作
<script>
var objs = document.getElementsByClassName('city')
for(var i=0;i< objs.length;i++){
arry_a = objs[i].getElementsByTagName('a')
if(arry_a.length>0){
console.log(objs[i]
)
}
}
</script>
jqeury實作
$('li').has('a')
需求二：將上面的li標簽實作隔行換色效果
原生js實作
var objs = document.getElementsByClassName('city')
for(var i=0;i< objs.length;i++){
if(i%2==0){
objs[i].style.backgroundColor = 'lightblue'
}else{
objs[i].style.backgroundColor = 'lightyellow'
}
}
jquery實作
$('li:odd').css('background-color','lightblue')
$('li:even').css('background-color','lightyellow')
需求三：點擊按鈕，顯示頁面中的三個div，并給div添加文本內容
<!--樣式-->
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: green;
margin-top: 20px;
display: none;
}
</style>
<!--body標簽-->
<button>操作</button>
<div></div>
<div></div>
<div></div>
原生js實作
<script>
var oBtn = document.getElementsByTagName('button')[0];
var divArr = document.getElementsByTagName('div');
oBtn.onclick = function () {
for (var i = 0; i < divArr.length; i++) {
divArr[i].style.display = "block";
divArr[i].innerHTML = "趙云";
}
}
</script>
jquery實作
<script src=https://www.cnblogs.com/fengqiang626/p/"jquery3.4.1.js"></script>
<script>
var oBtn = $('button'); //根據標簽名獲取元素
var oDiv = $('div'); //根據標簽名獲取元素
oBtn.click(function(){
oDiv.show(2000).html('趙云');//顯示盒子，設定內容
})
</script>
盡管，你現在啥也不知道，你就知道用上了jquery咱們寫代碼節省了很多操作，便利了很多就OK了～～～
2.jqeury介紹
2.1為什么要使用jQuery
2.2jQuery 的兩大特點
- 鏈式編程：比如
.show()和.html()可以連寫成.show().html()，
- 隱式迭代：隱式 對應的是 顯式，隱式迭代的意思是：在方法的內部進行回圈遍歷，而不用我們自己再進行回圈，簡化我們的操作，方便我們呼叫，
2.3什么是 jQuery
jQuery 是 js 的一個庫，封裝了我們開發程序中常用的一些功能，方便我們呼叫，提高開發效率，
js庫是把我們常用的復雜功能封裝到簡單的方法中，我們用的時候，將庫直接引入然后呼叫方法即可，
初期，主要學習如何使用jQuery操作DOM，其實就是學習jQuery封裝好的那些功能API，
這些API的共同特點是：幾乎全都是方法，所以，在使用jQuery的API時，都是方法呼叫，也就是說要加小括號()，小括號里面是相應的引數，引數不同，功能不同，
3.jQuery的使用
3.1使用 jQuery 的基本步驟
下載 ：jQuery有兩個檔案，一個是jquery-3.4.1.js(未壓縮版)，一個是jquery-3.4.1.min.js(壓縮版,推薦專案上線時使用)
關于jQuery的相關資料：
- 官網：http://jquery.com/
- 官網API檔案：http://api.jquery.com/
- 漢化API檔案：http://www.css88.com/jqapi-1.9/
- jquery 在線手冊 ：http://hemin.cn/jq/
注意：導包的代碼一定要放在js代碼的最上面，
3.2jQuery 的入口函式和 $ 符號
3.2.1入口函式（重要）
原生 js 的入口函式指的是：window.onload = function() {}
//原生 js 的入口函式，頁面上所有內容加載完畢，才執行，
//不僅要等文本加載完畢，而且要等圖片也要加載完畢，才執行函式，
window.onload = function () {
alert(1);
}
jQuery的入口函式，有以下幾種寫法：
寫法一：檔案加載完畢，圖片不加載的時候，就可以執行這個函式，
$(document).ready(function () {
alert(1);
})
寫法二：檔案加載完畢，圖片不加載的時候，就可以執行這個函式，（寫法一的簡潔版）
$(function () {
alert(1);
});
寫法三：檔案加載完畢，圖片也加載完畢的時候，在執行這個函式，
$(window).ready(function () {
alert(1);
})
jQuery入口函式與js入口函式的區別：
區別一：書寫個數不同：
- Js 的入口函式只能出現一次，出現多次會存在事件覆寫的問題，
- jQuery 的入口函式，可以出現任意多次，并不存在事件覆寫問題，
區別二：執行時機不同：
- Js的入口函式是在所有的檔案資源加載完成后，才執行，這些檔案資源包括：頁面檔案、外部的js檔案、外部的css檔案、圖片等，
- jQuery的入口函式，是在檔案加載完成后，就執行，檔案加載完成指的是：DOM樹加載完成后，就可以操作DOM了，不用等到所有的外部資源都加載完成，
檔案加載的順序：從上往下，邊決議邊執行，
3.2.2jQuery的 $ 符號
jQuery 使用 $ 符號原因：書寫簡潔、相對于其他字符與眾不同、容易被記住，
jQuery占用了我們兩個變數：$ 和 jQuery，當我們在代碼中列印它們倆的時候：
<script src=https://www.cnblogs.com/fengqiang626/p/"jquery-3.3.1.js"></script>
<script>
console.log($);
console.log(jQuery);
console.log($===jQuery);
</script>
從列印結果可以看出，$ 代表的就是 jQuery，
4.js中的DOM物件 和 jQuery物件比較（重點，難點）
4.1二者的區別
通過 jQuery 獲取的元素是一個jq物件陣列，其中包含著原生JS中的DOM物件
針對下面這樣一個div結構：
<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
通過原生 js 獲取這些元素節點的方式是：
var myBox = document.getElementById("app"); //通過 id 獲取單個元素
var boxArr = document.getElementsByClassName("box"); //通過 class 獲取的是偽陣列
var divArr = document.getElementsByTagName("div"); //通過標簽獲取的是偽陣列
通過 jQuery 獲取這些元素節點的方式是：（獲取的都是陣列）
//獲取的是陣列，里面包含著原生 JS 中的DOM物件，
console.log($('#app'));
console.log($('.box'));
console.log($('div'));
總結：jQuery 就是把 DOM 物件重新包裝了一下，讓其具有了 jQuery 方法
4.2二者的相互轉換
DOM 物件 轉為 jQuery物件：
$(js物件);
jQuery物件 轉為 DOM 物件：
jquery物件[index]; //方式1（推薦）
jquery物件.get(index); //方式2
jQuery物件轉換成了 DOM 物件之后，可以直接呼叫 DOM 提供的一些功能，如：
$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';
5.jQuery查找標簽
5.1基本選擇器
$("#id") //id選擇器
$("tagName") //標簽選擇器
$(".className") //class選擇器
$("*") //通用選擇器
$("div.c1") // 交集選擇器 找到有含有c1類的div標簽
$("#id, .className, tagName") //并集選擇器
jquery選擇器示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
float: left;
}
</style>
</head>
<body>
<div></div>
<div id="box"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
<script type="text/javascript" src=https://www.cnblogs.com/fengqiang626/p/"jquery3.4.1.js"></script>
<script type="text/javascript">
//入口函式
$(function(){
//三種方式獲取jquery物件
var jqBox1 = $("#box");
var jqBox2 = $(".box");
var jqBox3 = $('div');
//操作標簽選擇器
jqBox3.css('width', '100');
jqBox3.css('height', 100);
jqBox3.css('background-color', 'red');
jqBox3.css('margin-top', 10);
//操作類選擇器(隱式迭代，不用一個一個設定)
jqBox2.css("background", "green");
jqBox2.text('哈哈哈')
//操作id選擇器
jqBox1.css("background", "yellow");
})
</script>
</body>
</html>
5.1.1層級選擇器
$("x y");// x的所有后代y（子子孫孫）
$("x > y");// x的所有兒子y（兒子）
$("x + y")// 找到所有緊挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src=https://www.cnblogs.com/fengqiang626/p/"jquery-3.3.1.js"></script>
<script>
$(function () {
//獲取ul中的li設定為粉色
//后代：兒孫重孫曾孫玄孫....
var jqLi = $("ul li");
jqLi.css("margin", 5);
jqLi.css("background", "pink");
//子代：親兒子
var jqOtherLi = $("ul>li");
jqOtherLi.css("background", "red");
});
</script>
<body>
