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))；）
contains(text) 匹配包含给定文本的元素（如 $(“p:contains('月饼')”)文字内容要用单引号包括！！）
可见元素过滤器： 
empty 匹配所有不包含子元素或文本的空元素
jquery在一个元素后追加标签 hidden 匹配所有不可见元素 
visible 匹配所有可见元素
属性元素过滤器：
（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.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元素之后
删除节点：
ve() 删除节点
ve(selector) 只删除满足selector的节点
pty() 清空节点
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()  在多个事件响应切换 （显示与隐藏）
电脑模拟操作事件
$igger(事件类型) 
如：$iger(“focus”)/$obj.focus()；
jQuery动画
1.隐藏/显示show()/hide()
如：$obj.show(执行时间,动画完毕后执行的函数)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。