jQuery——操作元素属性的方法（2）

1.交集选择器——标签+类选择器
先找p标签，从p标签中找应用了cls类样式的元素

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

例：设置元素的html内容

    <style>
        div{
            width:300px;
            height:200px;
            background-color: green;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        //点击按钮在div中添加一个p标签
        $(function(){
            $("#btn").click(function(){
                $("#dv").html("<p>这是一个p</p>");
            });
        });
    </script>
.....
	<input type="button" value="显示效果" id="btn"/>
	<div id="dv"></div>

.val();——设置或者获取表单标签的value属性值
.text();——设置或者获取标签中的文本内容，相当于DOM中innerText
.css();——设置元素的css样式属性值
.html();——设置或者获取标签中的html内容，相当于DOM中的innerHTML

例：点击按钮设置元素的div样式（宽、高、背景颜色，边框）

    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                $("#dv").css("width","300px");
                $("#dv").css("height","200px");
                $("#dv").css("backgroundColor","red");
                $("#dv").css("border","1px solid green");
            });
        });
    </script>
......
	<input type="button" value="显示效果" id="btn"/>
	<div id="dv"></div>

2.层次选择器——后代选择器

    <style>
        div{
            width: 500px;
            height: 300px;
            border: 2px solid green;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            //点击按钮，设置div中span的样式
            $("#btn").click(function(){
                //获取的是div这个父级元素中所有的span标签
                //$("#dv span").css("backgroundColor","red");
                //获取的是div这个父级元素中直接的子元素
                //$("#dv>span").css("backgroundColor","red");
                //获取的是div这个父级元素后面的所有的兄弟元素
                $("#dv~span").css("backgroundColor","red");
            });
        });
    </script>
......
	<input type="button" value="显示效果" id="btn"/>
	<span>这是div前面的兄弟元素span</span>
	<div id="dv">
    	<span>这是第一个span</span>
    	<ul>
        	<li>第一个li</li>
        	<li>第二个li
            	<span>第二个li中的span</span>
            	<span>第二个li中的span</span>
        	</li>
        	<li>第三个li</li>
    	</ul>
    	<span>这是第二个span</span>
    	<span>这是第三个span</span>
	</div>
	<p>这是p</p>
	<span>这是div后面的兄弟元素span</span>
	<span>这是div后面的兄弟元素span</span>