當前位置：首頁 > 编程语言 > python >内容正文

python

python day46

發(fā)布時間：2024/3/13 python 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 python day46 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

python day46

jQuery

表單篩選器：

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

例子：

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

表單對象屬性:

:enabled :disabled :checked :selected

篩選器方法

下一個元素：

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

上一個元素：

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

父親元素：

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

兒子和兄弟元素：

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

查找

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

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

等價于

$("div p")

篩選

篩選出與指定表達式匹配的元素集合。這個方法用于縮小匹配的范圍。用逗號分隔多個表達式。

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

等價于

$("div.c1")

補充：

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

操作標簽

樣式操作

樣式類

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標簽的字體設(shè)置為紅色

位置操作

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

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

尺寸：

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

文本操作

HTML代碼：

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

文本值：

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

值：

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

例：

設(shè)置值：

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

示例：

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

可以使用：

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

屬性操作

用于ID等或自定義屬性：

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

用于checkbox和radio

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

注意：

在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題。為了兼容性，我們在處理checkbox和radio的時候盡量使用特定的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標簽屬性，而prop所指的是DOM對象屬性，可以認為attr是顯式的，而prop是隱式的。

例：

針對上面的代碼，

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

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

如果換成下面的代碼：

再執(zhí)行：

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

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

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

執(zhí)行以下代碼：

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

可以看到prop不支持獲取標簽的自定義屬性。

總結(jié)：
對于標簽上有的能看到的屬性和自定義屬性都用attr。
對于返回布爾值的比如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é)點。

替換

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按鍵被按下的時候$(window).keydown(function (event) {console.log(event.keyCode);if (event.keyCode === 16){flag = true;}});// shift按鍵被抬起的時候$(window).keyup(function (event) {console.log(event.keyCode);if (event.keyCode === 16){flag = false;}});// select標簽的值發(fā)生變化的時候$("select").change(function (event) {// 如果shift按鍵被按下，就進入批量編輯模式// shift按鍵對應(yīng)的code是16// 判斷當前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) {// 進入批量編輯模式// 1. 取到當前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>

實時監(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>實時監(jiān)聽input輸入值變化</title> </head> <body> <input type="text" id="i1"><script src="jquery-3.2.1.min.js"></script> <script>/** oninput是HTML5的標準事件* 能夠檢測textarea,input:text,input:password和input:search這幾個元素的內(nèi)容變化，* 在內(nèi)容修改后立即被觸發(fā)，不像onchange事件需要失去焦點才觸發(fā)* oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代* 使用jQuery庫的話直接使用on同時綁定這兩個事件即可。* */$("#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>阻止默認事件</title> </head> <body><form action=""><button id="b1">點我</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() {//綁定鼠標進入事件$(this).addClass('hover'); }); $('ul').on('mouseleave', 'li', function() {//綁定鼠標劃出事件$(this).removeClass('hover'); });

阻止事件冒泡

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>阻止事件冒泡</title> </head> <body> <div><p><span>點我</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>

頁面載入

當DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)。這是事件模塊中最重要的一個函數(shù)，因為它可以極大地提高web應(yīng)用程序的響應(yīng)速度。

兩種寫法：

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

簡寫：

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

文檔加載完綁定事件，并且阻止默認事件發(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>登錄注冊示例</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對象存儲到一個變量，避免重復(fù)查詢文檔樹var $myForm = $("#myForm");$myForm.find(":submit").on("click", function () {// 定義一個標志位，記錄表單填寫是否正常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;}});// 表單填寫有誤就會返回false，阻止submit按鈕默認的提交表單事件return flag;});// input輸入框獲取焦點后移除之前的錯誤提示信息$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的這個入口函數(shù)沒有函數(shù)覆蓋現(xiàn)象，文檔加載完成之后就可以調(diào)用（建議使用此函數(shù)）。

事件委托

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

示例：

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

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

動畫效果

基本

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

滑動

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])

自定義動畫示例：

<!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>點贊動畫示例</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">點贊</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)式布局、移動設(shè)備優(yōu)先的 WEB 項目。

使用CDN導(dǎo)入

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

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

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

總結(jié)

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

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

Python

上一篇： win10+VS2012+opencv2
下一篇：【小沐学NLP】Python实现聊天机器