jquery添加dsiplay属性 jquery添加属性的方法

转载

ganmaobuhaowan 2023-06-22 20:41:49

文章标签 更改jquery对象属性 jquery html ajax 文章分类 jQuery 前端开发

获取和设置属性值

jQuery3.html

四种方法：

.attr()方法
attribute用于读取或是设置指定的属性
读取第一个元素的ID

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>插入元素</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script></head><body>    <ul>        <li id="a">1</li>        <li id="b">2</li>        <li id="c">3</li>        <li id="d">4</li>    </ul>    <script>        $(function(){        alert($("#a").attr('id'));        });    </script></body></html>

jquery添加dsiplay属性 jquery添加属性的方法_ajax

弹出第一个元素的ID名

更新属性：

在.attr方法里写上两个参数，第一个是要更改的属性名，第二个是属性值。

通过此方法让第一个ID里的文字变为红色

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>插入元素</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        #selected{            color:red;        }    </style></head><body>    <ul>        <li id="a">1</li>        <li id="b">2</li>        <li id="c">3</li>        <li id="d">4</li>    </ul>    <script>        $(function(){        $("#a").attr('id','selected');        });    </script></body></html>

jquery添加dsiplay属性 jquery添加属性的方法_更改jquery对象属性_02

2. .removeAttr()方法
移除小括号里指定的属性，包括它包含的所有属性值
为ID为a的元素加字体颜色为红色，通过此方法使得元素恢复默认颜色。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>插入元素</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        #a{            color:red;        }    </style></head><body>    <ul>        <li id="a">1</li>        <li id="b">2</li>        <li id="c">3</li>        <li id="d">4</li>    </ul>    <script>        $(function(){        $("#a").removeAttr('id');        });    </script></body></html>

jquery添加dsiplay属性 jquery添加属性的方法_html_03

3. .addClass()方法

用于向class已有的属性中添加一个新的值

为什么要添加类呢？

给一个元素添加类名是一个很常用的操作，这样就可以把已经写好的style样式直接加到这个元素上，不用重复写样式了。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>插入元素</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        .first{            background-color: rosybrown;        }        .selected{            font-size: 20px;            color: royalblue;        }    </style></head><body>    <ul>        <li id="a" class="first">一去二三里</li>        <li id="b">烟村四五家</li>        <li id="c">亭台六七座</li>        <li id="d">八九十枝花</li>    </ul>    <script>        $(function(){        // $("#a").addClass('selected');        });    </script></body></html>

jquery添加dsiplay属性 jquery添加属性的方法_jquery_04

提前写好了selected属性，并且想把它用于第一行文本

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>插入元素</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        .first{            background-color: rosybrown;        }        .selected{            font-size: 20px;            color: royalblue;        }    </style></head><body>    <ul>        <li id="a" class="first">一去二三里</li>        <li id="b">烟村四五家</li>        <li id="c">亭台六七座</li>        <li id="d">八九十枝花</li>    </ul>    <script>        $(function(){        $("#a").addClass('selected');        });    </script></body></html>

jquery添加dsiplay属性 jquery添加属性的方法_更改jquery对象属性_05

4. .removeclass()方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>插入元素</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        .first{            background-color: rosybrown;        }        .selected{            font-size: 20px;            color: royalblue;        }    </style></head><body>    <ul>        <li id="a" class="first selected">一去二三里</li>        <li id="b">烟村四五家</li>        <li id="c">亭台六七座</li>        <li id="d">八九十枝花</li>    </ul>    <script>        $(function(){        // $("#a").removeClass('selected');        });    </script></body></html>

jquery添加dsiplay属性 jquery添加属性的方法_ajax_06