jQuery学习总结第三天、attr函数与removeAttr函数、prop、 removeProp函数、addClass函数和removeClass函数、html函数和text函数

最新推荐文章于 2024-05-03 12:26:08 发布

菜到不会下载软件

最新推荐文章于 2024-05-03 12:26:08 发布

阅读量423

点赞数

分类专栏：基础文章标签： jquery

本文链接：https://blog.youkuaiyun.com/m0_57446284/article/details/120521227

版权

基础专栏收录该内容

28 篇文章

订阅专栏

一、attr（参数...）函数与removeAttr（name）函数

1.1 attr函数

函数实现设置或获取当前元素对象的某个属性值，返回string

参数：（name | properties | key,value | fn）

name:属性名称 properties：名称键值

key，value：属性名称和值 key，function： function返回属性值函数，第一个参数为当前元素的索引值，第二个参数为原始属性值

示例：

$('.username').attr('value') //获取class为username的value属性值

attr的实例运用：在文本中加话

   <form action="" id="f1">
        用户名称：<input type="text" id="username"> <br> 用户密码：
        <input type="password" id="password">
    </form><br>
    <button onclick="limitP()">限制密码长度最多16个字符</button>
    <script>
        $(function() {
            $('#username').attr("value", "用户名称")
        })

        function limitP() {
            var pop = {
                "maxlength": 16
            }
            $('#password').attr(pop)
        }
    </script>

1.2 removeAttr函数

函数实现根据给定的元素具有的属性名称从而从该元素上移出此属性，返回当前jQuery对象

示例：

$("img").removeAttr("src") //移除所有img元素的src属性

removeAttr与attr综合应用：

    <form action="" id="f1">
        用户名称：<input type="text" id="username" value="请填写用户名" 
            onclick="removeUse(this)"> <br> 用户密码：
        <input type="password" id="password" value="123456" onclick="removeUse($(this))">
    </form>
    <div>
        <p>皑如山上雪</p>
        <p>皎若云间月</p>
        <p>闻君有两意</p>
        <p>故来相决绝</p>
    </div>
    <script>
        function removeUse(tt) {
            if (tt instanceof $)
                tt.removeAttr('value')
            else
                $(tt).removeAttr('value')
        }
        $(function() {
            $('div p').attr('style', function(i, value) {
                if (i % 2 === 0)
                    return 'color:red'
                else
                    return 'color:pink'
            })
        })
    </script>

结果截图：

二、prop（name|properties | key，value |fn） removeProp

2.1 prop（name|properties | key，value |fn）函数

获取或设置匹配的元素属性值，此函数参数与attr作用相同

示例：

$('input[type ='checkbox']').prop("checked") //选中复选框为true，没选中为false

使用prop的小实例：

    <form action="">
        用户名称:<input id="user" type="text"><br>
        <input type="text" onclick="insert()">
    </form>
    <script>
        $(function() {
            $('form:first input:last').prop('type', 'button').prop('value', '点击初始化用户名称')
        })

        function insert() {
            $('#user').prop('value', '请输入名称')
        }
    </script>

2.2 removeProp

用来删除由jQuery对象调用prop（）方法设置的属性值

示例：

$('p') //删除所有p段落

三、addClass（class | fn）函数和removeClass（[class|fn]）函数

3.1 addClass（class | fn）函数

为每个指定的元素添加指定的类名

class参数：字符串 class名称

fn参数：function（index，class），此函数必须返回一个或多个可控个分隔的class名；index参数为对象在这个集合中的索引值，class参数为这个对象原始的class属性值

示例：

$("p").addClass("selected1 selected2") //设置多个空格分隔

$('ul li:last').addClass(function(){ //函数调用的形式

return $(this).index()

})

3.2 removeClass（[class|fn]）函数

从所有匹配的元素中删除全部或者指定的class

class参数：字符串类型，一个或多个用空格隔开的class类名值

fn函数：函数fun（index，class），返回一个或多个空格隔开的class类名值

index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值

示例：

$("p").removeClass('selected') //从匹配的元素中删除“selected”类

使用removeClass和addClass移出与添加实例：

    <style>
        .cla1 {
            font-size: 20px;
            color: pink;
        }
        
        .cla2 {
            font-size: 25px;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>


    <p>愿得一心人</p>
    <p>白头不相离</p>
    <p>男儿重意气</p>
    <p>何用钱刀为</p>
    <button onclick="removeCla('cla1')">移出p段落上指定的class</button>
    <button onclick="removeAllCla()">移出所有class</button>
    <script>
        $(function() {
            $('p').addClass("cla1 cla2")
        })

        function removeCla(cla) {
            $('p:last').removeClass(cla)
        }

        function removeAllCla() {
            $('p').removeClass()
        }
    </script>

效果截图：

点击移出p段落上指定的class：

移出所有class：

四、html函数和text函数

4.1 html函数

设置或获取元素的html内容，和dom中的innerHTML属性相似

参数：

val：预设html值

fn: function(index,html)处理函数

示例：

$('p').html() //获取所有p段落内容

实例：

    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <script>
        $(function() {
            $('p').html(function(i, html) {
                if (i % 2 == 0)
                    return "<font color='red'>壮志饥餐胡虏肉</font>"
                else
                    return "<font color='yellow'>笑谈渴饮匈奴血</font>"
            })
        })
    </script>