首頁 > 其他

jQuery學習（三）—jquery 與 DOM操作

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

執行個體一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript"  src="jquery-1.8.1.js">
</script>
<script type="text/javascript">
 $(function(){
  /*
  var p = $("p");
  var li = $("ul li:eq(1)");

  var title = p.attr("title");
  var title2 = li.attr("title");
  var text = li.text();

  alert(title);//hello world
  alert(title2);//1
  alert(text);//好
  */
  /*
  $("ul").append("<li title='abc'>hello</li>")
    .append("<li title='xyz'>world</li>");
  */
  $("<li title='abc'>hello</li>").appendTo("ul");
 });
</script>
</head>

<body>
<p title="hello world">你覺得學校怎麼樣？</p>
<ul>
 <li title="o">一般</li>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">好得不得了</li>
 <li title="5">好的無法形容</li>
</ul>
</body>
</html>

 

 

執行個體二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript"  src="jquery-1.8.1.js">
</script>
<script type="text/javascript">
 /*
 var addItems = function()
 {
  
  document.getElementById("div1").innerHTML="";//避免重複點擊
  var value = parseInt(document.getElementById("itemsNumber").value);
  //alert(value);
  for(var i = 0; i < value; i++)
  {
   var input = document.createElement("input");
   input.setAttribute("type","text");

   var br = document.createElement("br");
   
   document.getElementById("div1").appendChild(input);
   document.getElementById("div1").appendChild(br);
  }
 }
 */
 $(function(){
  $("#btn").click(function(){
   document.getElementById("div1").innerHTML="";
   var value = parseInt($("#itemsNumber").val());
   
   for(var i = 0; i < value; i++)
   {
    $("#div1").append("<input type='text'><br>");
   }
  });
 });

</script>
</head>

<body>
<input type="text" id="itemsNumber">
<input type="button" id="btn" value="click">
<div id="div1"></div>
</body>
</html>

 

執行個體三：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript"  src="jquery-1.8.1.js">
</script>
<script type="text/javascript">
 $(function(){
  var li1 = "<li title='hello'>hello1</li>";
  var li2 = "<li title='hello'>hello2</li>";
  var li3 = "<li title='hello'>hello3</li>";

  $("ul").append(li1);
  $("ul").prepend(li2);
  $("ul li:eq(4)").after(li3);
 });
</script>
</head>

<body>
<p title="hello world">你覺得學校怎麼樣？</p>
<ul>
 <li title="o">一般</li>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">好得不得了</li>
 <li title="5">好的無法形容</li>
</ul>
</body>
</html>

 

運行結果：

 

執行個體四：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript"  src="jquery-1.8.1.js">
</script>
<script type="text/javascript">
 $(function(){
  $("ul li:eq(2)").insertAfter("ul li:eq(4)");
 });
</script>
</head>

<body>
<p title="hello world">你覺得學校怎麼樣？</p>
<ul>
 <li title="o">一般</li>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">好得不得了</li>
 <li title="5">好的無法形容</li>
</ul>
</body>
</html>

 

 

執行個體五：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript"  src="jquery-1.8.1.js">
</script>
<script type="text/javascript">
 $(function(){
  //remove()方法返回被移除的節點的jQuery對象
  var removedLi = $("ul li:eq(3)").remove();
  removedLi.appendTo($("ul"));

  $("ul li").remove("li[title = 2]");

  $("ul li:eq(3)").empty();
 });
</script>
</head>

<body>
<p title="hello world">你覺得學校怎麼樣？</p>
<ul>
 <li title="o">一般</li>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">好得不得了</li>
 <li title="5">好的無法形容</li>
</ul>
</body>
</html>

 

運行結果：

 

 

執行個體六：動態檔案添加和刪除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript"  src="jquery-1.8.1.js">
</script>
<script type="text/javascript">
 /*
 function addFile()
 {
  var div = document.getElementById("file");

  var br = document.createElement("br");
  var input = document.createElement("input");
  var btn = document.createElement("input");

  input.setAttribute("type","file");
  btn.setAttribute("type","button");
  btn.setAttribute("value","刪除");

  btn.onclick = function(){
   div.removeChild(br);
   div.removeChild(input);
   div.removeChild(btn);
  }

  div.appendChild(br);
  div.appendChild(input);
  div.appendChild(btn);
 }
 */
 $(function(){
  $("#addFile").click(function(){
   var br = $("<br/>");
   var input = $("<input type='file'>");
   var btn = $("<input type='button' value='刪除'>");
   $("#file").append(br).append(input).append(btn);
   btn.click(function(){
    br.remove();
    input.remove();
    btn.remove();
   });
  });
 });
</script>
</head>

<body>
<input type="button" value="添加" id="addFile">
<div id="file"></div>
</body>
</html>

 

結果如下：

 

執行個體七：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript"  src="jquery-1.8.1.js">
</script>
<script type="text/javascript">
 $(function(){
  $("#username").focus(function(){
   var value = $(this).val();
   if(value == this.defaultValue)
   {
    $(this).val("");
   }
  });
  $("#username").blur(function(){
   var value = $(this).val();
   if(value == "")
   {
    $(this).val(this.defaultValue);
   }
  });
 });
</script>
</head>

<body>
<input type="text" id="username" value="使用者名稱"/><br>
<input type="password" id="password"/><br>
<input type="button" value="確定">
</body>
</html>

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More