前端——jQuery，标签查找

jQuery

'''
内部封装了原生js代码，此外还添加了很多功能
推崇用更少的代码完成更多的事情
类似于python的模块，只不过前端中的名词是"类库"

使用jQuery无需考虑浏览器兼容问题

使用前必须先导入
'''

针对导入问题

# 1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
        可以借助于pycharm自动初始化代码功能完成自动添加
        配置
        编辑
        file and code template
  
# 2 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
        CDN:内容分发网络
        CDN有免费的也有收费的
    前端免费的cdn网站:
        bootcdn
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  """必须联网"""
  
  
# jQuery基本语法
        jQuery(选择器).action()
  秉持着jQuery的宗旨 jQuery简写 $
  jQuery()  === $()

# jQuery与js代码对比
        eg:将p标签内部的文本颜色改为红色
        // 原生js代码操作标签
                let pEle = document.getElementById('d1')
                pEle.style.color = 'red'

        // jQuery操作标签
                $('p').css('color','blue')

标签查找

基本选择器

// id选择器
$('#d1') // S.fn.init [div#d1]  返回jquery对象
//类选择器
$('.c1') //S.fn.init [div.c1, prevObject: S.fn.init(1)] 返回jquery对象
// 标签选择器
$('div') //S.fn.init(2) [div#d1, div.c1, prevObject: S.fn.init(1)] 返回jquery对象

//jQuery对线变成标签对象
$('#d1')[0] // <div >...</div>
$('.c1')[0] // <div class='c1'>...</div>
$('div')[0]

//标签对象变成jQuery对象
$(document.getElementById('d1')) // S.fn.init [div#d1]

组合选择器/分组与嵌套

$('div')
// S.fn.init(2) [div#d1, div.c1, prevObject: S.fn.init(1)]
$('div.c1')
// S.fn.init [div.c1, prevObject: S.fn.init(1)]
$('div#d1')
// S.fn.init [div#d1, prevObject: S.fn.init(1)]
$('*')
// S.fn.init(18) [html, head, meta, title, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: S.fn.init(1)]
               
$('#d1,.c1,p')  // 并列+混用
// S.fn.init(3) [div#d1, p#d2, div.c1, prevObject: S.fn.init(1)]
              
$('div span')  // 后代
// S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]
$('div>span')  // 儿子
// S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
$('div+span')  // 毗邻
// S.fn.init [span, prevObject: S.fn.init(1)]
$('div~span')  // 弟弟
// S.fn.init(2) [span, span, prevObject: S.fn.init(1)]

基本筛选器

$('ul li')
// w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
$('ul li:first') //第一个儿子
// w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: 
// w.fn.init [document]__proto__: Object(0)
$('ul li:last') //最后一个儿子
// w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: 
// w.fn.init [document]__proto__: Object(0)
$('ul li:eq(2)') //对应索引
// w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: 
// w.fn.init [document]__proto__: Object(0)
$('ul li:even') //偶数索引
// w.fn.init(5) [li, li, li, li.c1, li]
$('ul li:odd') //奇数索引
// w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:gt(2)') //大于索引
// w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
$('ul li:lt(2)') //小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]
$('ul li:not("#d1")') //移除满足条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")') //筛选出包含一个或多个标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]

属性选择器

$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]

$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

表单筛选器

$('input[type="text"]')
//w.fn.init [input, prevObject: w.fn.init(1)]
$('input[type="password"]')
//w.fn.init [input, prevObject: w.fn.init(1)]
$(':text') //等价于上面第一个
//w.fn.init [input, prevObject: w.fn.init(1)]
$(':password') //等价于上面第二个
//w.fn.init [input, prevObject: w.fn.init(1)]

/*
其他的表单筛选器
    :text       //文本
    :password   //密码
    :file       //文件
    :radio      //单选框
    :checkbox   //复选框
    :submit     //提交
    :reset      //重置
    :button     //按钮
    ...
*/

/*
表单对象属性
        :enabled
    :disabled
    :checked
    :selected
*/
//特殊情况
$(':checked') //会将设置了checked与selected的标签都拿到
//w.fn.init(2) [input, option, prevObject: w.fn.init(1)]

$(':selected') //只会拿到selected
//w.fn.init [option, prevObject: w.fn.init(1)]

//解决方法：加上一个限制条件
$('input:checked')
//w.fn.init [input, prevObject: w.fn.init(1)]

筛选器方法

$('#d1').next() //获取同级下一个标签
//w.fn.init [span, prevObject: w.fn.init(1)]
$('#d1').nextAll() //获取标签下方同级的所有标签
//w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]
$('#d1').nextUntil('#d2') //获取从当前标签开始到指定标签之间的所有同级标签（不包括指定标签）
//w.fn.init [span, prevObject: w.fn.init(1)]

$('.c1').prev() //获取同级上一个标签
//w.fn.init [span, prevObject: w.fn.init(1)]
$('.c1').prevAll()
//w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
$('.c1').prevUntil('#d2')
//w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

$('#d3').parent() //第一级父标签
//w.fn.init [p, prevObject: w.fn.init(1)]
$('#d3').parent().parent() //第二级父标签
//w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parents() //所有父标签
//w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
$('#d3').parentsUntil('body') //到body父标签之前的所有父标签(不包括body)
//w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]

$('#d2').children() //当前标签的所有子标签
$('#d2').siblings() //当前标签的所有兄弟标签

//下述两两等价
$('div p')
// 两者等价
$('div').find('p') //find从某个区域内筛选出想要的标签 

$('div span:first')
$('div span').first() //筛选出第一个指定标签

$('div span:last')
$('div span').last() //筛选出最后一个指定标签

$('div span:not("#d3")')
$('div span').not('#d3') //筛选出不满足条件的所有指定标签