代码驿站移动版

当前位置：主页 > 软件编程 > Python代码 >

Python全栈之学习JQuery

时间：2022-09-13 08:49:35 | 栏目：Python代码 | 点击：次

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},我是个好人`;

总结

您可能感兴趣的文章:

相关文章