JQuery
1|0一 jQuery简介
1|11.1 jquery是什么?
是一个javascript库,也是一个js框架。
1|21.2 优势
1、体积小
2、浏览器兼容性
3、写少量的代码,实现更多的功能。
1|31.3 文档就绪事件
JavaScript 入口函数:
1|41.4 $含义
作用 1:$(function)
作用 2:$(selector)
选择器
jQuery具有强大的选择器功能
2|0二 选择器
jQuery 语法:
$():工厂函数
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作
基础语法是:$(selector).action()
jQuery的选择器主要参考了css的选择器
2|12.0 对象的转化
jQuery对象转为JS对象:加下标获取
JS对象转为jQuery对象:var zh = $(JS对象);
2|22.1 基础选择器
js获得元素对象为Element类型,JQ获得元素类型为Object类型
1、类选择器
2、标签选择器
3、ID选择器
4、并集选择器
5、全局选择器
2|32.2 层次选择器
1、后代选择器 语法:基础选择器+空格
2、子选择器 >
3、相邻元素选择器 + (紧挨着的)
4、同辈元素选择器 ~
2|42.3 属性选择器
是一种辅助,适用场景:标签相同,标签的类名也相同的情况。
1、$("a[href^=http]") 属性href的属性值是以http开头
2、$("a[href$=cn]") 属性href的属性值是以cn结尾
3、$("a[href*=www]") 属性href的属性值中包含有www
隔行变色:
2|52.4 过滤选择器
1、基本过滤选择器
语法 | 描述 | 示例 |
---|---|---|
:first | 选取第一个元素 | $(" li:first" )选取所有 |
:last | 选取最后一个元素 | $(" li:last" )选取所有 |
:not(selector) | 选取去除所有与给定选择器匹配的元素 | $(" li:not(.three)" )选取class不是three的元素 |
:even | 选取索引是偶数的所有元素(index从0开始) | $(" li:even" )选取索引是偶数的所有 |
:odd | 选取索引是奇数的所有元素(index从0开始) | $(" li:odd" )选取索引是奇数的所有 |
语法 | 描述 | 示例 |
---|---|---|
:eq(index) | 选取索引等于index的元素(index从0开始) | $("li:eq(1)" )选取索引等于1的 |
:gt(index) | 选取索引大于index的元素(index从0开始) | $(" li:gt(1)" )选取索引大于1的 |
:lt(index) | 选取索引小于index的元素(index从0开始) | $(“li:lt(1)” )选取索引小于1的 |
:header | 选取所有标题元素,如h1~h6 | $(":header" )选取网页中所有标题元素 |
:focus | 选取当前获取焦点的元素 | $(":focus" )选取当前获取焦点的元素 |
:animated | 选择所有动画 | $(":animated" )选取当前所有动画元素 |
2、可见性过滤选择器
2|62.5 子元素选择器
:nth-child
匹配其父元素下的第N个子或奇偶元素
':eq(index)'只匹配一个元素,而这个将为每一个父元素匹配子元素。
:nth-child从1开始的,而:eq()是从0开始算的
可以使用:
语法 | 描述 |
---|---|
:nth-child(even) | 偶数 |
:nth-child(odd) | 奇数 |
:nth-child(3n) | 3的倍数 |
:nth-child(2) | 2 |
:nth-child(3n+1) | 3的倍数+1 |
:nth-child(3n+2) | 3的倍数+2 |
:first-child | 第一个子元素 |
:last-child | 最后一个子元素 |
:only-child | 只有一个子元素 |
2|72.6 表单选择器
2|82.7 表单属性选择器
3|0三 jQuery Dom操作
3|11.1 样式操作
.css(属性名,属性值)
.addClass(类名1 类型2 类名3)与.removeClass(类名1 类型2 类名3) 给某个jquery对象[DOM元素 $("div")]追加样式和移除样式
.toggleClass("menu content"); 相当于addClass()与removeClass的合体,点击第一次是追加,第二次是移除。
.hasClass()判断某个元素是否拥有指定的样式 ,可以做为if语句的条件。
this
关键字:
示例
扩展:
3|21.2 内容操作
html代码操作
.html() 得到值
.text() 得到值
设置val() 的回调函数
3|31.3 属性操作
attr()
取值
设置值
attr() 的回调函数
3|41.4 节点操作
创建节点
追加节点/插入节点
删除节点
过滤删除
清除节点
替换节点
3|51.5 元素属性操作
4|0四 节点遍历
4|12.1 遍历子元素
.children()可以得到子节点的集合
您也可以使用可选参数来过滤对子元素的搜索
4|22.2 遍历同辈元素
.next() 下一个节点
.nextAll() 方法返回被选元素的所有跟随的同胞元素。
.nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
.prev() 上一个节点
.siblings() 同辈所有的节点(不包含本身)
加参数过滤
4|32.3 遍历前辈元素
.parent()
.parents();
parentsUntil("div");
4|42.4 遍历的其他方法
find()方法:用于在父节点上,查找子节点
filter()方法:用于在节点上,过滤含有某种属性的元素
5|0五 事件
5|11.基础事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
1.1鼠标事件
鼠标单击事件 ,双击
鼠标移入、移出
页面加载
域的内容被改变
失去焦点
1.2 键盘事件
1.3 表单事件
1.4 window事件
5|22.绑定事件
5|33.复合事件
hover是 mouseover与mouserout的组合
5|44.jQuery动画
4.1 显示与隐藏
语法
元素的显示
show(1000) 元素的显示
元素的隐藏
hide(1000) 元素的隐藏
第二个参数是一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing",其他可以使用相关的插件)。
toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
语法:
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
4.2 元素的透明度
淡入
fadeIn() 淡入
淡出
fadeOut() 淡出
fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
透明度
fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
4.3 元素的滑动
下滑
slideDown() 方法用于向下滑动元素。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
上滑
slideUp()
jQuery slideUp() 方法用于向上滑动元素。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法:
slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法:
4.4 计算元素的位置
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
4.5 计算网页宽度高度
__EOF__
作 者:YXH
出 处:https://www.cnblogs.com/YxinHaaa/p/17421738.html
关于博主:编程路上的小学生,热爱技术,喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本。
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签