jQuery操作DOM实例-优快云博客

本文链接：https://blog.youkuaiyun.com/wangyijun1/article/details/8860037
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>html element</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">

		<link href="web/css/ui-lightness/jquery-ui-1.9.0.custom.css"
			rel="stylesheet">
		<link href="web/css/jqueryStudy.css" rel="stylesheet">

		<script src="web/js/jquery-1.8.2.js"></script>

		<script src="web/js/jquery-ui-1.9.0.custom.js"></script>

		<script type="text/javascript">
		$(document).ready(function()
		{  
			 //设置或取得指定元素的文本内容
			 $("#showTextBtn").click(function()
			 {  
			 	$("#textValue").text("Hello world!");  
			 });  
			 //设置或取得指定元素的内容 （包括HTML标记）
			 $("#showHtmlBtn").click(function()
			 {  
			   $("#htmlValue").html("<b>Hello world!</b>");  
			 }); 			
			 //设置或取得表单某个输入域的值			 
			 $("#showInputValueBtn").click(function()
			 {  
			   $("#inputValue").val("Dolly Duck");  
			 }); 
			 //得到超链接属性的值 
			 $("#hrefBtn").click(function ()
			 {  
              $("#hrefValue").text($("#guidebee").attr("href"));  
       		 });  
       		 //设置text
       		 $("#setTextBtn").click(function () 
       		 {  
                $("#p1").text(function (i, origText)
                {  
                    return "Old text: " + origText  
                        + " New text: Hello world! (index: " + i + ")";  
                });  
            });  
  			//设置html
            $("#setHtmlBtn").click(function () 
            {  
                $("#p2").html(function (i, origText)
                {  
                    return "Old html: " + origText  
                        + " New html: Hello <b>world!</b> (index: " + i + ")";  
                });  
            });  
            //设置超连接的属性
            $("#guidebee").attr(
            {  
			    "href" : "http://www.phone.com",  
			    "title" : "imobilebbs jQuery Tutorial"  
			});  
            //在指定的元素的尾部添加一个新内容            
            $("#appendBtn").click(function () 
            {  
                $("ol").append(" <b>Appended text</b>.");  
            });  
  			//在指定的元素里前部添加新内容  			
            $("#prependBtn").click(function ()
            {  
                $("ol").prepend("<li>Appended item</li>");  
            });  
            //在指定元素的前面添加新内容。          
            $("#beforeBtn").click(function () 
            {  
                $("img").before("<b>Before</b>");  
            });  
            
  			//在指定元素后添加新内容  			
            $("#afterBtn").click(function () 
            {  
                $("img").after("<i>After</i>");  
            });  
            //删除指定的元素（包括其子元素）            
             $("#removeBtn").click(function () 
            {  
                $("#list").remove(); 

            });  
            //清空指定元素的子元素
            $("#emptyBtn").click(function () 
            {  
                $("#list").remove(); 

            });  
			//添加和移除类样式
             $("#classBtn").toggle(function ()
             {  
                //$("h1,h2,p").addClass("blue");                  
        		$("div").addClass("important blue");  
                //使用toggle为HTML元素在添加/删除CSS类blue之间切换
                $("h1,h2,p").toggleClass("blue");  
                
            },function()
            {
            	$("div").removeClass("important blue");  	
            }            
            );  
            //设置里元素的背景色
            $("#setBackground").toggle(function ()
            {
            	 $("li").css("background-color", "yellow");  
            	
            },
            function ()
            {
            	 $("li").css("background-color", "");  
            	
            });
            //html元素的大小
            $("#sizeBtn").click(function()
            {  
			   $("#textSize").width(300).height(100);  
			    var txt="";  
			   txt+="Width: " + $("#textSize").width() + "</br>";  
			   txt+="Height: " + $("#textSize").height();  
			   $("#sizeDiv").html(txt);  
			   
			 });  
            
 		});
		</script>
	</head>

	<body>
		<p>
			<a href="http://www.imobilebbs.com" id="guidebee">
				btn1imobilebbs.com </a>
			<span id="textValue"></span>
			<span id="htmlValue"></span>
			<input id="inputValue"></input>
			<span id="hrefValue"></span>
		</p>

		<button id="showTextBtn">
			Show text Value
		</button>
		<button id="showHtmlBtn">
			Show html Value
		</button>
		<button id="showInputValueBtn">
			Show html Value
		</button>
		<button id="hrefBtn">
			Show href Value
		</button>
		<h1>
			Heading 1
		</h1>
		<h2>
			Heading 2
		</h2>
		<p id="p1">
			This is a
			<b>bold</b> paragraph.
		</p>
		<p id="p2">
			This is another
			<b>bold</b> paragraph.
		</p>
		<div>
			This is some important text!
		</div>
		<button id="setTextBtn">
			Show Old/New Text
		</button>
		<button id="setHtmlBtn">
			Show Old/New HTML
		</button>
		<button id="classBtn">
			Classes to elements
		</button>
		

		<button id="appendBtn">
			Append text
		</button>
		<button id="prependBtn">
			Prepend list items
		</button>
		<ol id="list">
			<li>
				List item 1
			</li>
			<li>
				List item 2
			</li>
			<li>
				List item 3
			</li>
		</ol>
		<img src="web/images/icon.gif" alt="guidebee" id="icon" width="100"
			height="100">
		<br>
		<button id="setBackground">
			Set background-color of li
		</button>
		<button id="beforeBtn">
			Insert before
		</button>
		<button id="afterBtn">
			Insert after
		</button>
		<button id="removeBtn">
			Remove element
		</button>
		<button id="sizeBtn">
			Set html element  size
		</button>
		<br/>
		<div id="textSize" style="float: left;">
			This  is a paragraph. 
		</div>
		<div id="sizeDiv" style="float: left;"></div>
	</body>
</html>