目录
- 安装
- 基本语法
- 选择器
- 筛选器
- 常用方法
- 操作CSS
- 事件
- 动画效果
- 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()