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标签补充
    Title - 锐客网

    Python全栈之学习JQuery
    文章图片


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

    Title - 锐客网皇家赌场


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

    基础选择器使用:
    Title - 锐客网
    • 葛龙
    • 高学峰
    • 何旭彤
    • 宋健
    • 刘利伟
    • 王同佩
    Title - 锐客网
    • 葛龙
    • 高学峰
    • 何旭彤
    • 宋健
    • 刘利伟
    • 王同佩


    3.2 组合选择
    因为每次都要引入jquery.js比较麻烦,所以可以直接在模板里添加默认引入:
    Python全栈之学习JQuery
    文章图片

    示例1:
    Title - 锐客网xxxxoooo// 引入js文件或者写js代码的时候,最好写到html文件的最下方,但是要在html标签内部

    示例2:
    $('#d1,.c2')示例: html代码这是c2css代码:#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代码这是c2css代码:#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
    • 高华新
    • 赵世超
    • 杨元涛

    【Python全栈之学习JQuery】
    4. 文本操作
    4.1 选择器优先级和类值操作
    Title - 锐客网#d1{color: tan; }.c4{color:yellow!important; }span{color:blue; }/*优先级:继承 0div 1id 100内联样式优先级 1000!important 最牛逼相同优先级的,后面的覆盖前面的*/.c1{/* 10 */height:100px; width:100px; background-color:red; }.c2{height:100px; width:100px; background-color:green; }.c3{color:red; }康玉康和张保张秀!!!div1xxx


    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 - 锐客网xxxxssss


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


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

      推荐阅读