python day46

jQuery

表單篩選器：

:text :password :file:radio :checkbox:submit :reset :button

例子：

$(":checkbox") // 找到所有的checkbox

表單對(duì)象屬性:

:enabled :disabled :checked :selected

篩選器方法

下一個(gè)元素：

$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2")

上一個(gè)元素：

$("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2")

父親元素：

$("#id").parent() $("#id").parents() // 查找當(dāng)前元素的所有的父輩元素 $("#id").parentsUntil() // 查找當(dāng)前元素的所有的父輩元素，直到遇到匹配的那個(gè)元素為止。

兒子和兄弟元素：

$("#id").children();// 兒子們 $("#id").siblings();// 兄弟們

查找

搜索所有與指定表達(dá)式匹配的元素。這個(gè)函數(shù)是找出正在處理的元素的后代元素的好方法。

$("div").find("p")

等價(jià)于

$("div p")

篩選

篩選出與指定表達(dá)式匹配的元素集合。這個(gè)方法用于縮小匹配的范圍。用逗號(hào)分隔多個(gè)表達(dá)式。

$("div").filter(".c1") // 從結(jié)果集中過濾出有c1樣式類的

等價(jià)于

$("div.c1")

補(bǔ)充：

.first() // 獲取匹配的第一個(gè)元素 .last() // 獲取匹配的最后一個(gè)元素 .not() // 從匹配元素的集合中刪除與指定表達(dá)式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素

操作標(biāo)簽

樣式操作

樣式類

addClass();// 添加指定的CSS類名。 removeClass();// 移除指定的CSS類名。 hasClass();// 判斷樣式存不存在 toggleClass();// 切換CSS類名，如果有就移除，如果沒有就添加。

示例：開關(guān)燈和模態(tài)框

CSS

css("color","red")//DOM操作：tag.style.color="red"

例：

$("p").css("color", "red"); //將所有p標(biāo)簽的字體設(shè)置為紅色

位置操作

offset()// 獲取匹配元素在當(dāng)前窗口的相對(duì)偏移或設(shè)置元素位置 position()// 獲取匹配元素相對(duì)父元素的偏移 scrollTop()// 獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移 scrollLeft()// 獲取匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移

.offset()方法允許我們檢索一個(gè)元素相對(duì)于文檔（document）的當(dāng)前位置。和 .position()的差別在于： .position()是相對(duì)于相對(duì)于父級(jí)元素的位移。

尺寸：

height() width() innerHeight() innerWidth() outerHeight() outerWidth()

文本操作

HTML代碼：

html()// 取得第一個(gè)匹配元素的html內(nèi)容 html(val)// 設(shè)置所有匹配元素的html內(nèi)容

文本值：

text()// 取得所有匹配元素的內(nèi)容 text(val)// 設(shè)置所有匹配元素的內(nèi)容

值：

val()// 取得第一個(gè)匹配元素的當(dāng)前值 val(val)// 設(shè)置所有匹配元素的值 val([val1, val2])// 設(shè)置多選的checkbox、多選select的值

例：

<input type="checkbox" value="basketball" name="hobby">籃球 <input type="checkbox" value="football" name="hobby">足球<select multiple id="s1"><option value="1">1</option><option value="2">2</option><option value="3">3</option> </select>

設(shè)置值：

$("[name='hobby']").val(['basketball', 'football']); $("#s1").val(["1", "2"])

示例：

獲取被選中的checkbox或radio的值：

<label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1">

可以使用：

$("input[name='gender']:checked").val()

屬性操作

用于ID等或自定義屬性：

attr(attrName)// 返回第一個(gè)匹配元素的屬性值 attr(attrName, attrValue)// 為所有匹配元素設(shè)置一個(gè)屬性值 attr({k1: v1, k2:v2})// 為所有匹配元素設(shè)置多個(gè)屬性值 removeAttr()// 從每一個(gè)匹配的元素中刪除一個(gè)屬性

用于checkbox和radio

prop() // 獲取屬性 removeProp() // 移除屬性

注意：

在1.x及2.x版本的jQuery中使用attr對(duì)checkbox進(jìn)行賦值操作時(shí)會(huì)出bug，在3.x版本的jQuery中則沒有這個(gè)問題。為了兼容性，我們?cè)谔幚韈heckbox和radio的時(shí)候盡量使用特定的prop()，不要使用attr(“checked”, “checked”)。

<input type="checkbox" value="1"> <input type="radio" value="2"> <script>$(":checkbox[value='1']").prop("checked", true);$(":radio[value='2']").prop("checked", true); </script>

prop和attr的區(qū)別：

attr全稱attribute(屬性)

prop全稱property(屬性)

雖然都是屬性，但他們所指的屬性并不相同，attr所指的屬性是HTML標(biāo)簽屬性，而prop所指的是DOM對(duì)象屬性，可以認(rèn)為attr是顯式的，而prop是隱式的。

例：

<input type="checkbox" id="i1" value="1">

針對(duì)上面的代碼，

$("#i1").attr("checked") // undefined $("#i1").prop("checked") // false

可以看到attr獲取一個(gè)標(biāo)簽內(nèi)沒有的東西會(huì)得到undefined，而prop獲取的是這個(gè)DOM對(duì)象的屬性，因此checked為false。

如果換成下面的代碼：

<input type="checkbox" checked id="i1" value="1">

再執(zhí)行：

$("#i1").attr("checked") // checked $("#i1").prop("checked") // true

這已經(jīng)可以證明attr的局限性，它的作用范圍只限于HTML標(biāo)簽內(nèi)的屬性，而prop獲取的是這個(gè)DOM對(duì)象的屬性，選中返回true，沒選中返回false。

接下來再看一下針對(duì)自定義屬性，attr和prop又有什么區(qū)別：

<input type="checkbox" checked id="i1" value="1" me="自定義屬性">

執(zhí)行以下代碼：

$("#i1").attr("me") // "自定義屬性" $("#i1").prop("me") // undefined

可以看到prop不支持獲取標(biāo)簽的自定義屬性。

總結(jié)：
對(duì)于標(biāo)簽上有的能看到的屬性和自定義屬性都用attr。
對(duì)于返回布爾值的比如checkbox、radio和option的是否被選中都用prop。

文檔處理

添加到指定元素內(nèi)部的后面

$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B

添加到指定元素內(nèi)部的前面

$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 從DOM中刪除所有匹配的元素。 empty()// 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。

替換

replaceWith() replaceAll()

克隆

clone()// 參數(shù)

事件

常用事件

click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...})

keydown和keyup事件組合示例：

<!DOCTYPE html> <html lang="zh-CN"> <head><meta http-equiv="content-Type" charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><title>Title</title> </head> <body><table border="1"><thead><tr><th>#</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td>Egon</td><td><select><option value="1">上線</option><option value="2">下線</option><option value="3">停職</option></select></td></tr><tr><td><input type="checkbox"></td><td>Alex</td><td><select><option value="1">上線</option><option value="2">下線</option><option value="3">停職</option></select></td></tr><tr><td><input type="checkbox"></td><td>Yuan</td><td><select><option value="1">上線</option><option value="2">下線</option><option value="3">停職</option></select></td></tr><tr><td><input type="checkbox"></td><td>EvaJ</td><td><select><option value="1">上線</option><option value="2">下線</option><option value="3">停職</option></select></td></tr><tr><td><input type="checkbox"></td><td>Gold</td><td><select><option value="1">上線</option><option value="2">下線</option><option value="3">停職</option></select></td></tr></tbody> </table><input type="button" id="b1" value="全選"> <input type="button" id="b2" value="取消"> <input type="button" id="b3" value="反選"><script src="jquery-3.3.1.js"></script> <script>var flag = false;// shift按鍵被按下的時(shí)候$(window).keydown(function (event) {console.log(event.keyCode);if (event.keyCode === 16){flag = true;}});// shift按鍵被抬起的時(shí)候$(window).keyup(function (event) {console.log(event.keyCode);if (event.keyCode === 16){flag = false;}});// select標(biāo)簽的值發(fā)生變化的時(shí)候$("select").change(function (event) {// 如果shift按鍵被按下，就進(jìn)入批量編輯模式// shift按鍵對(duì)應(yīng)的code是16// 判斷當(dāng)前select這一行是否被選中console.log($(this).parent().siblings().first().find(":checkbox"));var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");console.log(isChecked);if (flag && isChecked) {// 進(jìn)入批量編輯模式// 1. 取到當(dāng)前select選中的值var value = $(this).val();// 2. 給其他被選中行的select設(shè)置成和我一樣的值// 2.1 找到那些被選中行的selectvar $select = $("input:checked").parent().parent().find("select")// 2.2 給選中的select賦值$select.val(value);}}); </script> </body> </html>

hover事件示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <p>蒼茫的天涯是我的哎，綿綿的青山腳下一片海！</p><script src="jQuery-3.3.1.js"> </script> <script>$('p').hover(function () {alert('來啦，老弟')},function () {alert('慢走哦～')}) </script> </body> </html>

實(shí)時(shí)監(jiān)聽input輸入值變化示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>實(shí)時(shí)監(jiān)聽input輸入值變化</title> </head> <body> <input type="text" id="i1"><script src="jquery-3.2.1.min.js"></script> <script>/** oninput是HTML5的標(biāo)準(zhǔn)事件* 能夠檢測(cè)textarea,input:text,input:password和input:search這幾個(gè)元素的內(nèi)容變化，* 在內(nèi)容修改后立即被觸發(fā)，不像onchange事件需要失去焦點(diǎn)才觸發(fā)* oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代* 使用jQuery庫的話直接使用on同時(shí)綁定這兩個(gè)事件即可。* */$("#i1").on("input propertychange", function () {alert($(this).val());}) </script> </body> </html>

事件綁定

.on( events [, selector ],function(){})

events： 事件selector: 選擇器（可選的）function: 事件處理函數(shù)

移除事件

.off( events [, selector ][,function(){}])

off() 方法移除用 .on()綁定的事件處理程序。

events： 事件selector: 選擇器（可選的）function: 事件處理函數(shù)

阻止后續(xù)事件執(zhí)行

return false; // 常見阻止表單提交等e.preventDefault();

例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>阻止默認(rèn)事件</title> </head> <body><form action=""><button id="b1">點(diǎn)我</button> </form><script src="jquery-3.3.1.min.js"></script> <script>$("#b1").click(function (e) {alert(123);//return false;e.preventDefault();}); </script> </body> </html>

注意：

像click、keydown等DOM中定義的事件，我們都可以使用.on()方法來綁定事件，但是hover這種jQuery中定義的事件就不能用.on()方法來綁定了。

想使用事件委托的方式綁定hover事件處理函數(shù)，可以參照如下代碼分兩步綁定事件：

$('ul').on('mouseenter', 'li', function() {//綁定鼠標(biāo)進(jìn)入事件$(this).addClass('hover'); }); $('ul').on('mouseleave', 'li', function() {//綁定鼠標(biāo)劃出事件$(this).removeClass('hover'); });

阻止事件冒泡

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>阻止事件冒泡</title> </head> <body> <div><p><span>點(diǎn)我</span></p> </div> <script src="jquery-3.3.1.min.js"></script> <script>$("span").click(function (e) {alert("span");e.stopPropagation();});$("p").click(function () {alert("p");});$("div").click(function () {alert("div");}) </script> </body> </html>

頁面載入

當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)。這是事件模塊中最重要的一個(gè)函數(shù)，因?yàn)樗梢詷O大地提高web應(yīng)用程序的響應(yīng)速度。

兩種寫法：

$(document).ready(function(){ // 在這里寫你的JS代碼... })

簡(jiǎn)寫：

$(function(){ // 你在這里寫你的代碼 })

文檔加載完綁定事件，并且阻止默認(rèn)事件發(fā)生：

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>登錄注冊(cè)示例</title><style>.error {color: red;}</style> </head> <body><form id="myForm"><label for="name">姓名</label><input type="text" id="name"><span class="error"></span><label for="passwd">密碼</label><input type="password" id="passwd"><span class="error"></span><input type="submit" id="modal-submit" value="登錄"> </form><script src="jquery-3.2.1.min.js"></script> <script src="s7validate.js"></script> <script>function myValidation() {// 多次用到的jQuery對(duì)象存儲(chǔ)到一個(gè)變量，避免重復(fù)查詢文檔樹var $myForm = $("#myForm");$myForm.find(":submit").on("click", function () {// 定義一個(gè)標(biāo)志位，記錄表單填寫是否正常var flag = true;$myForm.find(":text, :password").each(function () {var val = $(this).val();if (val.length <= 0 ){var labelName = $(this).prev("label").text();$(this).next("span").text(labelName + "不能為空");flag = false;}});// 表單填寫有誤就會(huì)返回false，阻止submit按鈕默認(rèn)的提交表單事件return flag;});// input輸入框獲取焦點(diǎn)后移除之前的錯(cuò)誤提示信息$myForm.find("input[type!='submit']").on("focus", function () {$(this).next(".error").text("");})}// 文檔樹就緒后執(zhí)行$(document).ready(function () {myValidation();}); </script> </body> </html>

與window.onload的區(qū)別

window.onload()函數(shù)有覆蓋現(xiàn)象，必須等待著圖片資源加載完成之后才能調(diào)用。

jQuery的這個(gè)入口函數(shù)沒有函數(shù)覆蓋現(xiàn)象，文檔加載完成之后就可以調(diào)用（建議使用此函數(shù)）。

事件委托

事件委托是通過事件冒泡的原理，利用父標(biāo)簽去捕獲子標(biāo)簽的事件。

示例：

表格中每一行的編輯和刪除按鈕都能觸發(fā)相應(yīng)的事件。

$("table").on("click", ".delete", function () {// 刪除按鈕綁定的事件 })

動(dòng)畫效果

基本

show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn])

滑動(dòng)

slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn])

淡入淡出

fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]])

自定義（了解）

animate(p,[s],[e],[fn])

自定義動(dòng)畫示例：

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>點(diǎn)贊動(dòng)畫示例</title><style>div {position: relative;display: inline-block;}div>i {display: inline-block;color: red;position: absolute;right: -16px;top: -5px;opacity: 1;}</style> </head> <body><div id="d1">點(diǎn)贊</div> <script src="jquery-3.2.1.min.js"></script> <script>$("#d1").on("click", function () {var newI = document.createElement("i");newI.innerText = "+1";$(this).append(newI);$(this).children("i").animate({opacity: 0}, 1000)}) </script> </body> </html>

Bootstrap

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。

使用CDN導(dǎo)入

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

具體操作跳轉(zhuǎn)：https://v3.bootcss.com/getting-started/

其中更多圖標(biāo)請(qǐng)?zhí)D(zhuǎn)：http://www.fontawesome.com.cn/
CDN

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">

更多彈窗請(qǐng)?zhí)D(zhuǎn)：https://sweetalert.js.org/guides/
CDN

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

總結(jié)

以上是生活随笔為你收集整理的python day46的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。