前端-jQuery

目录

1. 安装
2. 基本语法
3. 选择器
4. 筛选器
5. 常用方法
6. 操作CSS
7. 事件
8. 动画效果
9. AJAX

1、安装

jQuery是一个JavaScript库

1、从 jquery.com 下载 jQuery 库
2、使用CDN（内容分发网络）引用
	在head标签内添加
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
3、查询使用版本
	在console内输入$.fn.jquery
	>>> $.fn.jquery
	"1.9.1"

2、基本语法

"""基本语法"""
$(selector).action()
"""
$：美元符，定义jQuery对象
selector：选择器
action：对元素的操作
"""

"""jQuery对象与DOM对象转换"""
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
>>> var divEle = document.getElementByTagName("div")			# 生成DOM对象并查找所有标签为div的元素
>>> $("div")													# 生成jquery对象并查找所有标签为div的元素
>>> $("div")[0]													# 转换成DOM对象
>>> $(divEle)													# 转场jquery对象	

3、选择器

3.1 基本选择器

"""id选择器"""
$("#id")

"""标签选择器"""
$("tagName")

"""class选择器"""
$(".className")

"""组合使用"""
逗号(',')连接：同时选择两个选择器
点('.')连接：选择含有该类的元素
空格(' ')连接：选择父类里的所有子元素(只能选择标签，可以跨级)
大于号('>')连接：选择父类里面的子元素
加号('+')连接：选择紧挨着的同级元素
波浪号('~')连接：选择下面的所有同级元素

实例：
$("div.c1")		# 选择所有含有c1类的div
$("div,c1")		# 同时选择拥有div标签和含有c1属性的标签
$("div p")		# 选择div下所有的p标签
$("div>p")		# 选择div下的子p标签，仅直属下面的
$("div+p")		# 选择div下面的同级p标签，仅挨着的同级标签
$("div~p")		# 选择dib下面的所有同级p标签。

3.2 属性选择器

$("tagName[attribute]")			# 含有属性的元素
$("tagName[attribute=value]")	# 含有属性等于value的元素
$("tagName[attribute!=value]")	# 含有属性不等于value的元素

实例：
$("input[type]")				# 选择含有type属性的input标签
$("input[type='text']")			# 选择含有type='text'的input标签
$("input[type!='checkbox']")	# 选择含有type!='checkbox'的input标签

4、筛选器

4.1 基本筛选器

$("tagName:first")				# 第一个
$("tagName:last")				# 最后一个
$("tagName:eq(index)")			# 索引等于index的元素
$("tagName:even")				# 偶数元素，从零开始
$("tagName:odd")				# 奇数元素，从零开始
$("tagName:gt(index)")			# 大于索引index的元素
$("tagName:lt(index)")			# 小于索引index的元素
$("tagName:not(元素)")			# 不是括号里标签的所有元素
$("tagName:has(元素)")			# 含有括号里的标签

实例：
$("div:first")					# 筛选第一个元素
$("div:last")					# 筛选最后一个元素
$("div:eq(3)")					# 筛选索引等于3的元素
$("div:even")					# 筛选偶数索引的元素
$("div:odd")					# 筛选奇数索引的元素
$("div:gt(2)")					# 筛选索引大于2的元素
$("div:lt(3)")					# 筛选索引小于3的元素
$("div:not(.c1)")				# 筛选不含有c1类的元素
$("div:has(.c1)")				# 筛选含有c1类的元素

4.2 表单筛选器

# 筛选input含有text属性的元素，可以省略input
$("input:text")			# 筛选input含有text属性的元素
$(":password")			# 筛选input含有password属性的元素
$(":file")				# 筛选input含有file属性的元素
$(":radio")				# 筛选input含有radio属性的元素
$(":checkbox")			# 筛选input含有checkbox属性的元素
$(":submit")			# 筛选input含有submit属性的元素
$(":reset")				# 筛选input含有reset属性的元素
$(":button")			# 筛选input含有button属性的元素
$(":enabled")			# 筛选input含有enabled属性的元素
$(":disabled")			# 筛选input含有disabled属性的元素
$(":checked")			# 筛选input含有checked属性的元素
$(":selected")			# 筛选input含有selected属性的元素

实例：
$(":text")				# 筛选input含有text属性的元素，可以省略input		

5、常用方法

"""向下获取元素的方法"""
$("#id").next()						# 获得下一个元素
$("tagName").nextAll()				# 获得下面的所有元素
$(".className").nextUntil("...")	# 向下获得直到...的所有元素

"""向上获取元素的方法"""
$("#id").prev()						# 获得上一个元素
$("tagName").prevAll()				# 获得上面所有元素
$(".className").prevUntil("...")	# 向上获得直到...的所有元素

"""获得父系元素的方法"""
$("#id").parent()					# 获得父亲元素
$("tagName").parents()				# 获得所有父辈元素
$(".className").parentsUntil(...)	# 获得所有父辈元素直到...

"""获得儿子和兄弟的元素"""
$("#id").children()					# 获得儿子元素
$("tagName").siblings				# 获得兄弟元素

$("tagName").find()					# 查找指定元素，支持正则表达式
$("tagName").first()				# 获得匹配的第一个元素
$("tagName").last()					# 获得匹配的最后一个元素
$("tagName").eq()					# 获得等于索引的元素
$("tagName").not(...)				# 获得不是...的元素
$("tagName").has(...)				# 获得含有...的元素
$("tagName").filter()				# 过滤

6、操作CSS

"""样式操作方法"""
$(".className").css("propertyname")									# 返回样式的属性
$("tagName").css("propertyname","value")							# 设置样式属性
$("#id")css({"propertyname":"value","propertyname":"value",...})	# 设置多个样式属性
$("#id").addClass("className")										# 添加指定的CSS类名
$("#id").removeClass("className")									# 移除指定的CSS类名
$("#id").hasClass("className")										# 判断样式是否存在
$("#id").toggleClass("className")									# 检查CSS类名，如果有就移除，没有则添加

"""位置操作方法：传入val即为设置值，不传val值即为获取值（获得是获得第一个匹配的，设置是设置所有匹配的）"""
$("#id").offset()										# 获得匹配元素在当前窗口的相对位置
$("#id").offset({top:value,left:value})					# 设置匹配元素在当前窗口的相对位置
$("tagName").position()									# 获得匹配元素相对父元素的偏移
$(window).scrollTop("val")								# 获得或设置匹配元素相对滚动条顶部的偏移
$(window).scrollLeft("val")								# 获得或设置匹配元素相对滚动条左侧的偏移

"""尺寸操作方法：传入val即为设置值，不传val值即为获取值（获得是获得第一个匹配的，设置是设置所有匹配的）""" 
$("#id").height("val")						# 设置或返回元素的高度（不包括内边距、边框、外边距）
$("#id").width("val")						# 设置或返回元素的宽度（不包括内边距、边框、外边距）
$("#id").innerHeight("val")					# 返回元素的高度（包括内边距）	
$("#id").innerWidth("val")					# 返回元素的宽度（包括内边距）
$("#id").outerHeight("val")					# 返回元素的高度（包括内边距和边框）
$("#id").outerWidth("val")					# 返回元素的宽度（包括内边距和边框）

"""文本操作方法：传入val即为设置值，不传val值即为获取值（获得是获得第一个匹配的，设置是设置所有匹配的）"""
$("#id").html("val")						# 获得或设置匹配元素的html内容
$("tagName").text("val")					# 获得或设置所有匹配元素的内容
$(".className").val("val")					# 获得或设置所有匹配元素的值
$("#id").val([val1,val2,...])				# 设置多选的checkbox、select值

"""属性操作方法"""
$("#d1").attr("attrName")					# 获得第一个匹配元素的属性值
$("#d1").attr("attrName","attrValue")		# 为所有匹配元素设置一个属性值
$("#d1").attr({k1:v1,k2:v2})				# 为所有匹配元素设置多个属性值
$("#d1").removeAttr("attrName")				# 从每个匹配元素中删除一个值
$("#d1").prop("attrName")					# 获得属性，用于checkbox和radio
$("#d1").removeProp("attrName")				# 移除属性，用于checkbox和radio

"""文档操作方法"""
指定元素的内部
$(selector).append(content)					# 在被选元素的结尾插入指定内容。
$(content).appendTo(selector)				# 在被选元素的结尾插入 HTML 元素。
$(selector).prepend(content)				# 在被选元素的开头插入指定内容。
$(content).prepend(selector)				# 在被选元素的开头插入 HTML 元素

指定元素的外部
$(selector).after(content)					# 在被选元素后插入内容
$(content).insertAfter(selector)			# 在被选元素后插入 HTML 元素
$(selector).before(content)					# 在被选元素前插入内容
$(content).insertBefore(selector)			# 在被选元素前插入 HTML 元素

$(selector).remove()						# 移除所有匹配的元素
$(selector).empty()							# 删除匹配的元素集合中所有的子元素
$(selector).replaceWith(content)			# 把被选元素替换为新的内容
$(content).replaceAll(selector)				# 把被选元素替换为新的 HTML 元素
$(selector).clone(true)						# 生成被选元素的副本,ture：规定需复制事件处理程序，默认为false

7、事件

"""基本事件"""
bind()							# 绑定事件
click() 						# 点击事件
dblclick()						# 双击事件
focus()							# 获得焦点事件
blur()							# 失去焦点事件
change()						# input输入框变化事件
keydown()						# 键盘按下事件
keyup()							# 键盘抬起事件
hover()							# 悬停事件

"""添加事件的方法"""
方式1：
$(selector).on(events,childSelector,function(){})
selector：选择器
events：事件
childSelector：可选，子选择器
function：事件处理的函数

方式2：
$(selector).events(function(){})

"""解除绑定事件"""
$(selector).off(events,childSelector,function(){})
selector：选择器
events：事件
childSelector：可选，选择器
function：事件处理的函数

"""阻止后续事件"""
方式1：
return false

方式2：
e.preventDefault();

"""阻止事件冒泡"""
方式1：
return false

方式2：
e.stopPropagation()

"""页面载入"""
方式1：
$(document).ready(function(){
// js代码
})

方式2：
$(function(){
// js代码
})

8、动画效果

"""隐藏/显示"""
$(selector).hide(speed,callback)			# 隐藏HTML元素
$(selector).show(speed,callback)			# 显示HTML元素
$(selector).toggle(speed,callback)			# 切换显示和隐藏

selectoe：选择器
speed：显示或隐藏的速度，可选参数，单位是毫秒
callback：显示或隐藏完成后执行的函数，可选参数

"""淡入淡出"""
$(selector).fadeIn(speed,callback)				# 淡入已隐藏的元素
$(selector).fadeOut(speed,callback)				# 淡出可见的元素
$(selector).fadeToggle(speed,callback)			# 切换淡入和淡出
$(selector).fadeTo(speed,callback)				# 渐变到指定的不透明度

selector：选择器
speed：效果的时长，可选参数，单位毫秒
opacity：指定的不透明度（0-1之间），必须参数
callback：效果完成后执行的函数，可选参数

"""滑动"""
$(selector).slideDown(speed,callback)			# 向下滑动元素
$(selector).slideUp(speed,callback)				# 向上换的元素
$(selector).slidToggle(speed,callback)			# 切换向上或向下

selector：选择器
speed：效果的时长，可选参数，单位毫秒
callback：效果执行完后执行的函数，可选参数

9、AJAX

$.ajax({name:value,name:value,...})				# 执行异步提交ajax请求
常见name：
	url								======>  	发送请求的URL，默认是当前页面
	type	 			 			======>  	请求方式（GET或POST）
	data  							======>  	发送的数据
	contentType  					======>  	发送数据的类型，默认是：可选参数：application/json（json格式）、false（不使用任何编码）
	processDate						======>		文件处理
	success(result,status,xhr)		======> 	请求成功运行的函数
	

10、杂项方法

data()
each()