34.前端jQuery之【入门要点】【选择器】【筛选器】

目录

1.jQuery基本要点

2.jQuery选择器

3.jQuery筛选器


1.jQuery基本要点

1.jQuery:引入方式
    write less do more
    官网https://jquery.com/
    (1)方式一:
        下载jQuery压缩文件https://code.jquery.com/jquery-3.6.0.min.js,复制粘贴到通目录下
        <script src="路径直接引用"></script>
    (2)方式二:
        利用cdn服务,需要网络
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        在vscode自定义代码块可以在写代码前快速设置


2.jQuery基本语法:
    (1)jQuery操作标签
        jQuery(选择器).操作
        可以简写$(选择器).操作,$()===jQuery()
    (2)例如:
        jQuery操作p标签,改变颜色
            $('p').css('color','blue')
        原生js操作p标签,改变颜色
            let pEle = document.getElementById('d1')
		    pEle.style.color = 'red'
    (3)补充:$(''):外层单引号,内层双引号
          $('')方法返回的都是jQuery对象


3.在用变量存储对象的时候
    (1)js中推荐使用	    XXXEle		标签对象
            如:let imgEle = document.createElement('img')
    (2)jQuery中推荐使用    $XXXEle	     jQuery对象
            如:let $pEle = $('p')

 

2.jQuery选择器

1.jQuery基本选择器
    (1)分类:
        a.id选择器,返回的是jQuery对象
            $('#d1')
                返回//w.fn.init [div#d1]
                    //          0: div#d1   
                    //          length: 1
                    //          __proto__: Object(0)
        b.class选择器,返回的是jQuery对象  
            $('.c1')
                返回//w.fn.init [p.c1, prevObject: w.fn.init(1)]
                    //            0: p.c1
                    //            length: 1
                    //            prevObject: w.fn.init [document]
                    //            __proto__: Object(0)
        c.标签选择器,返回的是jQuery对象
            $('span')
                返回//w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
                    //0: span
                    //1: span
                    //2: span
                    //length: 3
                    //prevObject: w.fn.init [document]
                    //[[Prototype]]: Object(0)

    (2)通过选择器获取标签(jQuery对象转标签对象)
        加索引即可$('')[0]
        a.id选择器获取标签:$('#d1')[0]             // id只有一个,所有[0]即标签
        b.class选择器获取标签:$('.c1')[0]
        c.$('span')获取标签:$('span')[1]
    
    (3)标签对象如何转jQuery对象
        $(原生js选择器)
        a.id标签对象转id的jQuery对象:$(document.getElementById('d1'))
        b.class的标签对象转jQuery对像:$(document.getElementsByClassName('c1'))
        c.标签对象转jQuery对象:$(document.getElementsByTagName('span'))


2.jQuery定位/组合嵌套选择器
    (1)定位:$('div.c1')    //找div下的名为c1类选择器
            $('div#d1')    //找div下的名为d1的选择器
            $('*')         //全部选择器
    (2)组合:
        $('#d1,.c1,p')      //并列+混用
        $('div span')       //后代
        $('div>span')       //儿子
        $('div+span')       //毗邻
        $('div~span')       //弟弟


3.jQuery属性选择器:[]
    $('[username]')             //找有username属性的标签
    $('[username="wsx"]')       //找有username="wsx"属性的标签
    $('div[username="wsx"]')    //找p标签并且有username="wsx"属性的标签

 

3.jQuery筛选器

1.jQuery基本筛选器
    顾名思义,多层标签用过条件筛选,以下用无序列表多个li演示
    $('ul li:first')        //大儿子 ul下第一个li
    $('ul li:last')         //小儿子 ul下最后一个li
    $('ul li:eq(2)')		//索引对应li  取ul下第几个li(0开始)
    $('ul li:even')         //偶数索引 0开始(0 2 4 6...)
    $('ul li:odd')          //奇数索引 (1 3 5 7...)
    $('ul li:gt(2)')        //大于索引  ul下索引大于2
    $('ul li:lt(2)')        //小于索引  ul下索引小于2
    $('ul li:not("#d1")')   //移除满足条件的标签  ul下索引不含d1选择器标签
    $('div:has("p")')       //选取出包含一个或多个标签在内的标签  div下有p的标签


2.jQuery表单筛选器
    在表单中想拿数据,通过筛选器可简写
    (1)input-type=""中,type属性用:即可简写,如:
        $(':text')      //等价于$('input[type="text"]')
        $(':password')  //等价于$('input[type="password"]')
    (2)表单对象属性,enabled,disabled,checked,selected等等,用法一致
        $(':enabled')
        $('disabled')
    (3)补充:特殊情况
        在表单默认选择方式有两种:input框checked,select下拉框selected
        $(':checked')       //会将表单中的checked和selected都拿到
        $(':selected')      //只拿selected
        ('input:checked')   //只拿checked,加一个限制条件


3.jQuery筛选器方法
    (1)外部:
        $('#d1').next()             //d1标签的同级别的下一个标签
        $('#d1').nextAll()          //d1标签的同级别下面的所有标签
        $('#d1').nextUntil('.c1')   //d1标签的同级别下面直到c1的所有标签,不包括c1(不包括最后一个)
        $('.c1').prev()             //c1标签的同级别的上一个标签
        $('.c1').prevAll()          //c1标签的同级别上面面的所有标签
        $('.c1').prevUntil('#d2')   //c1标签的同级别上面直到d1的所有标签,不包括d1(不包括最上面一个)
        $('#d1').siblings()         //d1同级别上下所有标签

    (2)内部:
        $('#d1').parent()               //d1的父标签,可以连续.parent
        $('#d1').parents()              //d1的所有父标签
        $('#d1').parentsUntil('body')   //d1的直到body的所有父标签,不含body
        $('#d1').children()             //d1的所有儿子标签
        $('#d1').siblings()             /d1同级别上下所有标签
    
    (3)补充
        $('div span').first()           //div下第一个span,等价于$('div span:first')
        $('div span').last()            //div下最后一个span,等价于$('div span:last')
        $('div span:not("#d1")')        //div下不包含d1的span,等价于$('div span').not('#d1')
        $('div').find('p')              //find从某个区域内筛选出想要的标签,等价于$('div p') 
上一篇:IfcBaseAxis


下一篇:今天的码农女孩做了关于日期的练习 2022/1/6