Python全栈之学习JQuery

目录

• 1. lable标签补充
• 2. jquery引入和简单使用
• 3. 选择器
• 3.1 基础选择器
• 3.2 组合选择
• 3.3 层级选择器
• 3.4 属性选择器
• 3.5 表单对象属性选择器
• 3.6 表单选择器
• 3.7 筛选器方法
• 4. 文本操作
• 4.1 选择器优先级和类值操作
• 4.2 值操作
• 4.3 创建标签
• 4.4 文档操作
• 4.5 删除和清空标签
• 4.6 字符串占位符
• 总结

1. lable标签补充

    
    



    用户名: 


密码:

2. jquery引入和简单使用

jquery引入：

jquery对原生js封装bootcdn官网：https://www.bootcdn.cn/外部网址引入（一般不用）本地文件引入（bootcnd：提供了很多插件网站的地址，加速过的，直接在搜索框中搜索jquery，然后把连接放在地址栏，把返回的结果复制到jquery.js(在pycharm中与html同级的目录)里面，然后html进行引用即可）  //jquery.js本地文件路径jquery对原生js封装
bootcdn官网：https://www.bootcdn.cn/
外部网址引入（一般不用）
	
本地文件引入（bootcnd：提供了很多插件网站的地址，加速过的，直接在搜索框中搜索jquery，然后把连接放在地址栏，把返回的结果复制到jquery.js(在pycharm中与html同级的目录)里面，然后html进行引用即可）
	  //jquery.js本地文件路径

juery初始

var d1 = $('#d1'); -- jquery对象  -- jQuery.fn.init [div#d1]
var d = document.getElementById('d1');  -- 原生dom对象 -- 

jquery对象和dom对象之前不能调用互相的方法
jquery对象和dom对象可以互相转换
d1[0] -- dom对象   # 通过索引取值的方式
$(d) -- jquery对象  # $(原生DOM对象)
再次解释：
$("#d1")[0].innerHTML但凡从中括号索引取出来的值，都是原生dom对象
原生dom对象转为jquery对象，使用text方法获取文本
a：原生dom对象
$(a) 这就转成juery对象，在调用text方法$(a).text();

    
    



    
皇家赌场

3. 选择器

3.1 基础选择器

知识点：

// id选择器
$('#d1')  -- 同css
// 类选择器
$('.c1') 
$(".c1").css({'color':'green'});
// 元素选择器
$('标签名称') -- $('span')  
// 查看jquery对象找到的元素个数
$("li").length;

基础选择器使用：

        
    
葛龙
    
高学峰
    
何旭彤
    
宋健
    
刘利伟
    
王同佩


    
    



    
葛龙
    
高学峰
    
何旭彤
    
宋健
    
刘利伟
    
王同佩

3.2 组合选择

因为每次都要引入jquery.js比较麻烦，所以可以直接在模板里添加默认引入：

示例1：

    
    




    xxxx


    oooo



// 引入js文件或者写js代码的时候,最好写到html文件的最下方,但是要在html标签内部
    
    

示例2：

$('#d1,.c2')
示例:
	html代码
		

        

            这是c2
        
    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代码
		

        

            这是c2
        
    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”)

示例：

    
    



    
只要python学的好,媳妇年年在高考


    主要你有钱,对象刚进幼儿园

3.4 属性选择器

    
    




    书山有路勤为径，学海无涯苦作舟！

3.5 表单对象属性选择器

知识点：

:checked  找到被选中的input标签
:selected  找被选中的select标签中的option标签
:disabled  不可操作的标签 
:enabled   可操作的标签
示例:
	html代码:
		用户名:
		密码: 
	jquery代码:
		$(':enabled');  
		$(':disabled');

示例1：

    
    
 

男
女
未知

    上海
    深圳
    北京

示例2：

    
    


// 标签里属性和值相等的时候，直接写属性就ok(disabled="disabled")

3.6 表单选择器

    
    


用户名: 


密码 


性别选择:
男
女
未知

3.7 筛选器方法

原生js中的间接查找选择器：

    
    



    
刘义沨
    
李亚锋
    

        张磊1
        张磊2
    
    
高华新
    
赵世超
    
杨元涛

4. 文本操作

4.1 选择器优先级和类值操作

    
    
    



    康玉康和张保张
    秀!!!


    div1
    xxx

4.2 值操作

    
    


    
    男
    女
    抽烟
    喝酒
    烫头
    
     北京
     上海
     深圳
    
    
     波多
     苍井
     小泽
    

总结：

获取值：
 文本输人框：$('#username').val();
 单选radio框：$('.a1:checked').val();
 多选checkout框：$('.a2:checked').val()是不行的;需要循环取值，如下：
 var d = $(':checkbox:checked');
 for (var i=0;i 
 

设置值：
 文本输入框：$('#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(‘百度’); 但是这个属于替换内容,将标签内原来的内容全部替换掉，下面的示例是往标签内添加内容，而不是替换

    
    


走你

    
xxxx

4.4 文档操作

    
    



    
亚洲

4.5 删除和清空标签

    
    




    
xxxx


    
ssss

4.6 字符串占位符

// 字符占位符${变量名}
// js中全局变量不要用name，因为windos这个对象也有name(windows.name)
var username = '胜平';
var s = `我叫${username},我是个好人`;

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!