请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

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') 获取所有索引为 偶数 的元素

以上就是本文的全部内容,感谢大家支持JScript之家——编程学习者社区!



回复

使用道具 举报

11 个回复

倒序浏览
admin  管理员 沙发 | 2022-5-7 09:16:23 | 显示全部楼层
二 筛选器
用在 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() 获取元素的索引位置
索引位置是指 是该父元素下的第几个元素 拿到的是 数字


回复 支持 反对

使用道具 举报

admin  管理员 板凳 | 2022-5-7 09:20:53 | 显示全部楼层
三 文本操作
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文档




回复 支持 反对

使用道具 举报

admin  管理员 地板 | 2022-5-7 10:06:01 | 显示全部楼层
四 元素类名操作
addClass() 添加类名
执行这个方法会给元素集合里面所有的元素添加上固定的类名
如果有就不添加, 不存在这个类名时添加
removeClass() 移除类名
执行这个方法删除 元素集合里面所有元素 的指定类名
toggleClass()切换类名
执行这个方法会给元素集合里面的所有元素切换类名
本身存在这个类名, 删除类名
本身不存在这个类名, 添加类名
hasClass() 判断有没有某一个类名
返回的时一个布尔值, 表示这个类名是否存在


回复 支持 反对

使用道具 举报

admin  管理员 #5 | 2022-5-7 10:41:09 | 显示全部楼层
五 元素属性操作
在 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 设置的自定义属性存储在元素对象里面单独开辟的一个对象



回复 支持 反对

使用道具 举报

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


回复 支持 反对

使用道具 举报

admin  管理员 #7 | 2022-5-7 11:29:03 | 显示全部楼层
七 绑定事件
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('移出事件') }
    // })


回复 支持 反对

使用道具 举报

admin  管理员 #8 | 2022-5-7 11:33:23 | 显示全部楼层
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)
    // })


回复 支持 反对

使用道具 举报

admin  管理员 #9 | 2022-5-7 13:45:39 | 显示全部楼层
八 节点操作
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,那么第二个参数不起作用,没有意义。
不管你是否传递参数, 都会把所有后代元素都克隆下来
元素 + 文本内容 + 属性 + 行内样式
参数只决定是否克隆元素身上的事件


回复 支持 反对

使用道具 举报

admin  管理员 #10 | 2022-5-7 13:51:06 | 显示全部楼层
九 获取元素尺寸
尺寸: 元素的占地面积
width 和 height
padding
border
margin
三套方法, 四种使用方式
这些方法都是不考虑盒模型的状态(不管是什么型, 都是固定区域)

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

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

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

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


回复 支持 反对

使用道具 举报

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则