jquery选择_JQuery选择器

最新推荐文章于 2022-06-24 05:34:46 发布

maX Zero

最新推荐文章于 2022-06-24 05:34:46 发布

阅读量64

点赞数

文章标签： jquery选择

本文链接：https://blog.csdn.net/weixin_35802555/article/details/113708497

版权

JQuery选择器https://www.zhihu.com/video/1246190146913038336

今日内容概要

jQuery(封装了js的前端框架(模块))

很容易与DOM操作混淆

JQuery中文文档：

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chmjquery.cuishifeng.cn

CDN:https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js

JQuery

"""
jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作 
类似于python里面的模块  在前端模块不叫模块  叫 “类库”

兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题

jQuery的宗旨
    write less do more
    让你用更少的代码完成更多的事情

复习
    python导入模块发生了哪些事？
        导入模块其实需要消耗资源
    jQuery在使用的时候也需要导入
        但是它的文件非常的小(几十KB) 基本不影响网络速度

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点 django部分学)

版本介绍

jQuery文件下载
    压缩          容量更小
    未压缩
"""
# jQuery在使用之前 一定要确保已经导入了

针对导入问题

# 1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
    可以借助于pycharm自动初始化代码功能完成自动添加
    配置
        编辑
        file -> settings -> Editor -> file and code templates
  """我不想下载jQuery文件 能不能使用呢？"""

# 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')
w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)

// class选择器
$('.c1')
w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)

// 标签选择器
$('span')
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]


"""一定要区分开(重点)"""
// jQuery对象如何变成标签对象
undefined
$('#d1')[0]
<div id="d1">…</div>

document.getElementById('d1')
<div id="d1">…</div>

// 标签对象如何转jQuery对象
undefined
$(document.getElementById('d1'))
w.fn.init [div#d1]

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="d1">div
        <span>div>span</span>
        <p>div>p
            <span>div>p>span</span>
        </p>
    </div>
    <p class="c1">p</p>
    <span>span</span>
</body>
</html>

组合选择器/分组与嵌套

$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1')
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('div#d1')
w.fn.init [div#d1, prevObject: w.fn.init(1)]
$('*')
w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]

$('#d1,.c1,p')  # 并列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]

$('div span')  # 后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span')  # 儿子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span')  # 毗邻
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span')  # 弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<span>span</span>
<span>span</span>
<div id="d1">div
    <span>div>span</span>
    <p id="d2">div>p
        <span>div>p>span</span>
    </p>
    <span>div>span</span>
</div>
<div class="c1"></div>
<span>span</span>
<span>span</span>
</body>
</html>

基本筛选器

$('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')  # 偶数索引 0包含在内
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)

$('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)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)

$('ul li:lt(2)')  # 小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)

$('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)]

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<ul>
    <li>101</li>
    <li>102</li>
    <li>103</li>
    <li>104</li>
    <li>105</li>
    <li>106</li>
    <li class="c1">107</li>
    <li>108</li>
    <li id="d1">109</li>
    <li>110</li>
</ul>


<div>div
    <p></p>
    <span></span>

</div>
<div>div
    <a href=""></a>
</div>

</body>
</html>

属性选择器

$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$('p[username="egon"]')
w.fn.init [p, 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)]

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" username="jason">
<input type="text" username="egon">
<p username="egon"></p>
</body>
</html>

表单筛选器

$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]

$(':text')  # 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$(':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)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$(':selected')  # 它不会 只拿selected
w.fn.init [option, prevObject: w.fn.init(1)]
$('input:checked')  # 自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form action="">
    <p>username:<input type="text"></p>
    <p>password<input type="password"></p>
    <input type="checkbox" value="111">111
    <input type="checkbox" value="111" checked>222
    <input type="checkbox" value="111">333

    <select name="" id="">
        <option value="">111</option>
        <option value="">222</option>
        <option value="" selected>333</option>
    </select>

    <input type="button" value="按钮">

</form>
</body>
</html>

筛选器方法：有这一种方法，就可以查找所有的标签

$('#d1').next()  # 同级别下一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)

$('#d1').nextAll()   # 同级别的往后的所有的
w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)

$('#d1').nextUntil('.c1')  # 同级别,直到.c1,不包括.c1
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init [span#d1]__proto__: Object(0)


$('.c1').prev()  # 上一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)

$('.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)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)

$('#d3').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]

$('#d3').parent().parent().parent()
w.fn.init [body, prevObject: w.fn.init(1)]

$('#d3').parent().parent().parent().parent()
w.fn.init [html, prevObject: w.fn.init(1)]

$('#d3').parent().parent().parent().parent().parent()
w.fn.init [document, prevObject: w.fn.init(1)]

$('#d3').parent().parent().parent().parent().parent().parent()
w.fn.init [prevObject: w.fn.init(1)]

$('#d3').parents()
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]

$('#d3').parentsUntil('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')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').first()
w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0)

$('div span:last')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').last()                                                                     w.fn.init [span, prevObject: w.fn.init(3)]

$('div span:not("#d3")')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div span').not('#d3')
w.fn.init(2) [span, span, prevObject: w.fn.init(3)]

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <span id="d1">span</span>
    <span>span</span>
    <div id="d2">
        <span>div>span</span>
        <p>div>p
            <span id="d3">div>p>span</span>
        </p>
        <span>div>span</span>
    </div>
    <span>span</span>
    <span>span</span>
    <span class="c1">span</span>
</body>
</html>