admin 管理员组文章数量: 1184232
2024年2月29日发(作者：delete删除后面的字)
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 匹配所有不包含子元素或文本的空元素
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
读写节点：
() 读写节点的HTML内容（带标签格式）
()/ 读写节点的文本内容
()/读写节点的value属性值
(“属性名”)/(“属性名”,“属性值”)读写节点的任意属性值
创建节点：$(“元素内容”)；
添加节点：
$(“a”).prepend(“b”)b添加到a元素中最前
$(“a”).append(“b”)b添加到a元素中最后
$(“a”).before(“b”)b添加到a元素之前
$(“a”).after(“b”)b添加到a元素之后
删除节点：
() 删除节点
(selector) 只删除满足selector的节点
() 清空节点
jQuery样式操作
addClass； 追加样式
removeClass)；移除指定样式,若不指定则移除所有样式
toggleClass； 切换样式，没有就加上，有就移除
hasClass； 判断是否有指定样式，返回布尔值
遍历节点
children()直接子节点
next()下一个兄弟节点
prev()上一个兄弟节点
siblings()所有兄弟节点
find(selector)查满足选择器的所有后代
parent()父节点
jQuery事件处理
$('click',fn)；/$(fn)； （click代表单机事件，fn代表函数）
获得事件event对象只需传递一个参数：$(function(e){....))； e就是event对象,已经过封装适合各浏览器
获取事件源： 获取事件对象坐标： （此处若要使用调用方法，需$()）
jQuery处理时间机制：冒泡机制
子节点产生的时间会一次向上抛给父节点。
opagation() 取消事件冒泡机制
jQuery合成事件
hover（mouseenter,mouseleave) 光标悬停事件 （进入特效,离开特效）
toggle() 在多个事件响应切换 （显示与隐藏）
电脑模拟操作事件
$r(事件类型)
如：$(“focus”)/$()；
jQuery动画
1.隐藏/显示show()/hide()
如：$(执行时间,动画完毕后执行的函数)
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(){})；
版权声明：本文标题：jquery毕业实训步骤及内容 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1709217585a540710.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论