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

python

python web开发 jQuery基础

發(fā)布時間：2024/7/5 python 32 豆豆

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

文章目錄

- 1. 引入 jQuery
- 2. 基本語法
- 3. jQuery 選擇器
- - 3.1 元素選擇器
  - 3.2 #id 選擇器
  - 3.3 .class 選擇器
- 4. jQuery事件
- 5. 獲取內(nèi)容和屬性
- - 5.1 獲取內(nèi)容
  - 5.2 獲取屬性

learning from 《python web開發(fā)從入門到精通》

jQuery 是一個輕量級的 JavaScript 函數(shù)庫
包含元素選取，操作，事件函數(shù)，特效動畫等功能

1. 引入 jQuery

下載 https://jquery.com/download/
在 head 中使用 script 外部引用即可
使用 CDN 鏈接引用
如 <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>

2. 基本語法

$(selector).action()
$ 定義 jQuery，selector 指明HTML元素，action 執(zhí)行的操作

例子：

$(this).hide() 隱藏當前元素
$("p").hide() 隱藏所有 <p> 元素
$("p.test").hide() 隱藏所有 class = "test" 的 <p> 元素
$("#test").hide() 隱藏 id = "test" 的元素

大多數(shù)情況下， jQuery 函數(shù)位于 document ready 函數(shù)中，防止沒有加載完成就對不存在的元素進行操作

$(document).ready(function(){// jQuery 代碼 });

document ready 函數(shù) 也可簡寫

$(function(){// jQuery 代碼 });

3. jQuery 選擇器

基于元素的 id，類，類型，屬性，屬性值等進行查找選擇 HTML 元素
所有選擇器都以 $() 開始

3.1 元素選擇器

基于元素名選取，如 $("p") 選擇所有 <p> 元素

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>元素選擇器</title><script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script></head> <body><p>michael 學(xué)習(xí)web開發(fā)</p> <p>繼續(xù)加油</p> <button>點擊按鈕隱藏所有 p 元素</button> <script>$(document).ready(function () {$('button').click(function () {$('p').hide();});}); </script></body> </html>

3.2 #id 選擇器

其通過 id 屬性（id 是唯一的）選取指定的一個元素，如 $("#test")

<p>michael 學(xué)習(xí)web開發(fā)</p> <p>繼續(xù)加油</p> <p id="myweb">我的博客地址 https://michael.blog.csdn.net/</p> <button id="b1">點擊按鈕隱藏 id=myweb 的元素</button> <script>$(document).ready(function () {$('button').click(function () {$("#myweb").hide();});}); </script>

3.3 .class 選擇器

它通過指定的 class 查找元素，如$(".test")

點擊按鈕，所有帶有 class=“test” 屬性的元素都被隱藏

更多選擇器參考：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

4. jQuery事件

頁面對訪問者的響應(yīng)叫做事件

常見事件參看鏈接

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery事件</title><script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script></head> <body><p id="p1">michael 學(xué)習(xí)web開發(fā)</p> <script>$(document).ready(function(){$("#p1").hover(function(){$(this).css("color","red");alert("鼠標在我上面懸停");},function(){$(this).css("color","black");alert("鼠標離開元素");})}) </script></body> </html>

5. 獲取內(nèi)容和屬性

5.1 獲取內(nèi)容

操作 DOM 文檔

text() 設(shè)置或返回元素的文本
html() 設(shè)置或返回元素的內(nèi)容(包括 HTML 標記)
val() 設(shè)置或返回表單字段的值

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>獲取內(nèi)容</title><script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script></head> <body><p id = "test">這是文字中 <b>加粗</b> 的文字</p> <button id="bt1">顯示文本text</button> <button id="bt2">顯示HTML</button><script>$("#bt1").click(function () {alert("text:"+$("#test").text());});$("#bt2").click(function () {alert("html:"+$("#test").html());}); </script></body> </html>

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>獲取val, 驗證字符串長度</title><script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script></head> <body><h4>請?zhí)顚懹脩粜畔?#xff1a;</h4> <form method="post" action=""><div><label for="username">用戶名：</label><input type="text" id="username" name="username" value=""></div><div><label for="password">密   碼：</label><input type="password" id="password" name="password" value=""></div><div><button id="bt1" type="submit" name="submit">提交</button></div> </form><script>$("#bt1").click(function () {var username = $("#username").val();var password = $("#password").val();if (username.length < 3) {alert("用戶名長度不能小于3位");return False;}if (password.length < 6) {alert("密碼長度不能小于6位");return False;}return True;}); </script></body> </html>

5.2 獲取屬性

jQuery 的 attr() 方法可以獲取和設(shè)置屬性值
如attr("屬性名") 獲取屬性值，attr("屬性名", ”屬性值“) 設(shè)置屬性值

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>屬性值讀取，設(shè)置</title><script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script></head> <body><div><a id="url1" href="https://michael.blog.csdn.net/">Michael阿明博客地址</a> </div> <button id="button1">讀取url地址</button> <button id="button2">修改url地址</button><script>$("#button1").click(function () {var url = $("#url1").attr("href");alert(url);});$("#button2").click(function () {$("#url1").attr("href", "https://www.baidu.com/");$("#url1").html("百度首頁地址");}); </script></body> </html>

總結(jié)

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

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

上一篇：心脏也会长肿瘤？没错，还能得癌症！
下一篇： LeetCode 2155. 分组得分最