04-jQuery的属性操做

时间 2019-11-24

标签 jquery 属性栏目 JQuery 繁體版

原文原文链接

jquery的属性操做模块分为四个部分：html属性操做，dom属性操做，类样式操做和值操做javascript

html属性操做：是对html文档中的属性进行读取，设置和移除操做。好比attr()、removeAttr()
DOM属性操做：对DOM元素的属性进行读取，设置和移除操做。好比prop()、removeProp()
类样式操做：是指对DOM属性className进行添加，移除操做。好比addClass()、removeClass()、toggleClass()
值操做：是对DOM属性value进行读取和设置操做。好比html()、text()、val()

attr()

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

       //获取值：attr()设置一个属性值的时候 只是获取值
        var id = $('div').attr('id')
        console.log(id)
        var cla = $('div').attr('class')
        console.log(cla)
        //设置值
        //1.设置一个值 设置div的class为box
        $('div').attr('class','box')
        //2.设置多个值，参数为对象，键值对存储
        $('div').attr({name:'hahaha',class:'happy'})

removeAttr()

移除属性html

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

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

prop()

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

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

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。浏览器

语法：app

返回属性的值：dom

$(selector).prop(property)

设置属性和值：this

$(selector).prop(property,value)

设置多个属性和值：spa

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

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

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

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //获取第一个input
            var el = $('input').first();
            //undefined  由于attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，天然输出undefined
            console.log(el.attr('style'));
            // 输出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()？

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;
            }    
})

案例：

代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li class="item">张三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){

             $('ul li').click(function(){
                 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
                 $(this).addClass('active').siblings('li').removeClass('active');
             })
         })
     </script>
    
</body>
</html>

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="https://www.baidu.com">百度一下</a>');

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

val

获取值：

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

设置值：

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

1. 属性节点的操做(JS操做属性)（jQuery操做属性）（H5新增的属性操做）
2. jQuery属性操做
3. js属性操做
4. javascript属性操做
5. jQuery 属性操做
6. jQuery---属性操做
7. JS操做属性
8. js操做属性
9. JavaScript中的属性操做
10. 对象属性的操做
更多相关文章...
• ASP ASPError 对象的属性 - ASP 教程
• C# Windows 文件系统的操作 - C#教程
• 互联网组织的未来：剖析GitHub员工的任性之源
• JDK13 GA发布：5大特性解读