jQuery学习总结

jQuery
 jQuery是一个优秀的JavaScript框架,轻量级的JS库，封装了JS、CSS、DOM。
 方便处理HTML、Event、实现动画效果，方便为网站提供AJAX交互。
 使用户的HTML页面保持代码和HTML页面分离。
 轻量级：侵入性低 耦合度低
 重量级：侵入性高 耦合度高
 
 jQuery使用步骤：
 1.引用jQuery
 2.使用jQuery选择器定位节点
 3.调用jQuery方法操作节点
 
 jQuery对象： 即：jQuery选择器选择的对象
 本质是一个DOM对象数组;所以可以使用数组方法：jQuery对象.length .get(index)  [index]
 jQuery方法都是针对jQuery对象特有的，大部分方法的返回值类型也是jQuery对象，所有方法可以连缀调用方法
 如：jQuery对象.f1().f2().f3()......
 要使用jQuery中的API方法，必须先将DOM对象转换成jQuery对象：$(DOM对象);
 jQuery选择器：定位元素，选择方法
 基本选择器：$("标签名"/".class属性名"/"#id"/"#id,improtant"（选择器组）);
 层次选择器: 
 $("select1 select2") 1下所有满足2的 子孙 元素
 $("select1 > select2") 1下所有满足2的 子 元素
 $("select1 + select2") 1下所有满足2的 下一个弟弟 元素
 $("select1 ~ select2") 1下所有满足2的 所有弟弟 元素
 过滤选择器:
 first 选择第一个  last 选择最后一个 （如 $("table tr:first); ）
 not(selector) 把selector排除外
 even 挑选偶数行     

odd挑选奇数行（按元素索引确定奇偶，从0开始）
 eq(index) 下标等于index的元素  gt(index) 下标大于index的元素  lt(index) 下标小于index的元素  （如选中第二行  $("table tr:eq(2));）

 header  选取所有的标题元素(h1-h6)                                                                                                   animated:选择当前正在执行的所有动画
 contains(text)  d匹配包含给定文本的元素  （如 $("p:contains('月饼')")  文字内容要用单引号包括！！）

 可见元素过滤器：  
 empty  匹配所有不包含子元素或文本的空元素
 hidden 匹配所有不可见元素 
 visible 匹配所有可见元素

html部分

js部分

 属性元素过滤器：
 [attribute]  匹配所有具有attribute属性的元素  （如获取带id的div $("div[id]") ）
 [attribute=value] 匹配所有属性值等于value的元素
 [attribute！=value] 匹配所有属性值不等于value的元素
 状态过滤选择器
 enabled 匹配可用的元素
 disabled 匹配不可用的元素
 checked 匹配选中的checkbox  （如： $("input:checked") ）
 selected 匹配选中的option  （如： $("option:selected"); ）
 表单选择器
 :text文本框  :password密码框  :radio单选框  :checkbox多选框    :submit提交按钮  
 :reset重置按钮   :button普通按钮  :file文件框  :hidden隐藏框
 jQuery操作DOM
 读写节点：
 obj.html() 读写节点的HTML内容（带标签格式）
 obj.text()/obj.text("")  读写节点的文本内容
 obj.val()/obj.val("")读写节点的value属性值
 obj.attr("属性名")/obj.val("属性名","属性值")读写节点的任意属性值
 创建节点：$("元素内容");
 添加节点：
 $("a").prepend("b")  b添加到a元素中最前
 $("a").append("b")  b添加到a元素中最后
 $("a").before("b")  b添加到a元素之前
 $("a").after("b")  b添加到a元素之后
 删除节点：
 obj.remove()  删除节点
 obj.remove(selector)  只删除满足selector的节点
 obj.empty()   清空节点
 jQuery样式操作
 addClass(" ");   追加样式
 removeClass(" ");  移除指定样式 ,若不指定则移除所有样式
 toggleClass(" ");  切换样式  ，没有就加上，有就移除
 hasClass(" ");  判断是否有指定样式，返回布尔值
 遍历节点
 children()  直接子节点
 next()  下一个兄弟节点
 prev()  上一个兄弟节点
 siblings()  所有兄弟节点
 find(selector)  查满足选择器的所有后代
 parent()  父节点
 jQuery事件处理
 $obj.bind('click',fn);/$obj.click(fn);  （click代表单机事件，fn代表函数）
 获得事件event对象只需传递一个参数：$obj.click(function(e){....)); e就是event对象,已经过封装适合各浏览器
 获取事件源：e.target 获取事件对象坐标：e.pageX   e.pageY  （此处若要使用e.target调用方法，需$(e.target)）
 jQuery处理时间机制：冒泡机制
 子节点产生的时间会一次向上抛给父节点。
 e.stopPropagation() 取消事件冒泡机制
 jQuery合成事件
 hover（mouseenter,mouseleave)  光标悬停事件  （进入特效,离开特效）
 toggle()  在多个事件响应切换 （显示与隐藏）
 电脑模拟操作事件
 $obj.trigger(事件类型)  
 如：$obj.triger("focus")/$obj.focus();
 jQuery动画
 1.隐藏/显示  show()/hide()
 如：$obj.show(执行时间,动画完毕后执行的函数)
 2.上下滑动  slideDown()/slideUp
 用法同上
 3.淡入淡出式动画  fadeIn()/fadeOut()
 用法同上
 4.自定义动画
 移动位置：
 animate(偏移起始位置，执行时间，回调函数）（回调函数选择写）
 （若移动图片则需预先将图片定位，改变流定位默认模式， 在样式中将图片设置为相对定位：position：relative）
 如：$("div").click(function(){
 $(this).animate({'left':500px'},4000);
 $(this).animate({'top':300px'},2000);
 });
 元素变形：
 如：$("div").animate({"height":"300px"},2000).animate({"width":"300px"},2000);
 
 //each()是jQuery封装的遍历方法
 //含义是每次循环都执行each（）里的function（）
 $(emps).each(function(){});