栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Python

【四十五】Python全栈之路--JQuery

Python 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

【四十五】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 字符串占位符 5. 样式操作

1. lable标签补充



    
    Title











2. jquery引入和简单使用

jquery引入:

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();



    
    Title



皇家赌场

3. 选择器 3.1 基础选择器

知识点:

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

基础选择器使用:




    
    Title



  • 葛龙
  • 高学峰
  • 何旭彤
  • 宋健
  • 刘利伟
  • 王同佩
3.2 组合选择

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

示例1:




    
    Title





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对象
3.3 层级选择器

找标签下的儿子、孙子,比如 $(“form input”)
示例:




    
    Title



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

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

3.4 属性选择器



    
    Title




书山有路勤为径,学海无涯苦作舟!
3.5 表单对象属性选择器

知识点:

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

示例1:




    
    Title
 


未知








示例2:




    
    Title


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










3.6 表单选择器



    
    Title



用户名: 

密码
性别选择: 未知
3.7 筛选器方法

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




    
    Title



  • 刘义沨
  • 李亚锋
  • 张磊1 张磊2
  • 高华新
  • 赵世超
  • 杨元涛
4. 文本操作 4.1 选择器优先级和类值操作



    
    Title
    




康玉康和张保张 秀!!!
div1 xxx
4.2 值操作



    
    Title



    

    抽烟
    喝酒
    烫头

    

    







总结:

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




    
    Title




xxxx

4.4 文档操作



    
    Title



亚洲

4.5 删除和清空标签



    
    Title




xxxx

ssss

4.6 字符串占位符
// 字符占位符${变量名}
// js中全局变量不要用name,因为windos这个对象也有name(windows.name)
var username = '胜平';
var s = `我叫${username},我是个好人`;
5. 样式操作
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/714390.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号