标签：jQuery span 标签 34 div 选择器 d1
目录
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') 标签：jQuery,span,标签,34,div,选择器,d1 来源： https://blog.csdn.net/m0_52559893/article/details/121544900
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。