jQuery 筛选器 选择器

标签：jQuery span 选择器 筛选 li div d1

jQuery内部封装了原生的js代码（还额外添加了很多的功能），能够让你通过书写更少的代码 完成js操作 类似于Python里面的模块，再前端模块不叫模块，叫类库

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

 

jquery的宗旨

write less do mors

让你用更少的代码完成更多的事情

jquery再使用的时候也需要导入  但是他的文件非常的小 不影响网络速度（几十kb）

版本：1.x   2.x    3.x 用3.x

jquery文件下载 

压缩  容量更小

未压缩

jquery在使用之前一定要确保导入了:

<script   src="jQuery-3.4.1.js"></script>

针对导入问题的方案：

1.文件下载到了本地 如何解决多个文件反复书写引入语句的代码

可以借助于pycharm自动初始化代码功能完成自动添加

配置

　　编辑

　　　　file and code template在这里写入导入语句

2.直接引入jquery提供的cdn服务（基于网络直接请求加载）

cdn：内容分发网络

cdn与免费的也有收费的

前端免费的cdn网站：bootcdn

min就是压缩

<stript

src="https://cdn.bootcdn.net/libs/jquery/3.4.1/jquery.min.js">

</script>

计算机必须有网络

jquery基本语法：

jQuery(选择器).action()

秉持着jQuery的宗旨 jQuery简写：

jQuery()===$()

例如：$('p').css('color','blue')

对应的js代码：

let pEle=document.getElementById('d1')

pEle.style.color='red'

 

基本选择器：

//id 选择器

$('#d1')

//class选择器

$('.c1')

//标签选择器

$('span')

一定要区分开（重点）

//jQuery对象如何变成标签对象

$('#d1')[0]

document.getElementById('d1')

//标签对象如何转jQuery对象

$(document.getElementById('d1'))

 

组合选择器/分组与嵌套

$('div')拿到所有div

$('div.c1')  找有c1样式类的c1

$('div#d1')找id是1的div

$('*')所有

$('#d1,c1,p')并列+混用

$('div span')后代

$('div>span')儿子

$('div+span')毗邻 紧挨着下一个

$('div~span')弟弟 下面所有

 

基本筛选器

$('ul li') 无需列表

$('ul li:first')  大儿子

$('ul li:last')小儿子

$('ul li:eq(2)') 放索引 排序为2的

$('ul li:even')  偶数索引 0包含在内

$('ul li:odd')奇数索引

$('ul li:gt(2)') 大于索引

$('ul li:lt(2)') 小于索引 拿到索引小于2的元素

$('ul li:not('#d1')')移除满足条件的标签

$('div')

$('div:has('p')')找到里面含有一个或多个p标签在内的标签 父级

 

属性选择器

$('[username]')

$('[username="zhuzhu"]')

也可以用内置的属性：

$('[type="text"]')

 

表单筛选器

在表单中 可以使用：来代替 例如：

$('input[type="text"]') 等价于 $(':text')

$('input[type="password"]') 等价于 $(':password')

$(':checked') #他将会checked和selected都拿到

$(':selected')#他不会 只拿selected

$('input:checked') #自己加一个限制条件

 

 

筛选器方法

 

$('#d1').next 同级别下一个

$('#d1').nextAll() 下面所有

$('#d1').nextUntil('.c1') 不包括最后一个

$('.c1').prew() 上一个

$('#d3').parent() 第一级父标签

$('#d2').children()  后代 儿子

$('#d2').siblings()同级别上下所有

 

 

下述两两等价：

$('div span:first')

$('div span').first()

 

$('div span:last')

$('div span').last

 

$('div span:not("#d3")')

$('div span').not('#d3')

 

标签：jQuery,span,选择器,筛选,li,div,d1
From： https://www.cnblogs.com/97zs/p/17801718.html