首先是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为默认值】
网友评论