CH05-JQuery的DOM操作二

本章目标

掌握jQuery操作CSS样式的使用
掌握jQuery操作文本与属性值内容的使用
掌握jQuery节点属性操作

一、操作CSS样式

1、使用css()设置样式值

例：给如下标签设置样式

操作css样式公共HTML代码：

1 2	<p>使用css()为指定的元素设置单个样式</p> <h2>使用css()为指定的元素设置多个样式值</h2>

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //点击p段落设置单个样式
            $("p").click(function(){
                        $(this).css("border", "5px solid blue");
                	}); 
		})
</script>

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //点击h2设置多个样式
            $("h2").click(function(){
                $(this).css({ "color": "red", "border": "5px solid blue" });
                        })
            })              
</script>

2、追加和移除样式

追加样式

例：给p段落追加样式

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //给p段落添加样式
            $("p").addClass("yellow");  
    	})
</script>

移出样式

例：点击p段落时，移除样式

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //给p段落添加样式
            $("p").addClass("yellow");
    
    	    //点击p段落移出样式
            $("p").click(function(){
                $(this).removeClass("yellow");
            });
    	})
</script>

切换样式

toggleClass()模拟了addClass()与removeClass()实现样式切换的过程

例：点击p段落时，自行判断当前是否运用了该样式，如果没有则添加，如果有则移除

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //给p段落添加样式
            $("p").addClass("yellow");   
    
    		//点击p段落切换样式
            $("p").click(function(){
                $(this).toggleClass("yellow");
            });
    	})
</script>

二、操作文本与属性值内容

1、HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML

html()和text()公用HTML代码：

1 2	<h3 id="hb"><b>文字加粗</b></h3> <p id="p1"></p>

获取元素中的html代码

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //获取hb元素中的html代码
            alert($("#hb").html());   
    	})
</script>

设置元素中的html代码，对HTML代码进行解析

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //设置p1元素中的html代码，对HTML代码进行解析
            $("#p1").html("<h4><b>文字加粗</b></h4>"); 
    	})
</script>

2、Text文本操作

text():获取或设置元素的文本内容，类似js中的innerText

获取元素中的文本内容

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //获取hb元素中的文本内容
            alert($("#hb").text());  
    	})
</script>

设置元素中的文本内容

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //设置p1元素中的文本内容 
            $("#p1").text("<h3><b>文字加粗</b></h3>");      
    	})
</script>

3、Vue值操作

val()：读取或修改表单元素的value值

获取元素的value属性值

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //获取txt元素的value属性值
            alert($("#txt").val());
        })
</script>
<input id="txt" type="text" value="一切皆有可能" style="width:500px" />

设置元素的value属性值

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //设置txt元素的value属性值
            $("#txt").val("nothing is impossible! ");   
        })
</script>
<input id="txt" type="text" value="一切皆有可能" style="width:500px" />

html()、text()、val()的区别

三、获取与设置节点属性

1、attr()

attr()用来获取与设置元素属性

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //获取title属性值
            alert($("#img").attr("title"));  
        })
</script>
<img src="cup.jpg" id="img" title="奖杯"/>

2、removeAttr()

removeAttr()用来删除元素的属性

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //删除元素的title属性 
            $("#img").removeAttr("title");  
        })
</script>
<img src="img/cup.jpg" id="img" title="奖杯" width="200px" height="200px"/>