大家好,欢迎来到IT知识分享网。
jQuery类库
- jQuery类库
- 一、简介
- 二、jQuery查找对象
- 1、选择器🕸️
- 2、赛选器🏳️🌈
- 3、操作标签
- 三、jQuery事件
- 1、JS绑定事件
- 2、取消后续事件
- 3、阻止事件冒泡
- 4、等待页面加载完毕执行
- 四、jQuery动画效果
一、简介
Write less do more 写的更少做的更多
1.优点
1.加载速度快
2.选择器更多更好用
3.一行代码走天下
4.支持ajax请求(重点)
5.兼容多浏览器
2.准备工作
1.下载核心文件到本地引入(没有网络也可以使用)
<script src="jQuery3.6.js"></script>
2.CDN网络资源加载(必须有网络才可以使用)
资源下载地址:
https://www.bootcdn.cn/
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
3.什么是CND
CND是网络加速服务,内容分发网络
1. 不用担心自己网站访客,在任何时间,任何地点,任何网络运营商,都能快速打开网站。
2. 各种服务器虚拟主机带宽等采购成本,包括后期运维成本都会大大减少。
3. 给网站直接带来的好处就是:流量,咨询量,客户量,成单量,都会得到大幅度提升。
4.jQuery导入与用法
导入:
在< head > 标签内,通过< script > 标签导入
1、导入链接:
<script src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
2、导入文件
<script src = "jQuery文件路径.js"></script>
用法:
默认的关键字就是jQuery但是不好输入 >>>:$
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快
5.jQuery与JS代码对比
1、JS代码查询标签并修改属性
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
pEle.nextElementSibling.style.color = 'green'
2、jQuery代码查询并修改属性
$('p').first().css('color','yellow').next().css('color', 'blue')
6.标签对象与jQuery对象
注意事项
- 不同的对象能够调用的方法是不同的
- 在编写代码的时候一定要看清楚手上是什么对象
- 两者可以互相转换
- 标签对象转jQuery对象:$(标签对象)
- jQuery对象转标签对象:jQuery对象[0]
二、jQuery查找对象
1、选择器🕸️
基本选择器
$('#d1') id选择器
$('.c1') class选择器
$('div') 标签选择器
组合选择器
$('div#d1') 查找id是d1的div标签
$('span.c1') 查找含有c1样式类的span标签
$('div,span,p') 查找div或者span或者p标签
$('#d1,.c1,span') 查找id是d1的或者class含有c1的或者span标签
层级选择器
$('div p') 查找div里面所有的后代p标签
$('div>p') 查找div里面的儿子p标签
$('div+p') 查找div同级别下面紧挨着的p标签
$('div~p') 查找div同级别下面所有的p标签
属性选择器
$('[username]') 查找含有username属性名的标签
$('[username="jason"]') 查找含有username属性名并且值等于jason的标签
$('input[username="jason"]') 查找含有username属性名并且值等于jason的input标签
2、赛选器🏳️🌈
基本筛选器
通过查找到的标签对象,可使用筛选器进行二次筛选
- 用法:
- $(‘标签对象:筛选器关键词’)
- 优化:
- $(‘标签对象’).赛选器关键词()
关键词 | 描述 |
---|---|
:first | 第一个 |
:last | 最后一个 |
:eq(index) | 索引等于index的那个元素 |
:even | 从0开始,匹配所有索引位置为偶数的元素 |
:odd | 从0开始,匹配所有索引位置为奇数的元素 |
:gt(index) | 匹配所有大于指定索引值的元素 |
:lt(index) | 匹配所有小于指定元素值的元素 |
:not(元素选择器) | 移除所有满足not条件的标签 |
:has(元素选择器) | 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) |
表单筛选器
表单筛选器只能针对表单标签使用,可以通过表单标签独有的属快速找到对应的表单标签
$(':text')
$(':password')
$(':selected') selected
// checked与selected都会找到
$(':checked') checked与selected都会找到
筛选器方法
1、同级向下查找
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
2、同级向上查找
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
3、所有同级标签
$("#id").siblings();// 兄弟们
4、父级查找
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
5、儿子级查找
$("#id").children(); // 所有的子类标签
3、操作标签
1.Class操作
关键词 | 描述 | 对比JS代码 |
---|---|---|
addClass() | 添加类名 | classList.add() |
removeClass() | 删除类名 | classList.remove() |
hasClass() | 判断指定标签下是否含有该类名,返回true/false | classList.contains() |
toggleClass | 判断指定标签下是否含有该类名,返回false/true | classList.toggle() |
2.位置操作
关键词 | 描述 |
---|---|
$(window).scrollTop() | 返回当前所在页面滚轮距离页首的位置 |
3.文本操作
关键词 | 描述 | 对比JS代码 |
---|---|---|
text() | 给标签内部添加文本内容 | innerText |
html() | 给标签内部添加文本,也可以直接添加标签 | innerHtml |
val() | 给标签添加value值 | value |
files | 获取用户上传的文件 | files[0] |
4.创建标签
关键词 | 描述 | 对比JS代码 |
---|---|---|
$(‘<标签类>’) | 创建标签 | document.createElement() |
5.操作属性
关键词 | 描述 | 对比JS代码 |
---|---|---|
attr() | 输入属性名,获取该属性对应的值 | getAttribute() |
renameAttr() | 删除指定的标签属性 | removeAttr() |
prop() | 可是实时获取指定的属性值 |
6.文档处理
$(A).append(B) // 把B追加到A
$(A).appendTo(B) // 把A追加到B
$(A).prepend(B) // 把B前置到A
$(A).prependTo(B) // 把A前置到B
$(A).after(B) // 把B放到A的后面
$(A).insertAfter(B) // 把A放到B的后面
$(A).before(B) // 把B放到A的前面
$(A).insertBefore(B) // 把A放到B的前面
remove() // 从DOM中删除所有匹配的元素。
empty() // 删除匹配的元素集合中所有的子节点。
三、jQuery事件
1.click(function(){...})
当用户点击某个对象时调用
2.hover(function(){...})
鼠标移入时调用
3.blur(function(){...})
元素失去焦点调用
4.focus(function(){...})
元素获得焦点时调用
5.change(function(){...})
域的内容被改变
6.keyup(function(){...})
鼠标操作时调用
1、JS绑定事件
默认就用方式1 不行了再用方式2
使用事件触发的clone,不会复制标签的事件,想要复制标签的事件,需要再后方参数内填入 true
方法一:
jQuery对象.事件名(function(){})
方法二:
jQuery对象.on('事件名称',function(){})
clone属性
clone(true) 默认不克隆事件 加true就可以
2、取消后续事件
若一个标签自身有默认事件,我们也给其绑定了事件,那么就会先执行手动绑定的事件,后执行标签自身的事件
取消后续事件
事件函数的最后return false即可
3、阻止事件冒泡
事件冒泡是指,绑定事件的标签的父标签也绑定了事件,那么只要触发了事件执行的条件,就会由标签向其父标签的顺序执行事件
阻止事件冒泡
事件函数的最后return false即可
4、等待页面加载完毕执行
通常我们建议将JS代码放在body标签的最下方,先由HTML标签加载完毕后再执行JS代码,但是JS代码也可以放在head标签内,但是如果直接放置再head标签内的话,会产生找不到标签的问题
解决方法
$(function(){}) 缩略写法
$(document).ready(function(){}) 完整写法
四、jQuery动画效果
// 基本
show([s],[e],[fn])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义(了解即可)
animate(p,[s],[e],[fn])
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/30501.html