jQuery二——属性操作、文档操作、位置属性

一、jquery的属性操作

　　jquery对象有它自己的属性和方法。
　　其中jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作。

1、html属性操作

　　是对html文档中的属性进行读取、设置和移除操作。比如attr()，removeAttr()。

（1）attr：设置属性值或者返回被选元素的属性值

$('button').click(function () {
    // jquery的属性操作，html属性操作：attr()
    // attr如果有一个参数，表示获取值
    $('#box p').text($('#box').attr('id'));  // p标签的内容：路飞学城————>box

});

// attr()如果设置两个值，表示设置属性
$('#box').attr('class','foo');  // 给当前标签加了类属性 <div >
// 设置多个值使用对象存储，如果设置多个类名不能使用attr()方法
$('#box').attr({'class':'foo2',name:"luffy"});  // <div >

（2）removeAttr：从每一个匹配的元素中删除一个属性

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

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

　　删除属性后，标签<div >中class属性和name属性都已经删除。

2、`DOM属性操作`

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

（1）prop：获取在匹配的元素集中的第一个元素的属性值

　　它是对当前匹配到的dom对象设置属性

// 获取的是第一个元素的class值
console.log($('li').prop('class'));  // luffy

// 设置值
//prop()获取在匹配的元素集中的第一个元素的属性值
$('li').first().prop({'name':'app','name2':'app2'});
console.log($('li').first());   // jQuery.fn.init(1)

（2）removeProp：用来删除由.prop()方法设置的属性集

// 删除dom对象的name
$('li').first().removeProp();

console.log($('li').prop('name'));   // app
console.log($('li').prop('name2'));  // app2

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
    <style type="text/css">

    </style>
</head>
<body>
    <div >
        <p>路飞学城</p>
        <button>获取</button>

        <ul>
            <li class="luffy">路飞</li>
            <li class="luffy">路飞</li>
            <li class="luffy">路飞</li>
            <li class="luffy">路飞</li>
        </ul>

        <span>
            路飞吧
        </span>
    </div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        $('button').click(function () {
            // jquery的属性操作，html属性操作：attr()
            // attr如果有一个参数，表示获取值
            $('#box p').text($('#box').attr('id'));  // p标签的内容：路飞学城————>box

        });

        // attr()如果设置两个值，表示设置属性
        $('#box').attr('class','foo');  // 给当前标签加了类属性 <div >
        // 设置多个值使用对象存储，如果设置多个类名不能使用attr()方法
        $('#box').attr({'class':'foo2',name:"luffy"});  // <div >

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


        // DOM属性操作
        // 获取的是第一个元素的class值
        console.log($('li').prop('class'));  // luffy

        // 设置值
        //prop()获取在匹配的元素集中的第一个元素的属性值
        $('li').first().prop({'name':'app','name2':'app2'});
        console.log($('li').first());   // jQuery.fn.init(1)

        // 删除dom对象的name
        $('li').first().removeProp();

        console.log($('li').prop('name'));   // app
        console.log($('li').prop('name2'));  // app2

    })
</script>
</html>

html属性和dom属性操作代码示例

一、jquery的属性操作

1、html属性操作

2、DOM属性操作

2、`DOM属性操作`