js进阶 11-2  jquery属性如何操作

一、总结

一句话总结：jquery中的属性用attr方法表示。jquery中都是方法。

1、jquery中的属性的增删改查操作？

只需要两个方法，

attr()：增改查

removeAttr()：删

2、jquery中attr()方法和css()方法设置属性的区别？

css方法的更加精确，有单位，如果如果img中没有设置width的话，attr方法弄不到，css方法照样可以

26                 alert($('img').attr('width'))

27                 //alert($('img').css('width'))

3、jquery如何动态改变元素属性，比如图片不同的高？

使用函数

使用函数来设置属性/值,语法：$(selector).attr(attribute,function(index,oldvalue))

37             $('#btn3').click(function(){
38                 $('img').attr('width',function(index,value){
39                     return value*(index+1)/3
40                 })
41             })

二、jquery属性如何操作

1、相关知识

属性操作

  1. attr() 设置或返回匹配元素的属性和值.

    返回被选元素的属性值,语法：$(selector).attr(attribute)

    设置被选元素的属性和值,语法：$(selector).attr(attribute,value)

    使用函数来设置属性/值,语法：$(selector).attr(attribute,function(index,oldvalue))

  2. removeAttr() 从元素中移除指定的属性,语法：$(selector).removeAttr(attribute)

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

     </style>

 </style>

 </head>

 <body>

     <img src="HTML5.png" alt="" width="100">

     <img src="HTML5.png" alt="" width="100">

     <img src="HTML5.png" alt="" width="100">

     <input type="button" id="btn1" value="获取">

     <input type="button" id="btn2" value="设置1">

     <input type="button" id="btn3" value="设置2">

     <input type="button" id="btn4" value="删除">

     <script>

         $(function(){

             //获取元素的属性值

             $('#btn1').click(function(){

                 alert($('img').attr('width'))

                 //alert($('img').css('width'))

             })

             $('#btn2').click(function(){

                 //$('img').attr('width','200')

                 $('img').attr({

                     'width':'150',

                     'height':'300',

                     'border':'5px'

                 })

             })

             $('#btn3').click(function(){

                 $('img').attr('width',function(index,value){

                     return value*(index+1)/3

                 })

             })

             $('#btn4').click(function(){

                 $('img').removeAttr('border')

             })

         })

     </script>

 </body>

 </html>
 
 
 

js进阶 11-2 jquery属性如何操作的更多相关文章

  1. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  2. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  3. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  4. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  5. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  6. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  7. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  8. js进阶正则表达式11RegExp的属性和方法（RegExp的属性和方法，就是RegExp对象.(点)什么的形式）（正则表达式执行之前会被编译）

    js进阶正则表达式11RegExp的属性和方法(RegExp的属性和方法,就是RegExp对象.(点)什么的形式)(正则表达式执行之前会被编译) 一.总结 1. RegExp的属性和方法,就是RegE ...

  9. jquery属性的操作

    HTML示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 获取DOM元素到页面顶部的距离，亲测有效版本（转载）

    原文:https://blog.csdn.net/u013764814/article/details/83825479 干脆点(博客就应该干脆,少扯皮) DOM元素有一个属性是offsetTop,表 ...

  2. Spring3拦截引发的问题——WEB开发中的client路径

    什么是client路径? 第一类.也就是html或js文件等client訪问的文件里的路径,这里包含一些资源文件的引入(js.css还有各种图片等),或是跳转到静态html页面,总之获取的都是静态资源 ...

  3. C8815 用 USB网卡（Asix AX88772 ）上网

    C8815 用 USB网卡(Asix AX88772 )上网 C8815不支持给USB外设供电,不过可以使用自供电的OTG线带动USB设备 C8815最新固件中没有Asix AX88772驱动,需要自 ...

  4. 【ASP.NET开发】.NET三层架构简单解析

    对于三层架构来说,主要是使用设计模式的思想,对于项目的各个模块实现"高内聚,低耦合"的思想.这里就不做详细的介绍了,如果大家有兴趣,可以阅读软件工程和设计模式相关文章. 对于三层架 ...

  5. ES5比较Jquery中的each与map 方法？

    1.each es5: var arr = [1, 5, 7, 8, 9];var arr1 = []; arr.forEach(function (v, i) { arr1.push(v * 4) ...

  6. 【前端统计图】echarts实现属性修改

    原图: 原代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  7. [D3] Debug D3 v4 with Dev Tools

    Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visual ...

  8. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  9. 微信支付v2开发(7) 告警通知

    本文介绍微信支付中如何获得告警通知. 一.告警通知 为了及时通知商户异常,提高商户在微信平台的服务质量.微信后台会向商户推送告警通知,包括发货延迟.调用失败.通知失败等情况,通知的地址是商户在申请支付 ...

  10. LeetCode Algorithm 04_Median of Two Sorted Arrays

    There are two sorted arrays A and B of size m and n respectively. Find the median of the two sorted ...