jQuery
jQuery 内部封装了原生的js代码 (还额外添加了很多功能)
能够让你通过书写更少的代码 完成js操作
类似于python里面的模块 在前端 模块不叫模块 叫类库
兼容多个浏览器的 你在使用jQuery的时候不需要考虑兼容性的问题
jQuery的宗旨
write less do more
让你用更少的代码完成更多的事情
# 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]
// class选择器
$('.c1')
S.fn.init [p.c1, prevObject: S.fn.init(1)]0: p.c1length: 1prevObject: S.fn.init [document]__proto__: Object(0)
// 标签选择器
$('span')
S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]
// jQuery对象如何变成标签对象
undefined
$('#d1')[0]
<div id="d1">…</div>
// 标签对象如何变成jQuery对象
undefined
$(document.getElementById('d1'))
S.fn.init [div#d1]
属性选择器
$('[username]') # 跟css基本一样 找属性有username的标签
$('[username="jason"]') # 找属性值为jason的username属性的标签
组合选择器
跟css的一样 css的选择器学好了 这里就熟悉一下就行
表单筛选器
$('input[type="text"]')
S.fn.init [input, prevObject: S.fn.init(1)]0:
$(':text') # 跟上面那个效果一样 但是这种查询只限于form表单查询
S.fn.init [input, prevObject: S.fn.init(1)]
* 表单对象属性
:enabled
:disabled
:checked
:selected
'''特殊情况'''
$(':checked') # 在页面同时有checked和selected的时候它会将checked和selected都拿到
$('input:checked') # 自己加一个限制条件就可以规避
基本筛选器
$('ul li:first') // ul中所有的li 且第一个 俗称大儿子(在拿到li标签后继续筛选)
$('ul li:last') // 小儿子
$('ul li:eg(2)') // 放索引
$('ul li:even') // 偶素索引 0包含在内
$('ul li:odd') // 奇数索引
$('ul li:gt(2)') // 索引值大于2的 标签(ul 中的li)都取
$('ul li:lt(2)') // 同上小于
$('ul li:not("#d1")')// 不要id为d1的li标签 注意要用双引号括起来
$('div:has("p")') // 找内部有p标签的div标签
## :has 是选取出一个或多个标签在内的标签 因此双引号里面只能填写标签 填写id class都是筛选不出来的
筛选器方法
$('#d1').next() # 同级别的下一个
S.fn.init [span, prevObject: S.fn.init(1)]
$('#d1').nextAll() # 同级别的下面所有
S.fn.init(5) [span, div#d2, span, span.c1, div#xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}.xl-chrome-ext-bar, prevObject: S.fn.init(1)]
$('#d1').nextUntil('.c1') # 同级别的下面所有直到 有.c1样式的标签之前 不包括这个
S.fn.init(3) [span, div#d2, span, prevObject: S.fn.init(1)]
$('.c1').prev() # 上一个
S.fn.init [span, prevObject: S.fn.init(1)]
$('.c1').prevAll() # 上面的全部
S.fn.init(4) [span, div#d2, span, span#d1, prevObject: S.fn.init(1)]
$('.c1').prevUntil('#d2')
S.fn.init [span, prevObject: S.fn.init(1)]
$('#d3').parent() # 获取该标签的父标签
S.fn.init [p, prevObject: S.fn.init(1)]
$('#d3').parents() # 祖宗 (一直网上去)
S.fn.init(4) [p, div#d2, body, html, prevObject: S.fn.init(1)]
$('#d3').parentsUntil('body') # 往上直到 body
S.fn.init(2) [p, div#d2, prevObject: S.fn.init(1)]
$('#d2').children() # 子标签
S.fn.init(3) [span, p, span, prevObject: S.fn.init(1)]
$('#d2').siblings() # 所有同级别标签
S.fn.init(5) [span#d1, span, span, span.c1,
# 两种找标签的方式 完全等价
$('div p')
$('div').find('p') # 先划定 div区域 然后find从这片区域找p标签
$('div span:first') == $('div span').first() # 后者方法更加见名之意一些 下面同理
== 这是对基本筛选器语句的优化 书写的更加便捷 ==
$('div span:last') == $('div span').first()
$('div span:not("#d3")') == $('div span').not("#d3")