jQuery——操作元素属性的方法（1）_id选择器怎修改value-优快云博客

本文主要介绍了jQuery中如何使用选择器来操作元素属性，包括通过id选择器、标签选择器、类样式选择器以及并集选择器的方式。举例说明了如$("div.redClass")这样的代码如何获取class为redClass的div元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.通过id选择器操作元素属性

    <script>
        //页面加载事件
        $(function(){
            //根据id选择器获取按钮，添加点击事件，修改按钮的value属性值
            $("#btn").click(function(){
                this.value="哈哈";
                //
            });
        });
    </script>
......
	<body>
		<input type="button" value="显示效果" id="btn"/>
	</body>

2.通过标签选择器操作元素属性

    <script>
        //.text()方法相当于DOM中的.innerText属性
        //对象.text()——>获取该元素的文本内容
        //对象.text("属性"，"值")——>设置该元素的文本内容
        //本身代码没有循环操作，jQuery中内部帮助循环操作的——隐式迭代
        $(function () {
            //根据id选择器获取按钮，添加点击事件
            $("#btn").click(function () {
                //根据标签选择器获取p标签
                $("p").text("我们都是p标签");
            });
        });
    </script>
......
	<input type="button" value="显示效果" id="btn"/>
    <p>白日梦蓝</p>
    <p>生活因你而火热</p>
    <p>花火</p>
    <p>24小时摇滚聚会</p>
    <p>你要跳舞吗</p>

3.通过类样式操作元素属性

    <style>
        .cls{
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        //类选择器：$(".类样式的名字")——某个或者是多个
        //.css("属性","值");——设置某个元素的css样式属性值
        $(function () {
            //根据id选择器获取按钮，添加点击事件
            $("#btn").click(function(){
                //获取所有应用cls类样式的元素，改变背景颜色
                $(".cls").css("backgroundColor","yellow");
            });
        });
    </script>
    ......
	<input type="button" value="显示效果" id="btn"/>
	<div class="cls"></div>
	<p class="cls">找一个和弦开始唱 那故事遗忘的时光 起点是那平凡的成长 或初学吉他时 少年们的模样</p>

4.并集选择器
用法：$(“div.redClass”); 获取class为redClass的div元素

    <style>
        div{
            width:300px;
            height:200px;
            background-color: green;
        }
        .cls{
            background-color: red;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        //页面加载的事件
        $(function(){
            $("#btn").click(function(){
                $("#dv,p,.cls").css("backgroundColor","orange");
            });
        });
    </script>
......
	<input type="button" value="显示效果" id="btn"/>
	<div id="dv"></div>
	<p>成名在望</p>
	<span class="cls">找一个和弦开始唱 那故事遗忘的时光
    	起点是那平凡的成长 或初学吉他时 少年们的模样</span>
	<ul>
    	<li>那一年的舞台 没掌声 没聚光</li>
    	<li>只有盆地边缘 不认输 的倔强</li>
    	<li>排练室的日夜 在争论 在激荡</li>
    	<li>以音量去吞噬 无退路 的彷徨</li>
	</ul>