jquery
程序员文章站
2024-03-05 20:42:25
...
学习目标:1.什么是JQuery2.JQuery设计思想3.JQuery常用方法4.JQuery下的Cookie缓存和ajax一、什么是JQuery
* 什么是JQ?
一个优秀的JS库,大型开发必备。
* JQ的好处?
1. 简化JS的复杂操作
2. 不再需要关心兼容性
3. 提供大量实用方法
* 如何学习JQ?
1. www.jquery.com JQ的官方网站
2. JQ只是辅助工具,要正确面对
3. 需要分阶段学习
二、JQuery设计思想
–模拟css选择元素
–独有表达式
–多种筛选方式
* 选择网页元素
-
模拟css选择元素 请参阅我们的 CSS 选择器参考手册。http://www.runoob.com/cssref/css-selectors.html2. 独有表达式选择3. 多种筛选方法
- JQuery写法
- JQuery中没有=号
1.方法函数化
-
链式操作
-
取值赋值合体
-
方法函数化
-
链式操作
-
取值赋值合体
- JQ与JS的关系
可以共存,不能混用。
三、JQuery常用方法
$()下的常用方法
• has()
• not()
• filter()
• next()找到兄弟节点中的下一个节点
• prev()找到兄弟节点中的上一个节点
• find()查找子节点
• eq()
• index()
• attr()
$()下的常用方法
• addClass()添加class名 removeClass()删除class名
• width() width innerWidth()width+padding outerWidth() width + border + padding
outerWidth(turn) width + border + padding
• insertBefore() before()
• insertAfter() after()
• appendTo() append()
• prependTo() prepend()
• remove() 删除节点
• on() off()
• scrollTop() 获取当前的滚动高度
on
$()下的常用方法
• ev clientX pageX which
• preventDefault stopPropagation
• one()
• offset() 获取当前元素距可视文档的距离 position() 计算距离最近的一个有定位的父级距离
• offsetParent()找到从当前节点开始,第一个有定位的父级
• val() 去值赋值一体 input标签的内容
• size() 返回获取元素的个数
• each() 遍历 一个参数是下标 第二个参数是元素
which
$()下的常用方法
• hover( ) 第一个参数funcOver 第一个参数funcOut
• show() hide()
• fadeIn() 淡入 fadeOut() 淡出
• fadeTo()
• slideDown() slideUp() 卷闸效果
基础方法扩充
• get(): 下标和length属性
• outerWidth(): 针对隐藏元素和参数true
• text(): 合体的特例 获取当前标签和子标签中的纯文本
• remove() 不会保留行为,detach() 会保留行为 两个都是删除节点
• $(), $(document).ready() 当整个页面(document)加载完之后运行
$()下的常用方法
元素节点操作
• parents()获取所有的祖先节点 其中的参数是筛选条件closest()必须有参数找到所有祖先节点中 第一个符合条件的元素(自己也算)
• siblings() 找到除自己以外所有的节点参数可以传筛选条件
• nextAll() 找到当前节点开始往下所有的兄弟节点参数可以传筛选条件
prevAll()找到当前节点开始往上所有的兄弟节点参数可以传筛选条件
• parentsUntil() 找到当前节点开始往上父级某个节点位置为止
nextUntil() 找到当前节点开始往下某个节点位置为止
prevUntil()找到当前节点开始往下某个节点位置为止
• clone() 直接调用不会克隆行为
clone(true)会克隆行为
• wrap() 每一个元素外面包装 参数是字符串,标签
wrapAll() 包在一个元素里面整体包装
wrapInner() 内部包装
unwrap() 去除包装
• add() slice()
• serialize() serializeArray()
$()下的常用方法
• animate()
• stop() 结束当前正在运动的动画 stop(true)结束所有动画
stop(true true)结束所有动画 并让运动的动画直接到达目的值
stop(finish)结束所有动画 并让所有动画直接到达目的值
• delay() 延迟
• delegate() undelegate() • trigger()
• ev.data ev.target (兼容后触发对象) ev.type (输出事件类型 a)
animate
运动形式 默认 慢快慢
参数传在时间之后 swing 慢快慢
linear 匀速
凡是调用animate前面必须写stop
上一篇: ssm框架上传图片保存到本地和数据库示例
下一篇: 如何准确判断邮件地址是否存在