什么是jQuery
-----jQuery 是一个优秀的javascript框架,一个轻量级的JS库
-----兼容CSS3,以及各种浏览器
-----使用户更方便的出来HTML、Events、Dom实现动画效果,并且方便的为网站提供AJAX交互
-----使用户的HTML页面保持代码和HTML的内容分离
需要注意的是:jQuery 2.x 开始不支持Inrernet Explorer 6、7、8
jQuery的编程步骤
-----引入jQuery的js文件
-----使用选择器定位节点
-----调用方法操作节点
简单使用:
什么是jQuery对象
-----jQuery为了解决浏览器兼容问题而提供的一种统一封装后的对象描述
-----jQuery提供方法都是针对jQuery对象特有的,而且大部分的返回值也是jQuery对象,所以方法可以连缀调用
DOM对象--->jQuery对象
语法:$(dom对象)
jQuery对象--->DOM对象
语法:$obi.get(0) 将当前jQuery对象转换成dom数组,并获取第一个
选择器的种类
-----基本选择器
#id 特点快,尽量使用id选择器
语法:$("#id")
.class 根据class属性定位元素
语法:$(".class")
element 根据html标签
语法:$("element")
selector1,selector2 合并选择器的合集
语法:$("#id",".class","element")
-----层次选择器
selecr1 空格 select2 找到节点1后,再在节点1的子节点中寻找节点2
语法:$("#id div")
select1 > select2 只查找到子节点,不查找间接子节点
语法:$("#id > div")
select1 + select2 下一个兄弟节点
语法:$("#id + div")
select1 ~ select2 下面所有兄弟节点
语法:$("#id + div")
-----过滤选择器
在已筛选出来的节点中过滤出需要的节点
”:“ 开始或者 ”[ ]“
基本过滤选择器
:first 第一个元素
:last 最后一个元素
:not(selector) 把selector排除在外
:even 挑选偶数行
:odd 挑选奇数行
:eq(index) 下标等于index的元素
:gt(index) 下标大于index的元素
:lt(index) 小标小于index的元素
内容过滤选择器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或文本的空元素
:has(selector) 匹配含有选择器所匹配的元素
:parent 匹配含有子元素或者文本元素的元素
可见性过滤选择器
:hidden 匹配所有不可见元素,或type为hidden的元素
:visble 匹配所有的可见元素
属性过滤选择器
[attribute] 匹配具有attribute属性的元素
[attribute = value] 匹配属性等于value的元素
[attribute != value] 匹配属性不等于value的元素
子元素过滤选择器
:nith-child(index) 将为每一个父元素匹配子元素,index是从1开始的整数,表示对应的位置子元素
:eq(index) 匹配一个给定索引值的元素,index是从0开始的整数
jQuery操作DOM
-----查询
html()
text()
val()
attr()
-----创建、插入、删除
创建dom节点
语法:$(html)
例如:var obj = $("<div>haha</div>") 返回的是一个obj的对象
插入dom节点 基本的
append() 做为最后一个子节点添加进来
prepend() 做为第一个子节点添加进来
after() 做为下一个兄弟节点添加进来
before() 做为上一个兄弟节点添加进来
删除dom节点
remove() 移除
remove(selector) 选择器定位后删除
empty()清空节点
-----复制
clone()
clone(true) 复制的节点也会具有行为(将处理代码一块复制)
-----样式操作
attr() 获取和设置属性
addclass()追加样式
removeClass()移除样式 有参数就移除参数名的,没参数移除所有样式
toggleClass()切换样式
hasClass()是否有某个样式
css()读取css的值
css( ,)设置多个样式
-----遍历节点
children()/children(selector)只考虑直接子节点
next()/next(selector)下一个兄弟节点
prev()/prev(selector)上一个兄弟节点
siblings()/siblings(selector)其他兄弟
find(selector)查找满足选择器的所有后代
parent()父节点