jQuery超详细总结笔记

jQuery 是一个前端库，也是一个方法库
他里面封装着一些列的方法供我们使用
我们常用的一些方法它里面都有，我们可以直接拿来使用就行了
jQuery 之所以好用，很多人愿意使用，是因为他的几个优点太强大了
优质的选择器和筛选器
好用的隐式迭代
强大的链式编程
因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”
接下来我们就来认识一下 jQuery

一 选择器
$()
css怎么获取元素这里就怎么写
获取的是一组元素，当里面是id时，这组元素只有一个内容
特殊选择器
:first $('li:first') 获取元素集合里的 第一个元素
//  console.log($('li:first'))
:last $('li:last') 获取元素集合里的 最后一个元素
:eq() $('li:eq()')获取元素集合里 索引为n 的那个元素，索引从0开始
: odd $('li: odd') 获取所有索引为 奇数 的元素
:even $('li:even') 获取所有索引为 偶数 的元素

以上就是本文的全部内容,感谢大家支持!

二 筛选器
用在 jQuery 选择的元素后面
都是方法,对选择出来的元素进行二次筛选
first() 筛选 元素集合里面的 第一个元素
//  console.log($('li').first())
last() 筛选 元素集合里面的 最后一个元素
eq(n) 筛选元素集合里 索引为n 的那个元素
next() 筛选出来 元素 的下一个 兄弟元素
nextAll() 筛选出 元素后面的 所有 兄弟元素
nextAll(选择器) 筛选出元素后面的 所有兄弟元素 中符合选择器的元素
nextUntil(选择器) 筛选出 元素后面的所有兄弟元素 直到 选中的元素为止 不包含选中的元素
//  console.log($('span').nextUntil('.a10'))
prev() 筛选出来 元素 的上一个 兄弟元素
prevAll() 筛选出 元素上面的 所有 兄弟元素 （元素集合中的元素 从上一个兄弟元素开始排序）
prevAll(选择器) 筛选出 元素上面的 所有兄弟元素 中符合选择器的元素
prevUntil(选择器) 筛选出 元素上面的所有兄弟元素 直到 选中的元素为止 不包含选中的元素
//  console.log($('span').prevUntil('.a10'))
parent() 筛选出元素的 父元素
parents()筛选出元素的 所有祖先元素 直到html元素
parents(选择器)拿到 所有祖先元素中的符合选择器的元素
parentsUntil(选择器)筛选出元素的 所有的祖先元素 直到某一个元素 不包含该元素
//  console.log($('span').parents('body'))
// console.log($('span').parentsUntil('html'))
children() 筛选出元素的 所有子级元素
children(选择器) 筛选出元素 所有子级元素中的 符合选择器的元素
siblings() 筛选出所有的兄弟元素 不包含 自己
siblings(选择器) 筛选出所有的兄弟元素中的 符合选择器的元素
find(选择器)
1、筛选 一个元素后代中的 符合选择器的元素
2、在一个元素集合的每一个元素中 查找后代元素 符合选择器的元素
index() 获取元素的索引位置
索引位置是指 是该父元素下的第几个元素 拿到的是 数字

三 文本操作
html() 一个读写的属性
html()不传递 参数的时候 就是获取元素内部的超文本内容
html(参数)传递 参数的时候 就是设置元素内部的超文本内容
text() 一个读写的属性
text()不传递 参数的时候 就是获取元素内部的超文本内容
text(参数)传递 参数的时候 就是设置元素内部的超文本内容
val() 一个读写的属性 操作 input 标签
val()不传递参数的时候, 就是获取标签的 value 值
val(参数)传递一个参数的时候, 就是设置标签的 value 值

总结
获取
html() 只能获取第一个元素的超文本内容
text() 能获取元素集合内所有元素的文本内容合
val() 只能获取第一个元素的 value 值
设置
html() 给元素集合内所有元素设置超文本内容
text() 给元素集合内所有元素设置文本内容
val() 给元素集合内所有元素设置 value 值

html() 与text()区别
无参数时
1、当选中多个元素时使用html()方法只会获取到第一个元素里的文本内容；而text（）会把所有元素的文本内容拼接为同一个字符串（去掉HTML标签）。
2、html（）会把元素里包含的标签都作为字符串获取，而text（）仅获取文本内容
有参数时
1、html()会识别出填入的标签；而text（）会把标签也当做字符串为元素设置
2、html（）不能用于xml文档，但能用于XHTML文档

四 元素类名操作
addClass() 添加类名
执行这个方法会给元素集合里面所有的元素添加上固定的类名
如果有就不添加, 不存在这个类名时添加
removeClass() 移除类名
执行这个方法删除 元素集合里面所有元素 的指定类名
toggleClass()切换类名
执行这个方法会给元素集合里面的所有元素切换类名
本身存在这个类名, 删除类名
本身不存在这个类名, 添加类名
hasClass() 判断有没有某一个类名
返回的时一个布尔值, 表示这个类名是否存在

五 元素属性操作
在 H5 的标准下, 给了一个定义, 当你需要写自定义属性的时候，最好写成 data-xxx=“值”，当大家看到 data-xxx 的时候, 就知道这是一个自定义属性
attr() 和 removeAttr()
attr: attribute 属性
attr()
是一个读写的方法
attr(要读取的属性名): 传递一个参数的时候是读取
attr(属性名, 属性值): 传递两个参数的时候是设置
removeAttr()
专门用来移除属性的
attr 这套方法的注意:
所有的属性都会显示在标签上(原生属性和自定义属性)
不管你设置的是什么数据类型, 都会给你变成字符串
removeAttr 删除 attr 设置的属性, 有多少删除多少(针对自定义属性)

prop() 和 removeProp()
prop: property 属性
prop()
一个读写的方法
prop(要读取的属性名): 传递一个参数的时候是读取
prop(属性名, 属性值): 传递两个参数的时候是设置
removeProp()专门用来移除属性的
prop 这套方法的注意:
非原生属性, 不会显示在标签上, 但是你可以获取使用
你存储的是什么数据类型, 获取的时候就是什么数据类型
removeProp ()
删除 prop 设置的属性, 有多少删除多少(针对自定义属性)
removeProp() 不能删除原生属性 id class style 等等

data() 和 removeData()
data: data 数据
data()
一个读写的方法
data(要读取的属性名): 传递一个参数的时候是读取
data(属性名, 属性值): 传递两个参数的时候是设置
removeData()
专门用来删除数据的
data 这套方法的注意:
和元素的原生属性没有关系, 可以设置 id, 但是和元素的 id 没关系
就是在元素身上给你开辟一个地方, 存储一些数据
你设置的是什么数据类型, 拿到的就是什么数据类型
removeData 删除 data 设置的属性
data() 方法也能读取写在标签上的 H5 标准自定义属性

三个方法存储内容
attr 设置的自定义属性存储在标签身上
prop 设置的自定义属性存储在元素对象里面
data 设置的自定义属性存储在元素对象里面单独开辟的一个对象

六 元素样式操作
css()
一个读写的属性
不同操作需要 传递 不同的参数
css('样式名称')
css('width')
获取元素的样式值, 不管是行内样式还是非行内样式都能获取
css('样式名称', '样式的值')
css('width', '200px')
设置元素的样式值, 元素集合能获取多少个元素就置多少个元素
设置的时候, 所有的单位都可以不写, 默认添加 px为单位
css(对象)
css({ width: 100, height: '200px', opacity: 0.5 })
批量设置 css 样式
给元素集合里面的所有元素, 批量设置样式

七 绑定事件
1. on()方法是专门用来绑定事件
jQuery 里面通用的事件绑定方式
不同操作 传递 不同参数
on方法的各种参数描述
on('事件类型', 事件处理函数)
给元素集合内所有的元素绑定一个事件
// 给 $('li') 获取到的所有元素绑定一个点击事件
    // $('li').on('click', function () {
    //   console.log('我被点击了')
    // })
on('事件类型', '事件委托', 事件处理函数)
把 事件委托 位置的元素的事件 委托给了前面元素合
    // 给所有的 li 标签设置事件委托, 委托给了 ul
    // $('ul').on('click', 'li', function () {
    //   console.log('我被点击了, 事件委托')
    // })

on('事件类型', 复杂数据类型, 事件处理函数)
给每一个元素绑定一个事件, 复杂数据类型是发事件时候传递的参数
//   每一个 li 点击的时候, 都能得到中间那个对象
    //   就是事件对象了面
    // $('li').on('click', { name: 'Jack', age: 18 }, function (e) {
    //   console.log('我被点击了, li')
    //   console.log(e)
    // })

on('事件类型', '事件委托', 任意数据类型, 件处函数)
做一个事件委托的形式, 第三个参数位置的数据
是触发事件的时候, 可以传递进去的数据
on(对象)
给一个元素绑定多个事件的方式 不能传参数
// $('ul').on({
    //   click: function () { console.log('点击事件') },
    //   mouseover: function () { console.log('移入事件') },
    //   mouseout: function () { console.log('移出事件') }
    // })

2. one() 方法是专门用来绑定一个只能执行一次的方法
传递的参数个数和意义 于 on 方法一摸一样
绑定上的事件只能执行一次
3. off() 方法是专门用来解绑一个元素的事件的
使用方式
off('事件类型') : 给该事件类型的所有事件处理函数解绑
off('事件类型', 事件处理函数) : 解绑指定事件处理函数
注意：on 和 one 绑定的事件它都能移除
4. trigger() 方法是专门用来触发事件的方法
不通过点击, 通过代码把事件触发了
trigger('事件类型') : 把该元素的事件给触发了
5. hover()
jQuery 里面唯一一个很特殊的事件函数
表示一个鼠标悬停动作
只有一个使用方式
hover(鼠标移入的时候触发, 鼠标移出的时候触发)
// hover 事件
    //   如果你只传递一个函数, 那么移入移出都触发这一个函数
    $('ul')
      .hover(
        function () { console.log('鼠标移入') },
        function () { console.log('鼠标移出') }
      )

6. 常用事件
jQuery 把一些常用事件直接做成了函数
click()
mouseover()
. . . . . .
直接使用就可以了

使用 click 举一个例子
click(事件处理函数)
click(参数, 事件处理函数)
参数: 触发事件的时候传递到事件里面的数据
    // 常用事件
    // 给 ul 绑定了一个点击事件
    // $('ul').click([1, 2, 3, 4, true], function (e) {
    //   console.log('你好 世界')
    //   console.log(e)
    // })

八 节点操作
1. 创建节点
对应原生 js 里面的 createElement()
$('html 格式的文本')
// 创建一个 div 元素
    console.log($('<div>我是一个创建出来的节点</div>'))

2. 插入节点
对应原生 js 里面的 appendChild()
内部插入
放在页面元素的子元素位置, 放在末尾
页面元素.append(要插入的元素)
要插入的元素.appendTo(页面元素)
放在页面元素的子元素位置, 放在最前
页面元素.prepend(要插入的元素)
要插入的元素.prependTo(页面元素)
外部插入
放在页面元素的下一个兄弟元素位置
页面元素.after(要插入的元素)
要插入的元素.insertAfter(页面元素)
放在页面元素的上一个兄弟元素位置
页面元素.before(要插入的元素)
要插入的元素.insertBefore(页面元素)

3. 删除节点
对应原生 js 里面的 removeChild()
页面元素.empty() -> 把自己变成空标签,将所有子元素移除
页面元素.remove() -> 把自己移除
没有删除某一个子节点的方法，因为 jQuery 的选择器的强大，直接找到要删除的节点, remove()


4. 替换节点
对应原生 js 里面的 replaceChild()
页面元素.replaceWith(替换元素)
替换元素.replaceAll(页面元素)


5. 克隆节点
对应原生 js 里面的 cloneNode()
元素.clone()
两个参数的值为 true或false
第一个参数: 自己的事件是否克隆
第二个参数: 子节点的事件是否克隆
如果第一个参数的值为false,那么第二个参数不起作用，没有意义。
不管你是否传递参数, 都会把所有后代元素都克隆下来
元素 + 文本内容 + 属性 + 行内样式
参数只决定是否克隆元素身上的事件

九 获取元素尺寸
尺寸: 元素的占地面积
width 和 height
padding
border
margin
三套方法, 四种使用方式
这些方法都是不考虑盒模型的状态(不管是什么型, 都是固定区域)

width() 和 height()
获取元素的 内容 区域的尺寸

innerWidth() 和 innerHeight()
获取元素的 内容 + padding 区域的尺寸

outerWidth() 和 outerHeight()
获取元素的 内容 + padding + border 区域的尺寸

outerWidth(true) 和 outerHeight(true)
获取元素的 内容 + padding + border + margin 区域的尺寸