jQuery操作标签相关及简单动画的实现

首先是jQuery操作标签的属性
标签有 系统提供让我们直接用的 也有自定义的
系统提供的我们可以直接通过元素.属性名 去操作此标签的属性值 但是自定义的只能是通过 get/set/removeAttribute ()去操作自定义属性
自定义属性的作用: 自定义属性可以把一些有用的数据暂存到自定义属性上
在jQuery中 则简单许多

jQuery操作标签的属性

设置标签的属性

语法:=jQuery对象.attr(‘属性名name’,‘属性值value’) 如果不是数字的属性值 要记得加引号

eg:$('div').attr('aaa','bbb')

获取标签属性值

语法:jQuery对象.attr(‘name’);

和之前的操作css样式有相似之处 同样是括号里 传一个参数 是获取 传两个参数是设置

移除标签属性

语法:jQuery对象(标签).removeAttr(‘name’)

1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。

这里有个案例 京东买手机的时候那个放大镜。。。对。。就是美名其曰可以看细节的那个。。。但是我们现在做的不是那个主要部分放大镜 而是怎么去获取大中小图片
先简单的说一下目的 :1.鼠标进入小图的时候 取出小图上自定义的中图和大图的路径(因为大中小图都是写在了一个标签上 只是路径不同 根据不同的路径去取不同的图片)
思路:1.先给li注册鼠标进入事件
2.为了让当前的li突出显示 可以给他新增一个类名active 但他的兄弟元素要移除类名active 不然会乱套的= =
3.然后取出li中小图上的msrc属性值(也就是中图的路径)
4.将获取出来的msrc属性值给用来装中图的那个元素
5.依次按照取出msrc的步骤取出bsrc
在第三步和第四步的时候 把msrc取出来给装中图元素的时候 路径里要拼接 不然图片显示不出来 但是我们可以为了高(省)效(事) 可以在一开始就加一个var path=‘./img/’ 这样就算我们后来改路径 也很容易 降低出错率、

prop方法操作属性

主要针对 selected checked disabled 这种有布尔值的

获取 $('input').prop('checked')

返回true 或者false

设置 $('input).prop('name','value')

后面的value 是数字 字符串 布尔值 一般写布尔值

---这里有个小案例 就是我们最常见的发送短信验证码之后多少秒才可以再次点击发送
简单说下核心目的:点击发送按钮后禁用 显示倒计时xx秒 (用定时器 )然后清除定时器 解除禁用 可以重新点击发送
1.注册点击事件 禁用按钮 因为禁用是disabled为true 。disabled要用prop去设置
2.定义一个数字 也就是需要倒计时多长时间
3.设置按钮的内容 ,因为是input 所以他的文本是value 更改value值 上面创建的时间 +‘秒之后重新发送’(字符串拼接)
4.设置定时器 (这里不能出现this 因为this在定时器中 指向的是window) 里面写自减 因为是一秒减一次 所以要在下面重新设置一下 input的value值
5.为了数字不为负数 要清除定时器 并在里面 恢复input的可点 可发送

**注意 这个案例里涉及到几个点:1.this在定时器外面的时候指向的是事件源 在定时器里面的时候指向的是window 2.在定时器里 使用this 页面效果是无效的 因为是这时候this指向的是window 所以 我们可以在外面用变量that接收一下this 这时候 让that代替this去完成任务 或者是 在定时器里重新获取一下input

jQuery操作标签内容

在dom中 操作标签内容的有两种 一种是 innerText/innerContent 和 innerHTML 前者是只能操作标签内的文本内容 后者是可以进行标签内的渲染
在jQuery中 同样有两种操作标签的方式

操作标签内部文本 jQuery对象.text() 相当于innerText

获取 直接括号里不用填写参数
设置 括号里写文本内容 (‘’字符串)

操作标签内部所有内容 jQuery对象.html() 相当于innerHTML

获取 是获取标签内的所有内容 包括样式 文本和内部标签 括号里不传参 就是获取
设置 设置标签 标签内会被渲染 括号内传参(‘文本内容’)

操作表单元素的内容 jQuery对象.val()

获取 括号内不传参
设置 括号内传参(‘文本内容 ’)

jQuery动画

本质是定时器
分为基本动画和自定义动画

基本动画 目的就是显示和隐藏

一共有三种

1. 缩放

显示:show 语法:jQuery对象.show(speed时长,easing运动方式,fn函数体)

先在前面详细说一下里面这三个参数
第一个参数 speed 时长 是指的动画的总时长 单位是毫秒
第二个参数 easing运动方式 是字符串格式 默认是swing缓冲 此外还有匀速linear
第三个函数 fn 动画执行完毕之后执行的函数 为啥函数要写在里面呢 因为函数如果单独写出来不管写在动画上面还是下面 都是定时器外面的函数 所以就会先执行 就算定时器2019年2月21日16:08:08写成0也是。。
差点忘了 这三个参数都是可以不写的

隐藏 hide 语法: jQuery对象.hide(speed时长,easing运动方式,fn函数)

切换 toggle 语法:jQuery对象.toggle(speed时长,easing运动方式,fn函数);

要是隐藏就显示 要是显示就隐藏 用的较少

2.下拉和上卷

下拉:slideDown(显示出来)语法:jQuery对象.slideDown (speed时长,easing运动方式,fn函数);

上卷:slideUp(隐藏上去) 语法:jQuery对象.slideUp(speed时长,easing运动方式,fn函数)

切换 :slideToggle 语法:jQuery对象.slideToggle(speed时长,easing运动方式,fn函数)

如果是下拉 就变成上卷 如果是上卷就变成下拉

3. 淡入淡出

淡入(显示出来)语法:jQuery对象.fadeIn(speed时长,easing运动方式,fn函数)

隐藏(隐藏下去 ) 语法:jQuery对象.fadeOut(speed时长,easing运动方式,fn函数)

切换 fadeToggle 语法:jQuery对象.fadeToggle speed时长,easing运动方式,fn函数)

把淡入切成淡出 把淡出切成淡入

自定义动画

语法:jQuery对象.animate(params,[speed时长],[easing运动方式] , [fn函数])

其中 参数animate必写 其他三个可写可不写
animage({

样式属性名:目标值;
样式属性名:目标值
},1000)
只能对数字类型的属性有效
案例:手风琴轮播图

停止动画 解决多次操作动画产生延迟等待问题

语法:jQuery对象.stop(clearQueue,jumpToEnd)

第一个参数clearQueue :布尔值
1.true表示清空当前该物体所有动画 清除队列
2.false 表示清空当前正在运动的这一动画 false为默认值
第二个参数 jumpToEnd 布尔值
1.true表示停止动画 直接完成运动目标 比如说一个div在运动 运动到200的位置 这时候按钮停止 他会直接到目标值1000
2.false 表示停止动画 但是会保持停止的状态 不如说一个div在运动 运动到200的位置 这时候按钮停止 他会还保持200 【false为默认值】

一般不往里面传实参 使用默认值 jQuery对象.stop(false,true )直接跳到目的地 jQuery对象.stop(false,false) 不会跳 停在当前位置
ps:要在动画之前写stop 如果后面点siblings兄弟们元素 也是 要在前面写stop
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容

  • JQ操作DOM属性节点相关方法(包含类的操作) 属性节点就是指dom元素的属性 一般如果是标签自身自带的属性,我们...
    Lins7阅读 425评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,071评论 0 3
  • 一、 认识jQuery 1、 概述 之前,我们为了方便使用,封装了ajax.js,能够查找指定ID的DOM对象,使...
    宠辱不惊丶岁月静好阅读 628评论 0 3
  • 题目1: jQuery 能做什么? 选择网页元素改变结果集元素的操作:取值和赋值元素的操作:移动元素的操作:复制、...
    QQQQQCY阅读 185评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,321评论 0 2