jQuery 源码分析(十二) 数据操作模块 html特性详解

2021-02-08 作者：匿名阅读：1337次

前言

本文重点解决jQuey源码分析(十二)数据操作模块hml特性详解问题,希望能够帮助到你

jQuery的属性操作模块总共有4个部分，本篇说一下第1个部分:HTML特性部分，html特性部分是对原生方法getAttribute()和setAttribute()的封装，用于修改DOM元素的特性的

jQuery的静态方法含有如下API:

$.attr(elem, name, value)　　；设置或读取html属性，该方法有三种用法:

                    ·$.attr(elem,name,null)   ;如果value为null则调用jQuery.removeAttr(elem, name)删除该属性
                   ·$.attr(elem,name,value)   ;设置elem元素的name属性值为value。
                   ·$.attr(elem,name)          ;获取elem元素的name属性

$.removeAttr(elem, name)　　;从DOM元素elem上移除name属性，name可以是单个字符串，也可以是空格分隔的多个html属性。对于应布尔属性会同步设置对应的DOM属性为false。

jQuery/$ 实例方法(可以通过jQuery实例调用的):

attr(name, value) 　　　　 ;移除、设置html属性，有以下方法

　　　　　　·attr(obj)      　　　　　　 ;参数1是对象时       　　　　　　　　　　            ;access()函数中验证表示一次性设置多个属性
　　　　　　·attr(name,value)   　　　;为每个匹配元素设置一个HTML属性       　　      ;value可以是一个函数，取值为返回值,也可以为null时表示删除该属性
　　　　　　·attr(name,NULL)   　　   ;参数2为NULL时表示删除所有匹配元素的name特性，间接调用removeAttr()
　　　　　　·attr(name)       　　　　 ;参数1是字符串时，参数2未指定或者设置为false   ;表示获取第一个匹配元素的HTML属性值。

removeAttr(name) ;移除每一个匹配元素的一个或多个HTML属性，name是要是移除的html属性，多个可以用空格分隔

举个栗子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <a>链接</a>
    <button>淘宝</button>                <!--点击后a标签将导航到淘宝-->
    <button>百度</button>                <!--点击后a标签将导航到百度-->
    <button>移除</button>                <!--点击后a标签将取消导航-->
    <script>
        let a      = document.getElementsByTagName('a')[0],                //获取a标签的引用
            b1    = document.getElementsByTagName('button')[0],            //淘宝按钮的引用
            b2    = document.getElementsByTagName('button')[1],            //百度按钮的引用
            b3    = document.getElementsByTagName('button')[2];            //移除按钮的引用
        b1.addEventListener('click',function(){
            $.attr(a,'href','http://www.taobao.com');            //通过jQuery的静态方法设置href属性
        })
        b2.addEventListener('click',function(){
            $('a').attr('href','http://www.baidu.com')            //通过jQuery的实例方法设置href属性
        })
        b3.addEventListener('click',function(){
            $("a").removeAttr('href')                            //移除href属性
        })
    </script>    
</body>
</html>