web前端学习总结--JQuery
jQuery
什么是jQuery
jQuery是一个优秀的JavaScript框架，一个轻量级的JS库。
它封装了JS、CSS、DOM，提供了一致的、简洁的API。
兼容CSS3，及各种浏览器
使用户更方便地处理HTML、Events、实现动画效果，并且方便为网站提供AJAX交互
使用户的HTML页面保持代码和HTML内容分离
注：jQuery2.x开始不再支持Internet Explorer6,7,8
jQuery是一个JS框架，极大的简化了JS编程
jQuery的核心理念是write less，do more
2006年1月发布
jQuery的使用步骤
1.引入jQuery的js文件
2.使用选择定位器定位要操作的节点
3.调用jQuery的方法进行操作
jQuery对象
jQuery对象与DOM对象的关系
jQuery对象本质上是一个DOM对象数组，它在该数组上扩展了一些操作数组中的元 素的方法
可以直接操作这个数组：
obj.length：获取数组长度
obj.get(index)：获取数组中的某一个DOM对象
obj[index]：等价于obj.get(index)
DOM对象可以直接转换为jQuery对象
$(DOM象)
什么是jQuery选择器
jQuery选择器类似于CSS选择器(定位元素，施加样式)，实现定位元素，施加行为
使用jQuery选择器能够将内容与行为分离
选择器的种类
jQuery选择器包含如下种类：
基本选择器
|
元素选择器：依据标签名定位元素 |
$("标签名") |
|
类选择器：根据class属性定位元素 |
$(".class属性名") |
|
id选择器：根据id属性定位元素 |
$("#id") |
|
选择器组：定位一组选择器所对应的所有元素 |
$("#id,.importent")
|
层次选择器
|
在select1元素下，选中所有满足select2的子孙元素 |
$("select1 select2") |
|
在select1元素下，选中所有满足select2的子元素 |
$("select1 > select2") |
|
选中select1元素的，满足select2的下一个弟弟 |
$("select1 + select2") |
|
选中select1元素的，满足select2的所有弟弟 |
$("select1 ~ select2") |
|
例子: |
$("#d1 .importent")
|
过滤选择器
|
基本过滤选择器:根据元素的基本特征定位元素，常用于表格和列表 |
|
|
:first |
第一个元素 |
|
:last |
最后一个元素 |
|
:not(selector) |
把selector排除在外 |
|
:even |
挑选偶数行 |
|
:odd |
挑选奇数行 |
|
:eq(index) |
下标等于index的元素 |
|
:gt(index) |
下标大于index的元素 |
|
:lt(index) |
下标小于index的元素 |
|
例子: |
$("tr:first") |
|
内容过滤选择器:根据文本内容定位元素 |
|
|
:contains(text) |
匹配包含给定文本的元素 |
|
:empty |
匹配所有不包含子元素或文本的空元素 |
|
例子: |
$("p:contains('月饼')") |
|
可见性过滤选择器:根据可见性定位元素 |
|
|
:hidden |
匹配所有不可见元素，或type为hidden的元素 |
|
:visible |
匹配所有的可见元素 |
|
例子: |
$("input:hidden") |
|
属性过滤选择器:根据属性定位元素 |
|
|
[attribute] |
匹配具有attribute属性的元素 |
|
[attribute=value] |
匹配属性等于value的元素 |
|
[attribute!=vlaue] |
匹配属性不等于value的元素 |
|
例子: |
$("input[value='你好']") |
|
状态过滤选择器:根据状态定位元素 |
|
|
:enabled |
匹配可用的元素 |
|
:disabled |
匹配不可用的元素 |
|
:checked |
匹配选中的checkbox |
|
:selected |
匹配选中的option |
|
例子: |
$("input:selected") |
表单选择器
|
:text |
匹配文本框 |
|
:password |
匹配密码框 |
|
:radio |
匹配单选框 |
|
:checkbox |
匹配多选框 |
|
:submit |
匹配提交按钮 |
|
:reset |
匹配重置按钮 |
|
:button |
匹配普通按钮 |
|
:file |
匹配文件框 |
|
:hidden |
匹配隐藏框 |
|
例子: |
$(":text") |
读写节点
读写节点的HTML内容
obj.html() / obj.html("123")
读写节点的文本内容
obj.text() / obj.text("123")
读写节点的value属性值
obj.val() / obj.val("abc")
读写节点的属性
obj.attr("属性名") / obj.attr("属性名","属性值")
增删节点
创建DOM节点
$("节点内容")
$("<span>你好</span>")
插入DOM节点
parent.append(obj) 作为最后一个子节点添加进来
parent.prepend(obj) 作为第一个子节点添加进来
brother.after(obj) 作为下一个兄弟节点添加进来
brother.before(obj) 作为上一个兄弟节点添加进来
删除DOM节点
obj.remove() 删除节点
obj.remove(selector) 只删除满足selector的节点
obj.empty() 清空节点
样式操作
addClass("") 追加样式
removeClass("") 移除指定样式
removeClass() 切换所有样式
toggleClass("") 切换样式
hasClass("") 判断是否有某个样式
css("") 读取css的值
css(""，"") 设置多个样式
遍历节点
children() / children(selector) 直接子节点
next() / next(selector) 下一个兄弟节点
prev() / prev(selector) 上一个兄弟节点
siblings() / siblings(selector) 所有兄弟
find(selector) 查找满足选择器的所有后代
parent() 父节点
事件处理
使用jQuery实现事件绑定
$obj.bind(事件类型，事件处理函数)
如：$obj.bind('click',fn);
简写形式$obj.click(fn);
注：$obj.click()则代表触发了click事件。
获得事件对象event
只需要为事件处理函数传递任意一个参数
如：$obj.click(function(e){...})
e就是事件对象，但已经经过jQuery对底层事件对象的封装
封装后的事件对象可以方便的兼容各浏览器
事件对象的常用属性
获取事件源e.target, 返回值是DOM对象
获取鼠标点击的坐标
e.pageX
e.pageY
事件冒泡
什么是事件冒泡
子节点产生的事件会一次向上抛给父节点
如何取消事件冒泡
e.stopPropagation()可以取消事件冒泡
$('a').click(function(e){
alert('点击了一个链接');
e.stopPropagation();
});
合成事件
jQuery的合成事件种类
鼠标键入和离开的时候
hover(mouseenter,mouseleave) 模拟光标悬停事件
toggle() 在多个事件响应中切换
模拟操作
模拟操作的语法
$obj.trigger(事件类型)
如：$obj.trigger("focus")
简写形式$obj.focus()
jQuery动画
显示、隐藏的动画效果
show() / hide()
作用：通过同时改变元素的宽度和高度来实现显示或者隐藏
用法：$obj.show(执行时间，回调函数);
执行时间：slow , normal , fast或毫秒数
回调函数：动画执行完毕之后要执行的函数
上下滑动式的动画实现
slideDown() / slideUp()
作用：通过改变高度来实现显示或者隐藏的效果
用法同 show() / hide()
淡入淡出式动画效果
fadeIn() / fadeOut()
作用：通过改变不透明度opacity来实现显示或者隐藏
用法同show() / hide()
自定义动画效果
animate(偏移位置，执行时间，回调函数)*
偏移位置：{} 描述动画执行之后元素的样式
执行时间：毫秒数
回调函数：动画执行结束后要执行的函数
