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. USACO 2009 Dec cow toll paths 过路费-floyd

    这道题首先要明确一点,那就是当你从一个点走到自己时,也是需要花费这个点点权值的费用.这个点卡了我两次QWQ 然后我比较喜欢分两步搞: 首先,我们利用floyd的一个性质:就是在更新其他点之间的路线时要 ...

  2. 用VBS控制鼠标，在Excel2010、2013，64位中

    原作者文章地址:http://demon.tw/programming/vbs-control-mouse.html 感谢原作者的攻略.才使我学会用VBS控制鼠标. 但是问题接踵而至,Excel200 ...

  3. domino web app

         近期在做个项目内容是:原企业的OA仅仅能在电脑桌面处理流程,不能在手机上处理审核功能,但随着企业需求,管理者需求在随时使用手机审核文档,达到及时处理文档及流程的及时性.      要求:1) ...

  4. 鸟哥的Linux私房菜-----16、程序与资源管理

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  5. adapter-自定义adapter的典型写法

    文章参考 http://www.cnblogs.com/mengdd/p/3254323.html import android.content.Context; import android.vie ...

  6. 第二遍回顾--①前端flex布局

    1.flex: 弯曲,收缩 2.概念 2条主轴,main axis,cross axis; 每个单元为flex item,主轴空间main size,交叉轴空间cross size; 3.容器 .co ...

  7. js日期常用方法

    js获取日期时间格式 export function formatDateTime(timeStamp) { var date = new Date(); date.setTime(timeStamp ...

  8. 洛谷 P1551 亲戚

                      洛谷 P1551 亲戚 题目背景 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 题目描 ...

  9. Android中的Parcelable接口和Serializable使用方法和差别

    Parcelable接口: Interface for classes whose instances can be written to and restored from a Parcel. Cl ...

  10. jquery weui日期选择控件添加取消按钮

    如图: 上图是jQuery weui的时间选择控件,红框处本来应该有个“取消”按钮的,可惜偏偏没有,当用户不想选择的时候就不好处理,虽然插件提供了点击其他区域关闭的功能,但过于隐晦,不容易发现,因此本 ...