目录
jQuery
jQuery简介
- jQuery是主流的轻量级JavaScript库
- jQuery提供了大量的高效方法,开发速度大幅度提升
- jQuery的核心就是选择器
jQuery下载
下载地址:生产版:https://code.jquery.com/jquery-3.4.1.min.js
开发版:https://code.jquery.com/jquery-3.4.1.js
jQuery常用选择器
语法:$(表达式) 或 jQuery(表达式)
基本选择器
语法 | 说明 |
---|---|
$("#id") | id选择器,选择指定id元素对象 |
$("标签") | 元素选择器,选择指定标签对象 |
$(".class") | 类选择器,选择指定类对象 |
$("S1,S2,S3...,SN") | 组合选择器 |
层叠选择器
语法 | 说明 |
---|---|
$("A B") | 后代选择器 |
$("A>B") | 子选择器 |
$("A~B") | 兄弟选择器 |
属性选择器
语法 | 说明 |
---|---|
$("selector[attribute=value]") | 选中属性值等于该值得组件 |
$("selector[attribute^value]") | 选中以该值开头的组件 |
$("selector[attribute$value]") | 选中以该值结尾的组件 |
$("selector[attribute*value]") | 选中包含该值得组件 |
位置选择器
语法 | 说明 |
---|---|
$("selector:first") | 获取第一个元素 |
$("selector:last") | 获取最后一个元素 |
$("selector:even") | 获取偶数行元素(从0开始) |
$("selector:odd") | 获取奇数行元素(从0开始) |
$("selector:eq(n)") | 获取指定位置的元素 |
表单选择器
语法 | 说明 |
---|---|
$("selector:type") | 获取表单中指定type元素 |
jQuery操作元素属性
- attr(name,value) 获取或者设置属性
例:var href=$("a").attr(href);
$("a").attr("href","https://www.baidu.com");
ps:获取属性时只会返回第一个获取到的,而设置属性则会设置全部选择到的
- removeAttr(name) 移除元素属性
jQuery操作元素的CSS样式
- css() 获取或设置元素的CSS样式 css(JSON表达式)可设置多个属性值
- addClass() 为匹配元素添加指定的类名
- removeClass() 为匹配元素删除指定的类
jQuery设置元素内容
- val() 获取或设置输入项的值
- text() 获取或设置元素的纯文本
- html() 获取或设置元素内部的HTML
PS:text()与html()最大的区别在于对文本中的HTML标签是否进行转义
jQuery事件处理方法
语法:on("事件",function) 简写:事件(function)
$(this)指当前事件产生的对象
jQuery常用事件
鼠标事件 | 键盘事件 | 表单时间 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dbclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
mouseover |
jQuery页面就绪函数
页面就绪函数指的是在页面加载完成后执行的函数
语法 : $(document).ready(function)
$(function)
jQuery动画
- 三种方式显示和隐藏元素
- 默认显示和隐藏方式
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
- 滑动显示和隐藏方式
slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
- 淡入淡出显示和隐藏方式
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])
- 默认显示和隐藏方式
参数说明:
speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000)
easing:用来指定切换效果,默认是"swing",可用参数"linear"
- swing:动画执行时效果是 先慢,中间快,最后又慢
- linear:动画执行时速度是匀速的
fn:在动画完成时执行的函数,每个元素执行一次。