jQuery的概述:
jQuery由美国人John Resig于2006年初创建,至今已吸引了来自世界各地的众多javascript高手加入其team。
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需使用选择器查找即可。
jQuery的发展:
2006 年 8 月发布了 jQuery1.0,第一个稳定版本,具有对 CSS 选择符、事件处理和 Ajax 交互的支持。
2013 年 1 月发布了 jQuery1.9,CSS 的多属性设置,增强了 CSS3。 2013 年 5 月发布了 jQuery1.10,增加了一些功能。
2013 年 4 月发布了 jQuery2.0,5 月发布了 jQuery2.0.2,一个重大更新版本,不再支 持 IE6/7/8,体积更小,速度更快。
最新版本:jquery-3.5.1
jQuery的特点:
轻量级:经GZip压缩后传输的代码文件仅14KB,未经压缩传送的代码文件仅26KB
链式语法 :$("p.surprise").addClass("ohmy").show("slow");
CSS 1-3 选择器:支持CSS选择器选定DOM对象
跨浏览器:支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+
简单:较其它JS库更容易入门,中、英文档很齐全
易扩展: JQuery UI 、 JQuery FX –已经有很完善的基于JQuery的用户界面库 和网页特效库
“写的更少,做的更多” 的轻量级 JavaScript 库。
下面是我学习jQuery时的总结知识点,仅供大家参考!
1.入口函数与onload
入口
$( function( ) {...} )
$( document ).ready(function( ){...})
特点
可以重复执行多次
文档加载完就执行(快)
onload
window.οnlοad=function( ){...}
特点
后面的onload会覆盖前面的onload
需要等待页面所有内容加载完在执行
2.js jq 互转
jQ -> js
$(" ")[下标]
$(“ ”).get(下标)
js -> jQ
$(js对象)
3.查文档
1.千万千万千千万不要背文档
2.查到了要认真阅读
3.api
输入:参数
【参数】可选
过程:使用案例
输出
返回值
4.显示 隐藏
show() 显示
hide()隐藏
toggle()切换显示与隐藏
slideToggle()滑动切换显示与隐藏
fadeToggle()淡入淡出
fadeIn()淡入
fadeOut()淡出
fadeTo()设置透明度
fadeIn(speed,fn)
speed
执行的速度
normal 400毫秒
fast 200毫秒
slow 600毫秒
毫秒数
fn
完毕后的回调函数
5. 设置获取css
.css(name)
获取css属性值
.css(name,value)
设置css的属性值
css({name1:value1,name2:value2})
设置多个css属性值
6.attr 设置获取节点属性
.attr(name)
获取节点属性值
.attr(name,value)
设置节点的属性值
attr({name1:value1,name2:value2})
设置多个节点属性值
7.prop 设置获取节点的属性
.prop(name)
获取节点属性值
.prop(name,value)
设置节点的属性值
prop({name1:value1,name2:value2})
设置多个节点属性值
8.prop和attr区别
1. attr获取节点的初始属性值
prop是获取节点的动态值
2. attr设置的属性值在dom节点是可见的
prop设置的表单属性值在dom节点上不可见
9.动画
stop(true,true)
停止队列动画
回到动画的最终状态
10.事件
click()单击
ready()准备完毕
hover()鼠标的移入 移出
change()当表单值发生改变
11.文本与值
text()设置或获取文本
HTML()设置获取html
val()设置获取表单的值
12.类的操作
addClass()添加类
removeClass()移除类
toggleClass()切换类
13.选择器
基本
*全部
tag 标签
. 类
# id
, 分组
层次
空格 后代
> 直接子元素
+ 相邻
~ 后边的所有兄的
基本过滤
:first 第一个
:last 最后一个
:eq(n) 第n个
:lt(n) 大于n个
:odd() 奇数
:even() 偶数
:header 标题
:animated() 动画
内容过滤
:contans(txt) 包含
:empty 空
:has()有
:parent 父节点
可见过滤
:visible 显示的
:hidden 隐藏的