锐客网

  1. 首页 > it技术 > >

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


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

      推荐阅读


      上一篇：Spring的IOC控制反转详解

      下一篇：你知道怎么用Spring的三级缓存解决循环依赖吗