第一节jQquery初步认知
javaScript概念：
1.基于js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素
jQuery概念
1.基于javaScript的，同上，提高了代码的效率
它可以帮我们做什么（有什么优势）
轻量级、体积小、使用灵巧（只需引入一个js文件）
强大的选择器
出色的DOM操作的封装
出色的浏览器兼容性(jQuery 2.X开始不再支持Internet Explorer 6,7,8)
jQuery的使用步骤
1.引入jQuery的js文件
<script type="text/javascript" src="jquery.js"></script>
2.使用选择器定位要操作的节点
3.调用jQuery的方法进行操作
讲解$(function(){});
1.$是jQuery别名。如$()也可jQuery()这样写，相当于页面初始化函数，当页面加载完毕，会执行jQuery()。
2.希望在做所有事情之前，jQuery操作DOM文档。必须确保在DOM载入完毕后开始执行，应该用ready事件做处理HTML文档的开始。
3.$(document).ready（function(){}）;
类似于js的window.onload事件函数，但是ready事件要先于onload事件执行
window.onload=function(){};
4.jQuery的ready事件不等于js的load:
什么是jQuery对象
jQuery对象与DOM对象的关系
DOM对象转换为jQuery对象
—DOM对象可以直接转换为jQuery对象
比如：$(DOM对象)
jQuery有哪些功能（API）;
选择器、过滤器、事件、效果、ajax
jQuery选择器（定位元素后施加样式和施加行为）：
1.基本选择器2.层次选择器3.过滤选择器4.表单选择器
基本选择器：
元素选择器：依据标签名定位元素 比如：$("标签名");
类选择器：根据class属性定位元素 比如：$(".class属性名");
id选择器：根据id属性定位元素 比如：$("#id");
选择器组：定位一组选择器所对应的所有元素 比如：$("#id,.important");
层次选择器：
在select1元素下，选中所有满足select2的子孙元素 比如：$("select1 select2");
在select1元素下，选中所有满足select2的子元素 比如：$("select1> select2");
在select1元素中，选中所有满足select2的下一个弟弟元素 比如：$("select1 +select2");
在select1元素中，选中所有满足select2的所有弟弟 比如：$("select1 ~select2");
基本过滤选择器（根据元素的基本特征定位元素，常用于表格和列表中）
-：first/last 第一个/最后一个元素 比如：$("tr:first")、$("tr:last")
-：even/odd 选中偶/奇数行
-：not(selector) 把selector排除在外
-：eq(index) 下标等于index的元素
-：gt(index)/：lt(index) 下标大/小于index的元素
内容过滤选择器（根据文本内容定位元素）
-：contains(text) 匹配包含给定文本的元素 比如：(p:contains('月饼'))
-：empty 匹配所有不包含子元素或文本的空元素
可见性过滤选择器（根据可见性定位元素）：
-：hidden 匹配所有不可见元素，或type为hidden的元素 比如：$("input:hidden")
-：visible 匹配所有的可见元素
属性过滤选择器（根据属性定位元素）
-[attribute] 匹配具有attribute属性的元素
-[attribute =value] 匹配属性等于value的元素 比如： $("input[value='你好']")
-[attribute !=value] 匹配属性不等于value的元素
状态过滤选择器（根据状态定位元素）
-：enabled 匹配可用的元素
-：disabled 匹配不可用的元素
-：checked 匹配选中的checkbox
-：selected 匹配选中的option 比如：$("input:selected")
表单选择器：
-：text 匹配文本框 比如：$(":text")
-：password 匹配密码框
-：radio 匹配单选框
-：checkbox 匹配多选框
-：submit 匹配提交按钮
-：reset 匹配重置按钮
-：button 匹配普通按钮
-：file 匹配文本框
-：hidden 匹配隐藏框
jQuery操作DOM(行为：读写、增删、样式、遍历)：
1.读写节点
读写节点的HTML内容
-obj.html()/obj.html("<span>123<span>");
读写节点的文本内容
-obj.text()/obj.text("123");
读写节点的value属性值
-obj.val()/obj.val("abc");
读写节点的属性值
-obj.attr("属性名")/obj.val("属性名"，“属性值”);
2.增删节点
创建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() 清空节点
3.样式操作
.addClass(" ")追加样式
.removeClass(" ")移除指定样式
.removeClass()移除所有样式
.toggleClass(" ")切换样式
.hasClass(" ")判断是否有某个样式
.css(" ")读取css的值
.css(" "," ")设置多个样式
4.遍历节点
.children/children(selector) 直接子节点
.next()/next(selector) 下一个兄弟节点
.prev()/prev(selector) 上一个兄弟节点
.siblings()/siblings(selector) 所有兄弟
.find(selector) 查找满足选择器的所有后代
.parent() 父节点
使用jQuery实现事件绑定
1.语法：
-$obj.bind(事件类型，事件处理函数)
-如：$obj.bind('click',fn)
-简写形式$obj.click(fn) 注：代表触发了click事件。
2.获得事件对象event
只需要为事件处理函数传递任意一个参数 比如：$obj.click(function(e){...})
e就是事件对象，但已经经过jQuery对底层事件对象的封装，封装后的事件对象可以方便的兼容各种浏览器。
3.事件对象的常用属性
获取事件源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(执行时间，回调函数)；
执行时间：show,normal,fast或毫秒数
回调函数：动画执行完毕之后要执行的函数
上下滑动式的动画实现
slideDown()/slideUp()
作用：通过改变高度来实现显示或隐藏的效果
用法同show()/hide()
深入浅出动画效果
fadeIn()/fadeOut()
作用：通过改变不透明度opacity来实现显示或者隐藏
用法同show/hide
自定义动画效果
animate(偏移位置，执行时间，回调函数)
偏移位置：｛}描述动画执行之后元素的样式
执行时间：毫秒数
回调函数：动画执行结束后要执行的函数
$("div").click(function(){
$(this).animate({'left':'500px'},4000);
$(this).animate({'top':'300px'},2000);
})
