jQuery给标签添加自定义属性

jQuery除了给标签添加自身属性外还可以添加自定义属性。
下面代码包含了添加和获取自定义属性。
添加的属性值有数字，类数组，对象，详细用法见备注。

<script type="text/javascript">
    // 设置属性
    $('#box').css('width', '200px')
    $('#a1').attr('href',"http://www.baidu.com")
    // 设置多个属性
    // 注意：属性名不用加引号
    $('#a1').attr({ href: "http://t.tt", target: "_blank" })


    // *********** 添加和获取自定义属性 ************
    // ==========1.设置一个自定义值==========
    $('#a1').attr('myIndex',2)
    console.log($('#a1').attr('myIndex'))

    // ==========2.设置多个自定义值==========
    // 注意：属性名要加引号，不能使用阿拉伯数字作为属性名
    fruitsList = {'a':'苹果', 'b':'香蕉', 'c':'西瓜'}

    // !!!!!!!!!!! 不正确的设置 !!!!!!!!!!!
    $('#a1').attr('fruit',fruitsList)
    console.log($('#a1').attr('fruit'))   // 打印：[object Object]，没有实际用处

    // 正确设置和获取属性
    $('#a1').attr(fruitsList)
    console.log($('#a1').attr('a'))         // 打印: 苹果
    console.log($('#a1').attr('b'))         // 打印: 香蕉
    console.log($('#a1').attr('c'))         // 打印: 西瓜

    // ==========3.设置自定义值为对象===========
    // 创建对象
    function Person(name, age){
        this.name = name
        this.age = age
    }
    person1 = new Person('Lili', 20)

    // !!!!!!!!!!! 不正确的设置 !!!!!!!!!!!
    $('#a1').attr('myattar', person1)       
    console.log($('#a1').attr('myattar'))   // 打印：[object Object]，没有实际用处

    // 正确设置和获取属性
    $('#a1').attr(person1)
    console.log($('#a1').attr('name'))
    console.log($('#a1').attr('age'))
</script>