jQuery
大多数函数支持链式操作 一个主语执行完一个函数后 这个函数又返回该主语 可以继续用点接着执行其它函数
查找
1.按选择器
$(...)支持所有css选择器
css中没有的，jQuery添加的
基本过滤：先将所有元素收集到一个结果集合中统一编号，再选择集合中指定位置的元素，和元素在其父元素下的位置无关
first-child vs first
内容过滤：3种
1.按包含的文本内容过滤
:contains(text) 查找内容中包含指定text文本的元素
2.按子元素特征过滤
:has(selector) 查找内容中包含符合selector要求的子元素的父元素
3.按是否包含内容过滤
:empty 空元素
:parent 非空的元素
可见性过滤：
:hidden 只能选中两种情况的隐藏
1.display: none
2.input type=hidden
:visible
状态过滤：三大状态 :disabled :checked :selected
表单元素过滤：
:input 可以选择四大类表单元素 input、button、textarea、selected
:[type] 每种input都对应一种专门的选择器
:text :password :checkbox :radio
2.按节点间关系
父元素 .parentNode => .parent()
直接子元素 .children => .children()
查找父元素下符合条件的子元素：
.children(['selector']) 只能找直接子元素
.find('selector') 在所有后代中查找
第一个子元素 .firstElementChild => .children().first()
最后一个子元素 .lastElementChild => .children().last()
前一个兄弟 .previousElementSibling => .prev()
.prevAll()
后一个兄弟 .nextElementSibling => .next()
.nextAll()
除我之外，所有兄弟 .siblings([selector])
修改：一个函数两用(get、set)
内容
.innerHTML => .html()
.textContent => .text()
.value => .val()
属性
标准属性
elem.属性名 => $elem.attr('属性名'[,值])
状态属性
elem.属性名 => $elem.prop('状态属性'[,bool])
自定义扩展属性
elem.dataset.属性名 => $elem.data('属性名'[,值])
样式
修改内联样式
1.仅修改一个css属性
.style.css属性=值 => .css('css 属性名'[,值])
2.批量修改多个css属性
.css({
'css 属性名': 值,
...: ...
})
批量修改
用class批量修改样式
1.为元素追加一个class
$(...).addClass('class 名')
2.为元素移除一个class
$(...).removeClass('class 名')
3.判断是否包含一个class
$(...).hasClass('class 名')
4.为元素切换一个class
$(...).toggleClass('class 名')
补充：
.index()
1.let i = $('selector').index(jq 对象/DOM 对象);
查找右边的jq对象或者DOM对象在左边的集合中的下标位置
2.如果在同一个父元素下找某个子元素的位置
let i = $(child).index();
添加
1.用$()创建一个新元素：let $新元素 = $('html 片段')
2.将新元素添加到dom树：
$('parent').append($新元素);
.prepend($新元素);
$('child').before($新元素);
.after($新元素);
可以更简化：$('parent').append/prepend('html片段');
$('child').before/after('html片段');
删除/替换/克隆
删除：
$(...).remove();
替换：
$('selector').replaceWith(jq 对象|DOM 对象);
克隆：
let $cloneElem = $('selector').clone();
强调：浅克隆：仅克隆样式和属性，不克隆行为，clone()
深克隆：既克隆样式和属性，又克隆行为，clone(true)
事件绑定
jQuery中共有几种事件绑定方式？区别
DOM:.addEventListener('事件名', handler)
.removeEventListener(...)
jq:
1.$(target).bind/unbind()，同.addEventListener('事件名', handler)
.unbind()三种重载：
.unbind('事件名', handler)移除当前元素上，指定事件上的名为handler的处理函数
.unbind('事件名')移除当前元素上，指定事件上的所有处理函数
.unbind()移除当前元素上，所有事件的监听
2.$(target).one('事件名', handler)同bind
区别：只触发一次，触发后自动解绑
3.live/die('事件名', handler)--已废弃
原理：将所有事件集中绑定在顶级document上
4.$(parent).delegate('selector', '事件名', handler)
原理：简化利用冒泡
1.获得目标元素：this->e.target
2.筛选目标元素：第一个参数 selector
只有满足selector要求的元素才能触发事件
bind vs delegate
1.bind直接绑定在目标元素上
delegate绑定在父元素上
2.监听个数
bind:监听个数多--每个目标元素都添加
delegate:监听个数少--只给父元素添加
3.新增子元素自动获得事件处理函数
.bind只能对现有元素添加事件监听
新增元素无法自动获得监听
.delegate
只要父元素下的元素，无论是现有，还是新增，都能自动获得父元素上统一的事件监听
5.on/off
1.代替bind，on('事件名', handler)，同bind
2.代替delegate，on('事件名', 'selector', handler)，同delegate
6.事件名
强调：仅对常用的事件提供了终极简化
页面加载后执行：2种
1.DOMContentLoaded:仅DOM内容加载完，就可提前执行
DOM内容仅包括html,js
提前触发
何时：只要不依赖与css和图片的所有操作都可在DOM内容加载后，提前触发
比如：事件绑定
jq:
$(document).ready(function(){
// DOM内容加载后，就可执行的操作
// 比如：事件绑定
});
简化：$(()=>{...})
2.window.onload()在所有页面内容加载完成后自动触发
包括：html,css,js,图片
何时：如果js代码必须依赖css或图片才能执行时
模拟触发：
虽然没有触发事件，但是依然可用程序模拟执行元素的事件处理函数
$(...).trigger('事件名');