Python全棧之學(xué)習(xí)JQuery
更新時(shí)間：2022年01月24日 16:52:59 作者：熬夜泡枸杞
這篇文章主要為大家介紹了Python全棧之JQuery，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
1. lable標(biāo)簽補(bǔ)充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label>
用戶名: <input type="text">
</label>
<label for="password">密碼:</label>
<input type="text" id="password">
</body>
</html>
2. jquery引入和簡(jiǎn)單使用
jquery引入：
jquery對(duì)原生js封裝bootcdn官網(wǎng)：https://www.bootcdn.cn/外部網(wǎng)址引入（一般不用）<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->本地文件引入（bootcnd：提供了很多插件網(wǎng)站的地址，加速過的，直接在搜索框中搜索jquery，然后把連接放在地址欄，把返回的結(jié)果復(fù)制到j(luò)query.js(在pycharm中與html同級(jí)的目錄)里面，然后html進(jìn)行引用即可）<script src="jquery.js"></script> //jquery.js本地文件路徑j(luò)query對(duì)原生js封裝 bootcdn官網(wǎng)：https://www.bootcdn.cn/ 外部網(wǎng)址引入（一般不用） <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>--> 本地文件引入（bootcnd：提供了很多插件網(wǎng)站的地址，加速過的，直接在搜索框中搜索jquery，然后把連接放在地址欄，把返回的結(jié)果復(fù)制到j(luò)query.js(在pycharm中與html同級(jí)的目錄)里面，然后html進(jìn)行引用即可） <script src="jquery.js"></script> //jquery.js本地文件路徑
juery初始
var d1 = $('#d1'); -- jquery對(duì)象 -- jQuery.fn.init [div#d1]
var d = document.getElementById('d1'); -- 原生dom對(duì)象 -- <div id='d1'></div>
jquery對(duì)象和dom對(duì)象之前不能調(diào)用互相的方法
jquery對(duì)象和dom對(duì)象可以互相轉(zhuǎn)換
d1[0] -- dom對(duì)象 # 通過索引取值的方式
$(d) -- jquery對(duì)象 # $(原生DOM對(duì)象)
再次解釋：
$("#d1")[0].innerHTML但凡從中括號(hào)索引取出來的值，都是原生dom對(duì)象
原生dom對(duì)象轉(zhuǎn)為jquery對(duì)象，使用text方法獲取文本
a：原生dom對(duì)象
$(a) 這就轉(zhuǎn)成juery對(duì)象，在調(diào)用text方法$(a).text();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<h1>皇家賭場(chǎng)</h1>
</div>
</body>
<!--<script src="jquery.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!--<script>-->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!--</script>-->
</html>
3. 選擇器
3.1 基礎(chǔ)選擇器
知識(shí)點(diǎn)：
// id選擇器
$('#d1') -- 同css
// 類選擇器
$('.c1')
$(".c1").css({'color':'green'});
// 元素選擇器
$('標(biāo)簽名稱') -- $('span')
// 查看jquery對(duì)象找到的元素個(gè)數(shù)
$("li").length;
基礎(chǔ)選擇器使用：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><ul> <li class="c1">葛龍</li> <li>高學(xué)峰</li> <li class="c1">何旭彤</li> <li>宋健</li> <li id="weige">劉利偉</li> <li>王同佩</li></ul></body><script src="jquery.js"></script><script> // $("#weige"); id選擇器 // $(".c1");類值選擇器 示例:$(".c1").css({'color':'green'}); 設(shè)置字體顏色 // $("li");標(biāo)簽選擇器,寫標(biāo)簽名稱</script></html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="c1">葛龍</li>
<li>高學(xué)峰</li>
<li class="c1">何旭彤</li>
<li>宋健</li>
<li id="weige">劉利偉</li>
<li>王同佩</li>
</ul>
</body>
<script src="jquery.js"></script>
<script>
// $("#weige"); id選擇器
// $(".c1");類值選擇器 示例:$(".c1").css({'color':'green'}); 設(shè)置字體顏色
// $("li");標(biāo)簽選擇器,寫標(biāo)簽名稱
</script>
</html>
3.2 組合選擇
因?yàn)槊看味家?code>jquery.js比較麻煩，所以可以直接在模板里添加默認(rèn)引入：
示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
xxxx
</div>
<div id="d1">
oooo
</div>
</body>
// 引入js文件或者寫js代碼的時(shí)候,最好寫到html文件的最下方,但是要在html標(biāo)簽內(nèi)部
<script src="jquery.js"></script>
<script>
// 示例 組合選擇器
$("#d1,.c1");
$("#d1,.c1").css({'color':'red'});
</script>
</html>
示例2：
$('#d1,.c2')
示例:
html代碼
<div id="d1"></div>
<div class="c2">
這是c2
</div>
css代碼:
#d1,.c2{
background-color: red;
height: 100px;
width: 100px;
border-bottom: 1px solid black;
}
jquery代碼:
$('#d1,.c2').css('background-color','green');
$('#d1,.c2')[1]; -- 索引為1的dom對(duì)象
$('#d1,.c2').eq(1); -- 索引為1 的jquery對(duì)象
$('#d1,.c2')
示例:
html代碼
<div id="d1"></div>
<div class="c2">
這是c2
</div>
css代碼:
#d1,.c2{
background-color: red;
height: 100px;
width: 100px;
border-bottom: 1px solid black;
}
jquery代碼:
$('#d1,.c2').css('background-color','green');
$('#d1,.c2')[1]; -- 索引為1的dom對(duì)象
$('#d1,.c2').eq(1); -- 索引為1 的jquery對(duì)象
3.3 層級(jí)選擇器
找標(biāo)簽下的兒子、孫子，比如 $(“form input”)
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<h1>只要python學(xué)的好,媳婦年年在高考</h1>
</div>
<h1>
主要你有錢,對(duì)象剛進(jìn)幼兒園
</h1>
</body>
<script src="jquery.js"></script>
<script>
// 示例
$(".c1 h1").css({"color":'green'});
</script>
</html>
3.4 屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" xx="lnh">
書山有路勤為徑，學(xué)海無涯苦作舟！
</div>
</body>
<script src="jquery.js"></script>
<script>
// 通過屬性名查找標(biāo)簽
$("[class]");
$("[xx]"); // 自定義屬性
// 通過屬性名對(duì)應(yīng)屬性值來查找標(biāo)簽
$("[class='c1']");
$("[xx='lnh']"); //自定義屬性
</script>
</html>
3.5 表單對(duì)象屬性選擇器
知識(shí)點(diǎn)：
:checked 找到被選中的input標(biāo)簽
:selected 找被選中的select標(biāo)簽中的option標(biāo)簽
:disabled 不可操作的標(biāo)簽
:enabled 可操作的標(biāo)簽
示例:
html代碼:
用戶名:<input type="text" id="username" disabled>
密碼: <input type="text" id="password">
jquery代碼:
$(':enabled');
$(':disabled');
示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<input type="radio" name="sex" value="3">未知
<select name="city" id="city">
<option value="1">上海</option>
<option value="2">深圳</option>
<option value="3">北京</option>
</select>
</body>
<script src="jquery.js"></script>
<script>
// $(':checked'); 能夠找到input選擇框和select下拉選擇框中被選中的option標(biāo)簽
// $(':selected'); 找到的是select下拉框中被選中的option標(biāo)簽
</script>
</html>
示例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
// 標(biāo)簽里屬性和值相等的時(shí)候，直接寫屬性就ok(disabled="disabled")
<input type="text" id="s1" disabled>
<input type="text">
<input type="password">
</body>
<script src="jquery.js"></script>
<script>
$(":enabled"); // 找到可操作的標(biāo)簽
$(":disabled"); // 找到不可操作的標(biāo)簽
</script>
</html>
3.6 表單選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
用戶名: <input type="text">
<br>
密碼 <input type="password">
<br>
性別選擇:
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<input type="radio" name="sex" value="3">未知
</body>
<script src="jquery.js"></script>
<script>
$(':text') // type='text' 的input標(biāo)簽
$(':password') // type='password' 的input標(biāo)簽
$(':radio') // type='radio' 的input標(biāo)簽
</script>
</html>
3.7 篩選器方法
原生js中的間接查找選擇器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="c1">劉義沨</li>
<li >李亞鋒</li>
<li id="singer">
<span class="s1">張磊1</span>
<span>張磊2</span>
</li>
<li>高華新</li>
<li class="superman">趙世超</li>
<li>楊元濤</li>
</ul>
</body>
<script src="jquery.js"></script>
<script>
var res = $("#singer").parent(); // 找該標(biāo)簽的父輩
var res = $("#singer").parents(); // 找到所有的直系祖先輩
$("#singer").parentsUntil('body'); // 直到找到符合某個(gè)選擇器的標(biāo)簽為止,不包含該選擇器對(duì)應(yīng)的那個(gè)標(biāo)簽
$("#singer").children(); // 找兒子輩的標(biāo)簽
$("#singer").children('.s1'); // 對(duì)找到的兒子標(biāo)簽進(jìn)行過濾 $("#singer").children('選擇器');
$("#singer").next(); // 找到下一個(gè)兄弟標(biāo)簽
$("#singer").nextAll(); // 找到它下面的所有兄弟標(biāo)簽
$("#singer").nextUntil('.superman'); // 找它下面的兄弟標(biāo)簽,直到找到符合某個(gè)選擇器的標(biāo)簽為止,并且不包含該標(biāo)簽
$("#singer").prev(); // 找到上一個(gè)兄弟標(biāo)簽
$("#singer").prevAll(); // 找到它上面所有的兄弟標(biāo)簽
$("#singer").prevUntil('.c1'); // 找它上面的兄弟標(biāo)簽,直到找到符合某個(gè)選擇器的標(biāo)簽為止,并且不包含該標(biāo)簽
$("#singer").siblings() // 找到所有兄弟標(biāo)簽,不包含自己
$("#singer").siblings('.c1') // 找到兄弟標(biāo)簽中符合選擇器的兄弟標(biāo)簽
$('ul').find('span'); // 找到后代中所有符合條件的標(biāo)簽
$('li').first(); // 找到所有找到的標(biāo)簽中的第一個(gè)標(biāo)簽,獲得的是jq對(duì)象
$('li').last(); // 找到最后一個(gè)標(biāo)簽
$('li').eq(0); // 通過索引取值找到標(biāo)簽,拿到的是jq對(duì)象
$('li')[0] // 通過索引取值找到標(biāo)簽,拿到的是原生DOM對(duì)象
console.log(res)
</script>
</html>
4. 文本操作
4.1 選擇器優(yōu)先級(jí)和類值操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
color: tan;
}
.c4{
color:yellow!important;
}
span{
color:blue;
}
/*
優(yōu)先級(jí):
繼承 0
div 1
id 100
內(nèi)聯(lián)樣式優(yōu)先級(jí) 1000
!important 最牛逼
相同優(yōu)先級(jí)的,后面的覆蓋前面的
*/
.c1{ /* 10 */
height:100px;
width:100px;
background-color:red;
}
.c2{
height:100px;
width:100px;
background-color:green;
}
.c3{
color:red;
}
</style>
</head>
<body>
<div class="c1">
康玉康和張保張
秀!!!
</div>
<div class="c3">
div1
<span class="c4" id="d1" style="color:purple;">xxx</span>
</div>
</body>
<script src="jquery.js"></script>
<script>
$('.c1').addClass('c2'); // 動(dòng)態(tài)添加類值
$('.c1').removeClass('c2'); // 刪除類值
$('.c1').toggleClass('c2'); // 有就刪除,沒有就添加
// 某些網(wǎng)站的閃爍效果
setInterval(function(){$('.c1').toggleClass('c2');},100);
</script>
</html>
4.2 值操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="username">
<input type="radio" class="a1" name="sex" value="1">男
<input type="radio" class="a1" name="sex" value="2">女
<input type="checkbox" class="a2" name="hobby" value="1">抽煙
<input type="checkbox" class="a2" name="hobby" value="2">喝酒
<input type="checkbox" class="a2" name="hobby" value="3">燙頭
<select name="city" id="s1">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
<select name="lover" id="s2" multiple>
<option value="1">波多</option>
<option value="2">蒼井</option>
<option value="3">小澤</option>
</select>
</body>
<script src="jquery.js"></script>
<script>
//示例: 簡(jiǎn)單驗(yàn)證用戶輸入內(nèi)容長(zhǎng)度的判斷,blur是鼠標(biāo)離開光標(biāo)就出發(fā)事件
<!-- $('#username').blur(function(){-->
<!-- var uname = $('#username').val();-->
<!-- if (uname.length < 4){-->
<!-- alert('太短了,不舒服');-->
<!-- }-->
<!-- })-->
// 獲取值
// $('#username').val(); //input type=text的普通文本輸入框獲取值
// $('input:checked').val(); // input type=radio
// $(':checkbox:checked').val(); // input type=checkbox 通過val方法不能直接獲取所有的被勾選的標(biāo)簽的value屬性對(duì)應(yīng)的值,只能獲取一個(gè)
// 所以,我們需要通過循環(huán)的方式來獲取
/*
方式1:
for (var i of checkbox_list ){
console.log(i.value);
}
each循環(huán)
$.each(a,function(k,v){
console.log(k,v);
})
循環(huán)jq對(duì)象寫法
var checkbox_list = $(':checkbox:checked');
checkbox_list.each(function(k,v){
console.log(k,v.value);
})
*/
$('#s1').val(); // 單選下拉框獲取值
$('#s1').val(['1']); // 單選下拉框設(shè)置值
$('#s2').val(); // 多選下拉框獲取值
$('#s2').val(['2','3']); // 多選下拉框設(shè)置值
// 設(shè)置值
// $('#username').val('xxxxx'); // /input type=text的普通文本輸入框設(shè)置值
// $(':radio').val(['1']); //input type=radio設(shè)置值
// $(':checkbox').val(['1','3']); // input type=checkbox設(shè)置值
</script>
</html>
總結(jié)：
獲取值：
文本輸人框：$('#username').val();
單選radio框：$('.a1:checked').val();
多選checkout框：$('.a2:checked').val()是不行的;需要循環(huán)取值，如下：
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
單選select框：$('#city').val()；
多選select框：$('#lover').val();
設(shè)置值：
文本輸入框：$('#username').val('you are my love');
單選radio框：$('.a1').val([2]); #注意內(nèi)容必須是列表，寫的是value屬性對(duì)應(yīng)的值
多選checkout框：$('.a2').val(['2','3'])
單選select框：$('#city').val('1')；
多選select框：$('#lover').val(['2','3'])
點(diǎn)擊事件綁定：（.blur是鼠標(biāo)離開光標(biāo)就出發(fā)事件,還有.change也是出發(fā)事件）
$('.c1').click(function () {
//$(this)表示的就是它自己
$(this).css('background-color','green');
// $('.c1').css('background-color','green');
})
4.3 創(chuàng)建標(biāo)簽
添加標(biāo)簽: $(’.c1’).html(‘百度’); 但是這個(gè)屬于替換內(nèi)容,將標(biāo)簽內(nèi)原來的內(nèi)容全部替換掉，下面的示例是往標(biāo)簽內(nèi)添加內(nèi)容，而不是替換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="zouni">走你</button>
<div id="d1">
<h1>xxxx</h1>
</div>
</body>
<script src="jquery.js"></script>
<script>
// 示例: 點(diǎn)擊按鈕插入a標(biāo)簽的示例
// 1 綁定事件
$('#zouni').click(function(){
// 2創(chuàng)建a標(biāo)簽
var a = $('<a>',{
text:'這還是個(gè)鏈接',
href:'http://www.baidu.com',
class:'link',
id:'baidu',
name:'baidu'
})
// 3 找到要插入a標(biāo)簽的外層標(biāo)簽
// 4 插入a標(biāo)簽
// $("#d1")[0].appendChild(a[0]); //原生js的方法,往標(biāo)簽內(nèi)部的最后面插入元素
$("#d1").append(a);
})
</script>
</html>
4.4 文檔操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<h1>亞洲</h1>
</div>
</body>
<script src="jquery.js"></script>
<script>
$('#d1').before('<a ); // 標(biāo)簽的外部的前面添加元素
$('#d1').after('<a );// 標(biāo)簽的外部的后面添加元素
$('#d1').append('<a );// 標(biāo)簽的內(nèi)部的后面添加元素
$('#d1').prepend('<a );// 標(biāo)簽的內(nèi)部的前面添加元素
</script>
</html>
4.5 刪除和清空標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<h1>xxxx</h1>
</div>
<div id="d2">
<h2>ssss</h2>
</div>
</body>
<script src="jquery.js"></script>
<script>
$('#d1').remove(); // 刪除
$('#d1').empty(); // 清空 類似:$('#d1').text('');
</script>
</html>
4.6 字符串占位符
// 字符占位符${變量名}
// js中全局變量不要用name，因?yàn)閣indos這個(gè)對(duì)象也有name(windows.name)
var username = '勝平';
var s = `我叫${username},我是個(gè)好人`;
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Python數(shù)據(jù)庫的連接實(shí)現(xiàn)方法與注意事項(xiàng)
這篇文章主要介紹了Python數(shù)據(jù)庫的連接實(shí)現(xiàn)方法與注意事項(xiàng),需要的朋友可以參考下2016-02-02
Win7上搭建Cocos2d-x 3.1.1開發(fā)環(huán)境
現(xiàn)在，越來越多的公司采用Cocos2d-x 3.0來開發(fā)游戲了，但是現(xiàn)在這樣的文章并不多，所以打算寫一系列來幫助初學(xué)者快速掌握Cocos2d-x 3.0。首先就從開發(fā)環(huán)境的大家說起吧2014-07-07
這篇文章主要介紹了詳解python中GPU版本的opencv常用方法介紹，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Python爬蟲之Scrapy環(huán)境搭建案例教程,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
python dict 字典 以及 賦值 引用的一些實(shí)例(詳解)
下面小編就為大家?guī)硪黄猵ython dict 字典 以及 賦值 引用的一些實(shí)例(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
python中__slots__節(jié)約內(nèi)存的具體做法
在本篇內(nèi)容里小編給大家分享的是一篇關(guān)于python中__slots__節(jié)約內(nèi)存的具體做法，有需要的朋友們可以跟著學(xué)習(xí)參考下。2021-07-07
python3中利用filter函數(shù)輸出小于某個(gè)數(shù)的所有回文數(shù)實(shí)例
今天小編就為大家分享一篇 python3中利用filter函數(shù)輸出小于某個(gè)數(shù)的所有回文數(shù)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11 
python反轉(zhuǎn)一個(gè)三位整數(shù)的多種實(shí)現(xiàn)方案
這篇文章主要介紹了python反轉(zhuǎn)一個(gè)三位整數(shù)的多種實(shí)現(xiàn)方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2021-03-03 
Python time模塊詳解（常用函數(shù)實(shí)例講解,非常好）
在平常的代碼中，我們常常需要與時(shí)間打交道。在Python中，與時(shí)間處理有關(guān)的模塊就包括：time，datetime以及calendar。這篇文章，主要講解time模塊。
2014-04-04