JQuery学习总结

JQuery学习总结
现在已经学过JQuery 我们就来简单的总结一下: 1. ( ) 方 法 : 可 以 通 过 ()方法: 可以通过 ()()方法来获得页面的指定节点,参数是某种CSS的选择器。 var userNameNode=$("#userName");获取页面userName节点。 $()方法的参数是一个DOM对象时,这个方法相当于把DOM对象转换成JQuery对象。 $()方法的参数如果是一段正确的HTML文本,则可以创建一个DOM节点,并包装成JQuery对象。 创建一个文本框var inputObj = $("<inputtype=‘text’>") ( ) 方 法 返 回 的 j q u e r y 对 象 上 执 行 各 种 j q u e r y 的 方 法 来 获 取 数 据 , 定 义 事 件 , 执 行 操 作 。 2. 关 于 界 面 显 示 l i s t − s y l e : n o n e ; 可 以 清 除 列 表 u l 和 l i 前 面 的 小 圆 点 。 b a c k g r o u n d − i m a g e : u r l ( . . / i m a g e s / c o l l a p s e d . g i f ) ; / / 指 定 一 个 元 素 的 背 景 图 。 b a c k g r o u n d − r e p e a t : n o − r e p e a t ; / / 控 制 背 景 图 的 重 复 填 充 方 式 如 果 一 个 元 素 上 同 时 定 义 了 背 景 图 和 背 景 色 , 那 么 有 背 景 图 的 地 方 是 不 会 显 示 背 景 色 的 。 W i d t h ( ) 方 法 可 以 设 置 或 获 取 某 个 节 点 的 宽 度 。 3. 获 取 内 容 : V a l ( ) 方 法 可 以 获 得 节 点 的 v a l u e 属 性 值 。 G e t ( ) 方 法 可 以 获 得 j Q u e r y 对 象 中 包 含 的 某 一 个 D O M 节 点 。 c h i l d r e n 方 法 可 以 获 得 某 个 节 点 的 子 节 点 , 可 以 制 定 参 数 来 限 制 子 节 点 的 内 容 。 p a r e n t ( ) 方 法 可 以 获 得 一 个 节 点 的 父 节 点 。 n e x t ( ) 方 法 可 以 获 得 一 个 节 点 的 下 一 个 兄 弟 节 点 。 P r e v i o u s ( ) 方 法 可 以 获 得 一 个 节 点 的 上 一 个 兄 弟 节 点 。 a t t r ( ) 方 法 可 以 设 置 或 获 取 某 一 个 节 点 的 属 性 值 。 e a c h ( ) , 一 个 包 含 了 多 个 元 素 的 J Q u e r y 对 象 上 执 行 e a c h ( ) 方 法 , 可 以 注 册 给 以 接 收 到 一 个 参 数 , 表 示 这 个 元 素 的 索 引 值 。 e q ( ) 方 法 可 以 根 据 索 引 值 只 得 到 J Q u e r y 对 象 中 包 含 的 多 个 元 素 中 的 某 一 个 元 素 , 并 仍 然 返 回 元 素 对 应 的 新 J Q u e r y 对 象 。 例 如 ()方法返回的jquery对象上执行各种jquery的方法来获取数据,定义事件,执行操作。 2.关于界面显示 list-syle:none;可以清除列表ul和li前面的小圆点。 background-image: url(../images/collapsed.gif); //指定一个元素的背景图。 background-repeat: no-repeat; //控制背景图的重复填充方式 如果一个元素上同时定义了背景图和背景色,那么有背景图的地方是不会显示背景色的。 Width()方法可以设置或获取某个节点的宽度。 3.获取内容:Val()方法可以获得节点的value属性值。 Get()方法可以获得jQuery对象中包含的某一个DOM节点。 children方法可以获得某个节点的子节点,可以制定参数来限制子节点的内容。parent()方法可以获得一个节点的父节点。next()方法可以获得一个节点的下一个兄弟节点。Previous()方法可以获得一个节点的上一个兄弟节点。attr()方法可以设置或获取某一个节点的属性值。each(),一个包含了多个元素的JQuery对象上执行each()方法,可以注册给以接收到一个参数,表示这个元素的索引值。eq()方法可以根据索引值只得到JQuery对象中包含的多个元素中的某一个元素,并仍然返回元素对应的新JQuery对象。例如 ()jqueryjquery2.listsylenoneullibackgroundimage:url(../images/collapsed.gif)//backgroundrepeat:norepeat//Width()3.Val()valueGet()jQueryDOMchildrenparent()next()Previous()attr()each()JQueryeach()eq()JQueryJQuery(“div:eq(1)”) 4.设定内容: Html()方法可以设定某个节点中的html内容。 addClass()removeClass()方法可以给某个节点添加或删除一个class。 appendTo方法可以将一个节点追加到另一个节点所有子节点的后面。 5.事件:响应事件Click()方法可以相应鼠标点击事件。 Keyup()方法可以响应键盘弹起的事件。 Trigger()方法可以触发某个JavaScript的事件发生。fadeOut()和fadeIn()可以实现淡出淡入的效果,参数内容和slideUp(),slideDown()方法类似。animate()方法可以实现任意的动画效果,可以控制某个css属性在某个时间内进行变化,从而达到动画的效果。鼠标事件:在这里插入图片描述
表单事件:在这里插入图片描述
键盘事件:在这里插入图片描述
事件的绑定和解绑:在这里插入图片描述
6. jQuery动画
(1).隐藏/显示 show()/hide()如:$obj.show(执行时间,动画完毕后执行的函数)在这里插入图片描述

(2).上下滑动  slideDown()/slideUp用法同上![在这里插入图片描述](https://img-blog.csdnimg.cn/20200809201556705.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3MDk0OQ==,size_16,color_FFFFFF,t_70)

(3).淡入淡出式动画  fadeOut()/fadeIn()用法同上![在这里插入图片描述](https://img-blog.csdnimg.cn/2020080920160746.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3MDk0OQ==,size_16,color_FFFFFF,t_70)

(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(){});7.JQuery学习总结jQuery总是会给我们太多的便利、简洁还有一点点的零散,所以,需要我们好好的总结、好好的利用,将零散的它们串成线,再结合以前的JS织成网,达到一定的新高度。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值