04-jQuery的属性操作

jquery的属性模块分为四个部分: HTML属性操作,dom属性操作,类样式操作和值操作

　　html属性操作: 是对html文档中属性进行读取,设置和移除操作.比如attr(), removeAttr()

　　DOM属性操作: 对DOM元素的属性进行读取,设置和移除操作,比如prop(), removeProp()

　　类样式操作: 是指对DOM苏醒className进行添加,移除操作.比如: addClass(), removeClass(), toggleClass()

　　值操作: 是为DOM属性value进行读取和设置操作,比如html(), text(), val()

 

attract()

设置之属性值或者 返回被返回元素的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            var id = $("div").attr('id')
            console.log(id)
            var cla = $("div").attr("class")
            console.log(cla)

            //设置值
            //1, 设置一个值, 设置div的class为box
            $('div').attr("class", 'box')
            //设置多个值, 参数为对象, 键值对存值
            $('div').attr({
                name: "hahahaha",
                class: 'happy'
            })
        })

    </script>
</head>
<body>
    <div class="item">
        
    </div>
</body>
</html>
attr()

removeAttr()

移除属性

//删除单个属性
$('#box').removeAttr('name)
$('#box').removeAttr('class')

//删除多个属性
$('#box').removeAttr('name class')

prop()

prop()方法设置或返回被选元素的属性和值.

当该方法用于返回属性值时,则返回第一个匹配元素的值.

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对.

语法:

　　返回属性的值:

$(selector).prop(property)

　　设置属性和值:

$(selector).prop(property, value)

　　设置多个属性和值:

$(selector).prop({property: value, property: value, ......})

关于att()和prop()的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    男<input type="radio" id="test" name="sex" checked/>
    女<input type="radio" id="test" name="sex"/>
    <button>提交</button>

    <script src="jquery.js"></script>
    <script>
        $(function(){
            //获取第一个input
            var el = $('input').first();
            //undefined 因为attr是获取的这个对象属性节点的值,很显然此时没有这个属性节点,自然输出undefind
            console.log(el.attr('stryle'));
            //输出cssstyleDeclaration对象,对于一个DOM对象,是具有远程style对象属性的,所以输出了style对象

            console.log(el.prop('style'));
            console.log(document.getElementById('test').style);
            $('button').click(function(){
                alert(el.prop('checked') ? '男': "女")
            })
        })
    </script>
</body>
</html>
attr和prop的区别

什么时候使用attr(), 什么时候使用prop()?

1,是有true, false两个属性使用prop();

2,其他则使用attr();

 

addClass(添加多个类名)

为每个匹配元素添加指定的类名.

$('div').addClass('box'); //追加一个类名到原有的类名

还可以为匹配的元素添加多个类名

$('div').addClass('box box2')  //追加多个类名

removeClass

从所有匹配的元素中删除全部或者指定的类

移除指定的类(一个或多个)

$('div').removeClass('box')

移除全部的类

$('div').removeClass();

可以通过添加删除类名,来实现元素的显示隐藏

代码如下:

var tag  = false;
        $('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
            }    
})

 

toggleClass

如果存在(不存在)就删除(添加)一个类

语法: toggleClass('box')

$('span').click(function(){
    //动态的切换class类名为active
    $(this).toggleClass('active')
})

 

html

获取值:

语法:

html()是获取选中标签元素中所有内容

$('#box').html();

设置值: 设置该元素的所有内容,会替换掉标签中原来的内容

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

 

text

获取值:

text()获取匹配元素包含的文本内容

语法:

$('#box').text();

设置值:

设置该所有的文本内容

$('#box').text('<a href="http://www.baidu.com">百度一下</a>')

注意: 值为标签的时候不会被渲染为标签元素,只会被当做值渲染到浏览器中

 

val获取值:

val()用于表单控件中获取值,比如input textarea select等等

设置值:

$('input').val('设置了表单控件中的值')

 

posted @ 2018-08-20 16:29  猴里吧唧  阅读(100)  评论(0)    收藏  举报