04jQuery操作03

day24

特性 attributes VS 属性 properties
attribute：
　　值为string
　　不区分大小写
　　会在html中呈现
property：
　　值为string，boolean，number，object
　　区分大小写
　　不影响html

1.如果attributes是本来在DOM对象中就存在的，attributes和
properties的值会同步；
2.如果attributes是本来在DOM对象中就存在的，但是类型为
Boolean，那么attributes和properties的不会同步；
3.如果attributes不是DOM对象内建的属性，attributes和
properties的值不会同步；

操作元素的特性
　　获取特性的值：attr(name)
　　设置特性的值：attr(name.value) attr({title:'new title'}) atrr(name,function(index,previousValue){})
　　删除特性:removeAttr(name) 加空格可以多个删除

操作元素的属性
　　获取属性的值：prop(name)
　　设置属性的值：prop(name,value)prop(properties)
　　删除属性:removeProp(name) 加空格不能多个删除

在元素中存取数据
　　获取数据的值：data([name])
　　设置数据的值：data(name,value) data(object)
　　删除数据的值：removeData(name)
　　判断是否有数据：jQuery.hasData(element)

特性属性.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img id="logo" src="log.jpg" alt="jQuery logo" class="img-jQuery" title="jQuery logo">
    <img id="logo2" src="log.jpg" alt="jQuery logo2" class="img-jQuery2" title="jQuery logo2">
    <input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px;" title="check this!" description="just a checkbox" checked>
    <script src="jquery-3.3.1.js"></script>
    <script>
        /*var logo = document.getElementById('logo')
        console.log(logo);
        console.log(logo.title);
        console.log(logo.getAttribute("title"));*/

        // var check = document.getElementById('check');
        /*console.log(check.checked);
        console.log(check.getAttribute('checked'));
        
        check.setAttribute('checked',false);

        console.log(check.checked);
        console.log(check.getAttribute('checked'));*/
/*
        console.log(check.description);
        console.log(check.getAttribute('description'));
        check.description = 'just';
        check.setAttribute('description','asdf');
        console.log(check.description);
        console.log(check.getAttribute('description'));*/
    </script>
</body>
</html>
View Code

 

操作元素的属性.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img id="logo" src="log.jpg" alt="jQuery logo" class="img-jQuery" title="jQuery logo">
    <img id="logo2" src="log.jpg" alt="jQuery logo2" class="img-jQuery2" title="jQuery logo2">
    <input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px;" title="check this!" description="just a checkbox" checked = 'checked'>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //获取属性
            console.log($('#check').prop('checked'))
            //设置属性
            console.log($('#check').prop('checked',true))
            console.log($('#check').attr('checked'))
            //删除属性
            console.log($('#check').removeProp('checked'))
            console.log($('#check').removeProp('title'))
            console.log($('#check').prop('title'))
            console.log($('#check').prop('checked'))
        })
    </script>
</body>
</html>
View Code

 

操作元素的特性.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img id="logo" src="log.jpg" alt="jQuery logo" class="img-jQuery" title="jQuery logo">
    <img id="logo2" src="log.jpg" alt="jQuery logo2" class="img-jQuery2" title="jQuery logo2">
    <input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px;" title="check this!" description="just a checkbox" checked>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            console.log($("#check"));
            //获取特性
            console.log($('#check').attr('title'))
            //设置特性
            $('#check').attr('title','check that!')
            console.log($('#check').attr('title'))
            //删除特性
            $("#check").removeAttr('title')
            console.log($('#check').attr('title'))
        })

    </script>
</body>
</html>
View Code

 

在元素中存取数据.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img id="logo" src="log.jpg" alt="jQuery logo" class="img-jQuery" title="jQuery logo" data-data1 = '123'>
    <img id="logo2" src="log.jpg" alt="jQuery logo2" class="img-jQuery2" title="jQuery logo2">
    <input type="checkbox" id="check"  style="width: 50px; height: 50px;" title="check this!" data-data2 = 'false' description="just a checkbox" checked = 'checked' tabindex="1">
    <p></p>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            var img = $('img')
            var check = $('#check')
            //获取数据
            console.log(img.data())
            //设置数据
            check.data('dat',true)
            console.log(check.data())
            //删除数据
            check.removeData('dat')
            console.log(check.data())
            //判断是否有数据
            console.log($.hasData(check.get(0)))
            console.log($.hasData($('p').get()))    
        })
    </script>
</body>
</html>
View Code

 

posted @ 2018-03-07 22:27  cheinlbb  阅读(141)  评论(0)  编辑  收藏  举报