Python全棧之學習JQuery

Posted on by

1. lable標簽補充

<!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引入和簡單使用

jquery引入：

jquery對原生js封裝bootcdn官網：https://www.bootcdn.cn/外部網址引入（一般不用）<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->本地文件引入（bootcnd：提供瞭很多插件網站的地址，加速過的，直接在搜索框中搜索jquery，然後把連接放在地址欄，把返回的結果復制到jquery.js(在pycharm中與html同級的目錄)裡面，然後html進行引用即可）<script src="jquery.js"></script>  //jquery.js本地文件路徑jquery對原生js封裝
bootcdn官網：https://www.bootcdn.cn/
外部網址引入（一般不用）
	<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->
本地文件引入（bootcnd：提供瞭很多插件網站的地址，加速過的，直接在搜索框中搜索jquery，然後把連接放在地址欄，把返回的結果復制到jquery.js(在pycharm中與html同級的目錄)裡面，然後html進行引用即可）
	<script src="jquery.js"></script>  //jquery.js本地文件路徑

juery初始

var d1 = $('#d1'); -- jquery對象  -- jQuery.fn.init [div#d1]
var d = document.getElementById('d1');  -- 原生dom對象 -- <div id='d1'></div>
jquery對象和dom對象之前不能調用互相的方法
jquery對象和dom對象可以互相轉換
d1[0] -- dom對象   # 通過索引取值的方式
$(d) -- jquery對象  # $(原生DOM對象)
再次解釋：
$("#d1")[0].innerHTML但凡從中括號索引取出來的值，都是原生dom對象
原生dom對象轉為jquery對象，使用text方法獲取文本
a：原生dom對象
$(a) 這就轉成juery對象，在調用text方法$(a).text();

<!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 src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!--<script>-->
<!--    -->
<!--    -->
<!--    -->
<!--    -->
<!--</script>-->
</html>

3. 選擇器

3.1 基礎選擇器

知識點：

// id選擇器
$('#d1')  -- 同css
// 類選擇器
$('.c1') 
$(".c1").css({'color':'green'});
// 元素選擇器
$('標簽名稱') -- $('span')  
// 查看jquery對象找到的元素個數
$("li").length;

基礎選擇器使用：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><ul>    <li class="c1">葛龍</li>    <li>高學峰</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'});  設置字體顏色    // $("li");標簽選擇器,寫標簽名稱</script></html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li class="c1">葛龍</li>
    <li>高學峰</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'});  設置字體顏色
    // $("li");標簽選擇器,寫標簽名稱
</script>
</html>

3.2 組合選擇

因為每次都要引入jquery.js比較麻煩，所以可以直接在模板裡添加默認引入：

在這裡插入圖片描述

示例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代碼的時候,最好寫到html文件的最下方,但是要在html標簽內部
    <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對象
  	$('#d1,.c2').eq(1); -- 索引為1 的jquery對象
$('#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對象
  	$('#d1,.c2').eq(1); -- 索引為1 的jquery對象

3.3 層級選擇器

找標簽下的兒子、孫子，比如 $(“form input”)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1">
    <h1>隻要python學的好,媳婦年年在高考</h1>
</div>
<h1>
    主要你有錢,對象剛進幼兒園
</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">
    書山有路勤為徑，學海無涯苦作舟！
</div>

</body>
<script src="jquery.js"></script>
<script>
    // 通過屬性名查找標簽
    $("[class]");
    $("[xx]");   // 自定義屬性
    //  通過屬性名對應屬性值來查找標簽
    $("[class='c1']");
    $("[xx='lnh']"); //自定義屬性
</script>
</html>

3.5 表單對象屬性選擇器

知識點：

:checked  找到被選中的input標簽
:selected  找被選中的select標簽中的option標簽
:disabled  不可操作的標簽 
:enabled   可操作的標簽
示例:
	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標簽
    // $(':selected');  找到的是select下拉框中被選中的option標簽
</script>
</html>

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
// 標簽裡屬性和值相等的時候，直接寫屬性就ok(disabled="disabled")
<input type="text" id="s1" disabled>
<input type="text">
<input type="password">
</body>
<script src="jquery.js"></script>
<script>
    $(":enabled");  //  找到可操作的標簽
    $(":disabled"); // 找到不可操作的標簽

</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標簽
    $(':password') // type='password' 的input標簽
    $(':radio') // type='radio' 的input標簽
</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(); // 找該標簽的父輩
    var res = $("#singer").parents(); // 找到所有的直系祖先輩
    $("#singer").parentsUntil('body'); // 直到找到符合某個選擇器的標簽為止,不包含該選擇器對應的那個標簽

    $("#singer").children();  // 找兒子輩的標簽
    $("#singer").children('.s1'); // 對找到的兒子標簽進行過濾 $("#singer").children('選擇器');

    $("#singer").next();  // 找到下一個兄弟標簽
    $("#singer").nextAll(); // 找到它下面的所有兄弟標簽
    $("#singer").nextUntil('.superman');  // 找它下面的兄弟標簽,直到找到符合某個選擇器的標簽為止,並且不包含該標簽

    $("#singer").prev();  // 找到上一個兄弟標簽
    $("#singer").prevAll(); // 找到它上面所有的兄弟標簽
    $("#singer").prevUntil('.c1'); // 找它上面的兄弟標簽,直到找到符合某個選擇器的標簽為止,並且不包含該標簽
    $("#singer").siblings() // 找到所有兄弟標簽,不包含自己
    $("#singer").siblings('.c1') // 找到兄弟標簽中符合選擇器的兄弟標簽

    $('ul').find('span');  // 找到後代中所有符合條件的標簽

    $('li').first(); // 找到所有找到的標簽中的第一個標簽,獲得的是jq對象
    $('li').last(); // 找到最後一個標簽
    $('li').eq(0);  // 通過索引取值找到標簽,拿到的是jq對象
    $('li')[0]  //  通過索引取值找到標簽,拿到的是原生DOM對象
    console.log(res)
</script>
</html>

4. 文本操作

4.1 選擇器優先級和類值操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            color: tan;
        }
        .c4{
            color:yellow!important;
        }
        span{
            color:blue;
        }

        /*
        優先級:
            繼承 0
            div 1
            id 100
            內聯樣式優先級 1000
            !important 最牛逼
            相同優先級的,後面的覆蓋前面的
        */


        .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');  // 動態添加類值
    $('.c1').removeClass('c2');   // 刪除類值
    $('.c1').toggleClass('c2'); // 有就刪除,沒有就添加
    // 某些網站的閃爍效果
    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>
    //示例: 簡單驗證用戶輸入內容長度的判斷,blur是鼠標離開光標就出發事件
<!--    $('#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方法不能直接獲取所有的被勾選的標簽的value屬性對應的值,隻能獲取一個
    // 所以,我們需要通過循環的方式來獲取
    /*
    方式1:
        for (var i of checkbox_list ){
            console.log(i.value);
        }
        each循環
        $.each(a,function(k,v){
            console.log(k,v);
        })
        循環jq對象寫法
        var checkbox_list = $(':checkbox:checked');
        checkbox_list.each(function(k,v){
            console.log(k,v.value);
        })
    */

    $('#s1').val();  // 單選下拉框獲取值
    $('#s1').val(['1']); // 單選下拉框設置值
    $('#s2').val(); // 多選下拉框獲取值
    $('#s2').val(['2','3']); // 多選下拉框設置值

    // 設置值
    // $('#username').val('xxxxx'); // /input type=text的普通文本輸入框設置值
    // $(':radio').val(['1']);   //input type=radio設置值
    // $(':checkbox').val(['1','3']);  // input type=checkbox設置值
</script>
</html>

總結：

獲取值：
 文本輸人框：$('#username').val();
 單選radio框：$('.a1:checked').val();
 多選checkout框：$('.a2:checked').val()是不行的;需要循環取值，如下：
 var d = $(':checkbox:checked');
 for (var i=0;i<d.length;i++){
 console.log(d.eq(i).val());
 }
 單選select框：$('#city').val()；
 多選select框：$('#lover').val();

設置值：
 文本輸入框：$('#username').val('you are my love');
 單選radio框：$('.a1').val([2]); #註意內容必須是列表，寫的是value屬性對應的值
 多選checkout框：$('.a2').val(['2','3'])
 單選select框：$('#city').val('1')；
 多選select框：$('#lover').val(['2','3'])

點擊事件綁定：（.blur是鼠標離開光標就出發事件,還有.change也是出發事件）
    $('.c1').click(function () {
        //$(this)表示的就是它自己
        $(this).css('background-color','green');
        // $('.c1').css('background-color','green');
    })

4.3 創建標簽

添加標簽: $(’.c1’).html(‘百度’); 但是這個屬於替換內容,將標簽內原來的內容全部替換掉，下面的示例是往標簽內添加內容，而不是替換

<!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>

    // 示例: 點擊按鈕插入a標簽的示例
    // 1 綁定事件
    $('#zouni').click(function(){
        // 2創建a標簽
        var a = $('<a>',{
			text:'這還是個鏈接',
			href:'http://www.baidu.com',
			class:'link',
			id:'baidu',
			name:'baidu'
	    })
	    // 3 找到要插入a標簽的外層標簽
	    // 4 插入a標簽
	    // $("#d1")[0].appendChild(a[0]);  //原生js的方法,往標簽內部的最後面插入元素
	    $("#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 href="http://www.baidu.com">你的最愛</a>'); // 標簽的外部的前面添加元素
    $('#d1').after('<a href="http://www.baidu.com">你的最愛</a>');// 標簽的外部的後面添加元素
    $('#d1').append('<a href="http://www.baidu.com">你的最愛</a>');// 標簽的內部的後面添加元素
    $('#d1').prepend('<a href="http://www.baidu.com">你的最愛</a>');// 標簽的內部的前面添加元素
</script>
</html>

4.5 刪除和清空標簽

<!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，因為windos這個對象也有name(windows.name)
var username = '勝平';
var s = `我叫${username},我是個好人`;

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：