前端开发:6、jQuery类库简介与基本使用

前端开发:6、jQuery类库简介与基本使用jQuery类库一、简介​ Writelessdomore写的更少做的更多1.优点1.加载速度快2.选择器更多更好用3.一行代码走天下4.支持ajax请求(重点)5.兼容多浏览器2.准备工作1.下载核心文件到本地引入(没有网络也可以使用)<scriptsrc=&

大家好,欢迎来到IT知识分享网。前端开发:6、jQuery类库简介与基本使用"

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

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信