jQuery 属性的操作

目录

一、操作属性

1、attr():方法

2、prop():方法

二、css 属性

1.设置css属性

2.获取css属性

3.添加、删除、交替添加删除样式

三、设置/获取元素的width和height属性

 1、获取width

 2、设置width

四、设置获取元素内容

1、获取/设置元素内容体HTML代码

2、 获取/设置元素内容体纯文本

---

一、操作属性

1、attr():方法

可以操作标准属性,也可以操作自定义属性 只写属性名的属性,返回的不是true/false

• 单个属性:jQuery对象.attr('属性名','属性值')
• 多个属性:jQuery对象.attr({属性名:属性值})   注意 参数是对象
• 获取属性:jQuery对象.attr('属性名'),没有返回undefined
• 移除属性:jQuery对象.removeAttr('属性名'),不传就什么都不做
   

2、prop():方法

只能操作标准属性, 只写属性名的属性,返回的是true/false

• prop()方法:操作checked , selected , disable 这类boolean值类型的属性,不可以操作自定义属性
• 设置单个属性:jQuery对象.prop('属性名','属性值')
• 设置多个属性:jQuery对象.prop({属性名 : 属性值})
• 获取属性:jQuery对象.prop('属性名') ,返回true /false
   

 <a href="https://www.baidu.com">百度</a>
   <input type="checkbox" name="" id="" checked>男
   <div index='1'>attr </div>
   <span>1234</span>
//jQuery 部分
    <script>
        $(function(){
            console.log($('a').prop('href'));   //获取元素固有属性值
            $('a').prop("title","百度一下")
            $('input').change(function(){
                console.log($(this).prop('checked'));
            })

            //元素自定义属性 attr（）获取
            console.log($('div').attr("index"));
            $("div").attr("index",4);

            //数据缓存  存放在元素内存中
            $("span").data('unmae','pink')
        })
    </script>

二、css 属性

1.设置css属性

• 设置单个css属性：$(选择器).css("属性名","属性值")
• 设置多个css属性：$(选择器).css({属性名:"属性值",属性名:"属性值"…})        这里属性名的引号可加可不加

2.获取css属性

• $(选择器).css("属性名")

3.添加、删除、交替添加删除样式

• $(选择器).addClass("样式名")
• $(选择器).removeClass("样式名")
•    $(选择器).toggleClass(class属性)

<div></div>
$(function(){
             //1、添加类 addClass
             $('div').click(function(){
                $(this).addClass('current')
             })
             //2、删除类removeClass
             $('div').click(function(){
                 $(this).removeClass('current')
             })
             //3、切换类toggleClass
             $('div').click(function(){
                 $(this).toggleClass('current')
             })
        })

三、设置/获取元素的width和height属性

 1、获取width

•   $(选择器).width()

 2、设置width

•   $(选择器).width(val)    

width属性	说明
innerWidth()	innerWidth()方法用于获得包括内边界（padding）的元素宽度，
outerWidth()	outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，
outerWidth(true)	如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。

同理，innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
所以说：对于同一个元素应该是：width()<=innerWidth()<=outerWidth()<=outerWidth(true);

$(function(){
            //1、获取元素width height
            console.log($('div').width());
            //2、包含padding
            console.log($('div').innerWidth());
            //3、包含边框
            console.log($('div').outerWidth());
            //4、包含margin
            console.log($('div').outerWidth(true));
        })

四、设置获取元素内容

1、获取/设置元素内容体HTML代码

属性名	属性说明
jQuery对象.html()	获得内容体html代码，如果有标签代码，一并获得。
jQuery对象.html("HTML代码")	设置html代码，如果有标签，将进行解析。

2、 获取/设置元素内容体纯文本

属性名	属性说明
JQ对象.text()	获得文本，如果有标签，忽略。
JQ对象.text("纯文本")	设置文本，如果含有HTML标签，不进行解析。原样输出。

     text()只显示元素内的所有文本，不显示标签符号；而html()则是显示该元素内所有的html元素； 

$(function() {
    //1、获取设置元素内容
    $('div').html('我是div')
    //2、获取设置元素文本内容text  只得到文字，不得到标签
    $('div').text('zxcvbnm')
    //3、获取设置表单val
    console.log($('input').val());
    $('input').val('请输入')
})