jquery

学习目标: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选择元素
–独有表达式
在这里插入图片描述
–多种筛选方式

* 选择网页元素
  1. 模拟css选择元素 请参阅我们的 CSS 选择器参考手册。http://www.runoob.com/cssref/css-selectors.html2. 独有表达式选择3. 多种筛选方法

    • JQuery写法
    • JQuery中没有=号
      1.方法函数化
      在这里插入图片描述
  2. 链式操作
    在这里插入图片描述

  3. 取值赋值合体
    在这里插入图片描述

  4. 方法函数化

  5. 链式操作

  6. 取值赋值合体

  • 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

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 、4下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合;、下载 4使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合;、 4下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值