>> JQuery是优秀的轻量级的JavaScript框架，极大的简化了JS编程。
>> JQuery 的使用步骤：
⑴引入JQuery的JS文件
⑵使用选择器定位要操作的节点
⑶调用JQuery的方法进行操作>>>>>>>>>>>>>1. jQuery 对象 <<<<<<<<<<<<<<
>> jQuery 为了解决浏览器兼容问题而提供的一种统一封装的对象描述
>> jQuery 提供的方法只能由JQuery对象调用，且大多数返回JQuery对象
◆注：使用JQuery时遭遇的各种对象一般规律：
1.通过选择器获取的是JQuery对象
2.通过$创建的是JQuery对象
3.JQuery赋值的方法通常返回JQuery对象
4.JQuery的取值方法，若取到的是元素，则返回JQuery对象
5.JQuery的取值方法若取到的是文本，则返回内置对象（String）
◆ jQuery 对象 是一个DOM对象数组
>> DOM 和 JQuery 对象能相互转换
1.DOM转换为JQuery对象
---$(DOM对象)
2.JQuery对象转换为 DOM
---obj.get(index):获取数组中的某个DOM对象
---obj[index]: 等价于obj.get(index)
---obj.length: 获取数组长度>>>>>>>>>>>>>> 2.JQuery选择器 <<<<<<<<<<<<<<<
>>JQuery选择器:能够实现元素的定位
>>使用JQuery选择器能够将内容和行为分离
1.基本选择器（同css）
1）元素选择器
-- $("标签名")
2）类选择器
-- $(".class属性名")
3）id选择器：
--$("#id")
4) 选择器组
-- $("#id,.important")
2.层次选择器（同css）
1) 在select1元素下，选中所有满足select2的子孙元素
--$("select1 select2")
2) 在select1元素下，选中所有满足select2的子元素
--$("select1 > select2")
3) 在select1元素下，满足select2的下一个弟弟
--$("select1 + select2")
--$("#zg+li")
4）在select1元素下，满足select2的所有弟弟
--$("select1 ~ select2")
--$("#zg~li")
3.过滤选择器(*重点*)
3.1基本过滤(*重点*)
---:first 第一个元素
---:last 最后一个元素
---:not(selector) 把selector排除在外
---:even 挑选偶数行
---:odd 挑选奇数行
---:eq(index) 下标等于index的元素
---:gt(index) 下标大于index的元素
---:lt(index) 下标小于index的元素
◆例：
--$("li:first")
--$("li:even")
--$("li:lt(3)")
--$("li:not(#zg)")
3.2内容过滤
---:contains(text) 匹配包含给定文本的元素
---:empty 匹配所有不包含子元素或者文本的空元素
◆例：
--$("p:contains('月饼')")
3.3可见性过滤
---:hidden 匹配所有不可见元素，或type为hidden的元素
---:visible 匹配所有的可见元素
◆例：
--$("input:hidden")
3.4属性过滤
---[attribute] 匹配具有attribute属性的元素
---[attribute=value] 匹配属性等于value的元素
---[attribute!=value] 匹配属性不等于value的元素
◆例：
--$("input[value='你好']")
3.5状态过滤
---:enabled 匹配可用的元素
---:disabled 匹配不可用的元素
---:checked 匹配选中的checkbox
---:selected 匹配选中的option
◆例：
--$("input:checked")
4.表单选择器（简单）
---:text 匹配文本框
---:password 匹配密码框
---:radio 匹配单选框
---:checkbox 匹配多选框
---:submit 匹配提交按钮框
---:reset 匹配重置按钮
---:button 匹配普通按钮
---:file 匹配文件框
---:hidden 匹配隐藏框
◆例：
--$(":text")>>>>>>>>>>>>>> 3.JQuery操作DOM <<<<<<<<<<<<<
1.读/写节点 --HTML内容：obj.html()/obj.html("<span>123</span>")
包含子标签，相当于innerHTML
--文本：obj.text()/obj.text("123")(不包含子标签)
--value属性值：obj.val()/obj.val("abc")
--属性值：obj.attr("属性名")/obj.attr("属性名","属性值")
2.增删节点
--增加: $("节点内容")
--删除：obj.remove()
obj.remove() 删除满足selector的节点
--插入：
--parent.append(obj) 添加到最后
--parent.prepend(obj) 添加到最前面
--brother.after(obj) 添加为兄弟的下一个节点
--bother.before(obj) 添加为兄弟的上一个节点
3.样式操作
--addClass("") 追加样式**重要**
--removeClass("") 移除指定样式**重要**
--removeClass() 移除所有样式
--toggleClass("") 切换样式
--hasClass("") 判断是否有个样式
--css("") 读取scc的值
--css("","") 设置多个样式
4.遍历节点
--children()/children(selector) 直接子节点
--next()/next(selector) 下一个兄弟节点
--prev()/prev(selector) 上一个兄弟节点
--siblings()/siblings(selector) 所有兄弟
--find(selector) 满足选择器的所有后代
--parent() 父亲节点>>>>>>>>>>>>>> 4.JQuery事件处理 <<<<<<<<<<<<<
1.事件的绑定
--$obj.bind(事件类型，事件处理函数)
--单击事件简写形式：$obj.click(fn)
2.事件对象event
--$obj.click(function(e){})
程序会自动给函数传一个event参数
--获取事件源：
--e.target 返回值是DOM对象
--e.pageX和e.pageY 获取鼠标的位置
3.事件的冒泡
--子节点产生的事件会由内向外的顺序执行叫事件冒泡
--取消事件冒泡：e.stopPropagation()
4.合成事件种类
--hover(mouseon(){},mouseout(){})
模拟鼠标悬停事件
--toggle() 在多个事件响应中切换
5.模拟操作
--$obj.trigger(事件类型)
--$obj.trigger("focus") 模拟光标选中事件
--简写形式：$obj.focus();
>>>>>>>>>>>>>> 5.JQuery动画 <<<<<<<<<<<<<
--动画的实现是jQuery新建了一个线程来不断的改变元素的宽度、高度、位置。
--所以动画的实现过程是与主线程并发执行的。
1.隐藏和显示动画的效果
--show() / hide()
--通过同事改变元素的宽度和高度来实现显示或隐藏
--$obj.show(执行事件[，回调函数])
--回调函数：动画执行完毕后要执行的函数
2.上下滑动式的动画实现
--sildeDown() /sildeUp
--通过改变高度来实现显示和隐藏的效果
3.淡入淡出式动画效果
--fadeIn() / fadeOut()
--通过改变不透明opacity来实现显示或隐藏
4.自定义动画效果
--animate(偏移位置，执行时间[，回调函数])
--偏移位置：{}描述动画执行之后元素的样式
◆例：
$("div").click(function(){
$(this).animate({'left':'500px'},4000);
$(this).animate({'top':'300px'},4000);
});本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
