今日内容大纲:
一.介绍
二.jQuery的优势
三.jQuery内容
四.jQuery版本
五.jQuery对象
六.jQuery基础语法
七.查找标签 1.选择器 2.筛选器
八.操作标签 1.样式操作 2.文本操作 3.属性操作 4.文档处理
九.事件 1.常用事件 2.事件绑定 3,移除事件 4.阻止后续事件执行 5.页面载入 6.事件委托
十.动画效果
今日内容:
一.jQuery介绍
1.jQuery是一个轻量级,兼容多浏览器的JavaScript库
2.jQuery使用用户能够更加方便的处理HTML Document Event 实现动画效果,方便进行Ajax交互,能够极大的简化JavaScript编程.
二.jQuery的优势
1.轻量级的JS框架,几十kb,不会影响页面的加载速度
2.丰富的DOM选择器
3.链式表达式
4.事件 样式 动画支持.jQuery还简化了js操作css的代码,并且代码的可读性也比js要强.
5.Ajax操作支持.jQuery简化了Ajax操作,后端只需返回一个json格式的字符串就能完成于前端的通信
6.跨浏览器兼容,jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋
7.插件扩展开发.jQuery有着丰富的第三方插件
三.jQuery内容
1.选择器
2.筛选器
3.样式操作
4.文本操作
5.属性操作
6.文档处理
7.事件
8.动画效果
9.插件
10.each,data,Ajax
四.jQuery版本
1.x :兼容IE678 ,使用最广泛的,官方只做BUG维护,功能不再增加,因此一般项目来说,使用1.x版本就可以了
2.x : 不兼容IE678,很少有人使用,官方只做BUG维护,功能不再增加,如果不考虑兼容性低版本的浏览器可以使用2.X
3.x : 不兼容IE678,只支持最新的浏览器,需要注意要的是很多老的jQuery插件不支持3.x版,目前该版本是官方主要的更新维护的版本.
五.jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么它就可以使用jQuery里面的方法
六.jQuery基础语法
$(select).action()
七.查找标签
1.选择器
1>id选择器
$("#id")
2>标签选择器
$("tagName")
3>class选择器
$(".className")
4>配合使用
$("div.c1") // 找到有c1 class类的div标签
5>所有元素选择器
$("*")
6>组合选择器
$("#id , .className ,tagName")
7>层级选择器
$("x y") // x的所有后代 y(子子孙孙)
$("x>y") // x的所有儿子y (儿子)
$("x+y") // 找到所有x后面的y
$("x~y") // x之后的兄弟y
8>基本筛选器
: first //第一个 : last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引为偶数的元素 :odd // 匹配所有索引是奇数的元素 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not (元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或者多个标签再其内部的标签 举例子: $("div:has(h1)") //找到多有后低中有h1标签的div标签 $("div:has(.c1)") // 找到所有后代中有c1演示类的div标签 $("li:not(.c1)") // 找到所有不包含c1样式类的li标签 $("li:not(:has(a))") // 找到所有后代中不包含a标签的li标签
9>属性选择器
[attribute] [attribute = value] // 属性等于 [attribute != value] // 属性不等于 举例子: <input type = "text"> <input type = "password"> <input type = "checkbox"> $("input[type = 'checkbox']"); //取到checkbox类型的input标签 $("input[type !='text']"); // 取到类型不是text的input标签
10>表单常用筛选
:text :password :file :radio :checkbox :submit :reset :button 举例子: $(":checkbox") // 找到所有的checkbox
11>表单对象属性
:enabled
:disabled
:checked
:selected
2.筛选器
1>下一个元素
$("#id").next() // 下一个元素
$("#id").nextAll() // 下面的所有元素
$("#id").nextUntil("#i2") //下面的元素,知道i2(取不到)
2>上一个元素
$("#id").prev // 前面的一个元素
$("#id").prevAll() // 前面的所有元素
$("#id").prevUntil("#i2") // 前面的元素,直到i2(i2取不到)
3>父亲元素
$("#id").parent() // 前一个父节点元素
$("#id").parents() // 之前的所有的父节点
$("#id").parentUntil() // 之前的所有父节点,直到遇到***
4>儿子和兄弟元素
$("#id").children(); //儿子们
$("#id").siblings(); // 兄弟们
5>查找
$("div").find("p") 等价于 $("div p")
6>筛选
$("div").filter(".c1") //从结果中过滤出有c1样式类的
等价于 $("div.c1")
补充:
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素
.eq() // 索引值等于指定值的元素
八.操作标签
1.样式操作
2.文本操作
3.属性操作
4.文档操作
九.事件
1.常用事件
2.事件绑定
3.移除事件
4.阻止后续事件执行