整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          SpringBoot+jQuery添加數據

          SpringBoot+jQuery添加數據


          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>插入數據</title>
          <scriptsrc="/jquery_2_1.min.js"></script>
          </head>
          <body>
          <form id="form-add">
          用戶名:<input type="text"  name="userName"><br>  
          密碼:<input type="text" name="passWord"><br/>
          <input id="btn-add" type="button" value="添加數據" />
          </form>
          <script type="text/javascript">
          $("#btn-add").click(function() {    
             $.ajax({
                 url: "/usersave2",
                 type: "post",
                 data: $("#form-add").serialize(),      
                 dataType: "json",
                 success: function(res) {
                     if (res.success) {
                    alert(res.msg);
             location.href="/userlist";
                    } else {
                         alert("注冊失敗!" + res.message);
                    }
                },
                 error:function(xhr){
                alert("發生錯誤"+xhr.status);
                }
            });
          });
          </script>
          </body>
          </html>




          Query的介紹

          學習目標

          • 能夠知道jQuery的作用及優點

          1. jQuery的定義

          jQuery是對JavaScript的封裝,它是免費、開源的JavaScript函數庫,jQuery 極大地簡化了 JavaScript 編程。

          2. jQuery的作用

          jQuery和JavaScript它們的作用一樣,都是負責網頁行為操作,增加網頁和用戶的交互效果的,只不過jQuery簡化了JavaScript編程,jQuery實現交互效果更簡單。

          3. jQuery的優點

          • jQuery兼容了現在主流的瀏覽器,增加了程序員的開發效率。
          • jQuery簡化了 JavaScript 編程,代碼編寫更加簡單。

          4. 小結

          • jQuery是一個免費、開源的JavaScript函數庫
          • jQuery的作用和JavaScript一樣,都是負責網頁和用戶的交互效果。
          • jQuery的優點就是兼容主流瀏覽器,代碼編寫更加簡單。

          jQuery的用法

          學習目標

          • 能夠知道jQuery的引入方式
          • 能夠說出兩種jQuery入口函數的寫法

          1. jQuery的引入

          <script src="js/jquery-1.12.4.min.js"></script>
          

          2. jQuery的入口函數

          我們知道使用js獲取標簽元素,需要頁面加載完成以后再獲取,我們通過給onload事件屬性設置了一個函數來獲取標簽元素,而jquery提供了ready函數來解決這個問題,保證獲取標簽元素沒有問題,它的速度比原生的 window.onload 更快

          入口函數示例代碼:

          
          <script src="js/jquery-1.12.4.min.js"></script>
          <script>
              window.onload=function(){
                  var oDiv=document.getElementById('div01');
                  alert('原生就是獲取的div:' + oDiv);
              };
              $(document).ready(function(){
                  var $div=$('#div01');
                  alert('jquery獲取的div:' + $div);
              });
          </script>
          
          <div id="div01">這是一個div</div>
          

          入口函數的簡寫示例代碼:

          
          <script src="js/jquery-1.12.4.min.js"></script>
          <script>
              window.onload=function(){
                  var oDiv=document.getElementById('div01');
                  alert('原生就是獲取的div:' + oDiv);
              };
          
              /*
              $(document).ready(function(){
                  var $div=$('#div01');
                  alert('jquery獲取的div:' + $div);
              });
              */
          
              // 上面ready的寫法可以簡寫成下面的形式:
              $(function(){
                  var $div=$('#div01');
                  alert('jquery獲取的div:' + $div);
              }); 
          </script>
          
          <div id="div01">這是一個div</div>
          

          3. 小結

          • 引入jQuery
          • 獲取標簽元素需要在入口函數來完成,它的速度比原生的 window.onload 更快
          • jQuery入口函數有兩種寫法:
          • // 完整寫法 $(document).ready(function(){ ... }); // 簡化寫法 $(function(){ ... });



          jQuery選擇器

          學習目標

          • 能夠使用jQuery選擇器獲取標簽元素

          1. jQuery選擇器的介紹

          jquery選擇器就是快速選擇標簽元素,獲取標簽的,選擇規則和css樣式一樣。

          2. jQuery選擇器的種類

          1. 標簽選擇器
          2. 類選擇器
          3. id選擇器
          4. 層級選擇器
          5. 屬性選擇器

          示例代碼:

          $('#myId') //選擇id為myId的標簽
          $('.myClass') // 選擇class為myClass的標簽
          $('li') //選擇所有的li標簽
          $('#ul1 li span') //選擇id為ul1標簽下的所有li標簽下的span標簽
          $('input[name=first]') // 選擇name屬性等于first的input標簽
          

          說明:
          可以使用length屬性來判斷標簽是否選擇成功, 如果length大于0表示選擇成功,否則選擇失敗。

          $(function(){
              result=$("div").length;
              alert(result);
          });
          

          3. 小結

          • jQuery選擇器就是選擇標簽的
          • 標簽選擇器是根據標簽名來選擇標簽
          • 類選擇器是根據類名來選擇標簽
          • id選擇器是根據id來選擇標簽
          • 層級選擇器是根據層級關系來選擇標簽
          • 屬性選擇器是根據屬性名來選擇標簽

          選擇集過濾

          學習目標

          • 能夠使用選擇器進行標簽過濾

          1. 選擇集過濾的介紹

          選擇集過濾就是在選擇標簽的集合里面過濾自己需要的標簽

          2. 選擇集過濾的操作

          • has(選擇器名稱)方法,表示選取包含指定選擇器的標簽
          • eq(索引)方法,表示選取指定索引的標簽

          has方法的示例代碼:

          <script>
              $(function(){
                  //  has方法的使用
                  var $div=$("div").has("#mytext");
                  //  設置樣式
                  $div.css({"background":"red"});
              });
          </script>
          
          <div>
              這是第一個div
              <input type="text" id="mytext">
          </div>
          
          <div>
              這是第二個div
              <input type="text">
              <input type="button">
          </div>
          

          eq方法的示例代碼:

          <script>
              $(function(){
                  //  has方法的使用
                  var $div=$("div").has("#mytext");
                  //  設置樣式
                  $div.css({"background":"red"});
          
                  //  eq方法的使用
                  var $div=$("div").eq(1);
                  //  設置樣式
                  $div.css({"background":"yellow"});
              });
          </script>
          
          <div>
              這是第一個div
              <input type="text" id="mytext">
          </div>
          
          <div>
              這是第二個div
              <input type="text">
              <input type="button">
          </div>
          

          3. 小結

          • 選擇集過濾可以使用has方法和eq方法來完成
          • jquery給標簽設置樣式使用css方法

          選擇集轉移

          學習目標

          • 能夠說出2種選擇集轉移方法

          1. 選擇集轉移介紹

          選擇集轉移就是以選擇的標簽為參照,然后獲取轉移后的標簽

          2. 選擇集轉移操作

          • $('#box').prev(); 表示選擇id是box元素的上一個的同級元素
          • $('#box').prevAll(); 表示選擇id是box元素的上面所有的同級元素
          • $('#box').next(); 表示選擇id是box元素的下一個的同級元素
          • $('#box').nextAll(); 表示選擇id是box元素的下面所有的同級元素
          • $('#box').parent(); 表示選擇id是box元素的父元素
          • $('#box').children(); 表示選擇id是box元素的所有子元素
          • $('#box').siblings(); 表示選擇id是box元素的其它同級元素
          • $('#box').find('.myClass'); 表示選擇id是box元素的class等于myClass的元素

          選擇集轉移的示例代碼:

          <script>
              $(function(){
                  var $div=$('#div01');
          
                  $div.prev().css({'color':'red'});
                  $div.prevAll().css({'text-indent':50});
                  $div.next().css({'color':'blue'});
                  $div.nextAll().css({'text-indent':80});
                  $div.siblings().css({'text-decoration':'underline'})
                  $div.parent().css({'background':'gray'});
                  $div.children().css({'color':'red'});
                  $div.find('.sp02').css({'font-size':30});
              });  
          </script>
          
          <div>
              <h2>這是第一個h2標簽</h2>
              <p>這是第一個段落</p>
              <div id="div01">這是一個<span>div</span><span class="sp02">第二個span</span></div>
              <h2>這是第二個h2標簽</h2>
              <p>這是第二個段落</p>
          </div>
          

          3. 小結

          • prev() 表示獲取上一個同級元素
          • prevAll() 表示獲取上面所有同級元素
          • next() 表示獲取下一個同級元素
          • nextAll() 表示獲取下面所有同級元素
          • parent() 表示獲取父元素
          • children() 表示獲取所有的子元素
          • siblings() 表示獲取其它同級元素
          • find("選擇器名稱") 表示獲取指定選擇器的元素

          獲取和設置元素內容

          學習目標

          • 能夠知道獲取和設置元素內容的操作

          1. html方法的使用

          jquery中的html方法可以獲取和設置標簽的html內容

          示例代碼:

          <script>
              $(function(){
          
                  var $div=$("#div1");
                  //  獲取標簽的html內容
                  var result=$div.html();
                  alert(result);
                  //  設置標簽的html內容,之前的內容會清除
                  $div.html("<span style='color:red'>你好</span>");
                  //  追加html內容
                  $div.append("<span style='color:red'>你好</span>");
          
              });
          </script>
          
          <div id="div1">
              <p>hello</p>
          </div>
          

          說明:

          給指定標簽追加html內容使用append方法

          2. 小結

          • 獲取和設置元素的內容使用: html方法
          • 給指定元素追加html內容使用: append方法

          獲取和設置元素屬性

          學習目標

          • 能夠知道獲取和設置元素屬性的操作

          1. prop方法的使用

          之前使用css方法可以給標簽設置樣式屬性,那么設置標簽的其它屬性可以使用prop方法了。

          示例代碼:

          <style>
              .a01{
                  color:red;
              }
          </style>
          
          <script>
              $(function(){
                  var $a=$("#link01");
                  var $input=$('#input01')
          
                  // 獲取元素屬性
                  var sId=$a.prop("id");
                  alert(sId);
          
                  // 設置元素屬性
                  $a.prop({"href":"http://www.baidu.com","title":'這是去到百度的鏈接',"class":"a01"});
          
                  //  獲取value屬性
                  // var sValue=$input.prop("value");
                  // alert(sValue);
          
                  // 獲取value屬性使用val()方法的簡寫方式
                  var sValue=$input.val();
                  alert(sValue);
                  // 設置value值
                  $input.val("222222");
              })
          </script>
          
          <a id="link01">這是一個鏈接</a>
          <input type="text" id="input01" value="111111">
          

          說明: 獲取value屬性和設置value屬性還可以通過val方法來完成。

          2. 小結

          • 獲取和設置元素屬性的操作可以通過prop方法來完成
          • 獲取和設置元素的value屬性可以通過val方法來完成,更加簡單和方便

          jQuery事件

          學習目標

          • 能夠說出兩個常用的jQuery事件

          1. 常用事件

          • click() 鼠標單擊
          • blur() 元素失去焦點
          • focus() 元素獲得焦點
          • mouseover() 鼠標進入(進入子元素也觸發)
          • mouseout() 鼠標離開(離開子元素也觸發)
          • ready() DOM加載完成

          示例代碼:

          <script>
              $(function(){
                  var $li=$('.list li');
                  var $button=$('#button1')
                  var $text=$("#text1");
                  var $div=$("#div1")
          
                  //  鼠標點擊
                  $li.click(function(){             
                      // this指的是當前發生事件的對象,但是它是一個原生js對象
                      // this.style.background='red';
          
                      // $(this) 指的是當前發生事件的jquery對象
                      $(this).css({'background':'gold'});
                      // 獲取jquery對象的索引值,通過index() 方法
                      alert($(this).index());
                  });
          
                  //  一般和按鈕配合使用
                  $button.click(function(){
                      alert($text.val());
                  });
          
                  //  獲取焦點
                  $text.focus(function(){
                      $(this).css({'background':'red'});
          
                  });
          
                  //  失去焦點
                  $text.blur(function(){
                      $(this).css({'background':'white'});
          
                  });
          
                  //  鼠標進入
                  $div.mouseover(function(){
                      $(this).css({'background':'gold'});
          
                  });
          
                  //  鼠標離開
                  $div.mouseout(function() {
                      $(this).css({'background':'white'});
                  });
              });
          </script>
          
          <div id="div1">
              <ul class="list">
                  <li>列表文字</li>
                  <li>列表文字</li>
                  <li>列表文字</li>
              </ul>
          
              <input type="text" id="text1">
              <input type="button" id="button1" value="點擊">
          </div>
          

          說明:

          • this指的是當前發生事件的對象,但是它是一個原生js對象
          • $(this) 指的是當前發生事件的jquery對象

          2. 小結

          jQuery常用事件:

          • click() 鼠標單擊
          • blur() 元素失去焦點
          • focus() 元素獲得焦點
          • mouseover() 鼠標進入(進入子元素也觸發)
          • mouseout() 鼠標離開(離開子元素也觸發)
          • ready() DOM加載完成


          事件代理

          學習目標

          • 能夠知道事件代理的使用方式

          1. 事件代理介紹

          事件代理就是利用事件冒泡的原理(事件冒泡就是事件會向它的父級一級一級傳遞),把事件加到父級上,通過判斷事件來源,執行相應的子元素的操作,事件代理首先可以極大減少事件綁定次數,提高性能;其次可以讓新加入的子元素也可以擁有相同的操作

          事件冒泡代碼:

          
           <script>
              $(function(){
          
                  var $div1=$('#div1');
                  var $div2=$('#div2');
          
                  $div1.click(function(){
                      alert($(this).html());
                  }); 
          
                  $div2.click(function(){
                      alert($(this).html());
                  }); 
              });
          </script>
          
           <div id="div1" style="width:200px; height:200px; background: red;">
              <div id="div2" style="width:100px; height:100px;background: yellow;">
                  哈哈
              </div>
          </div>
          

          說明:

          當點擊子元素div,它的點擊事件會向它父元素傳遞,也會觸發了父元素的點擊事件,這就是事件冒泡。

          2. 事件代理的使用

          一般綁定事件的寫法:

          $(function(){
              $ali=$('#list li');
              $ali.click(function() {
                  $(this).css({background:'red'});
              });
          })
          
          <ul id="list">
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
          </ul>
          

          事件代理的寫法

          $(function(){
              $list=$('#list');
              // 父元素ul 來代理 子元素li的點擊事件
              $list.delegate('li', 'click', function() {
                  // $(this)表示當前點擊的子元素對象
                  $(this).css({background:'red'});
              });
          })
          
          <ul id="list">
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
          </ul>
          

          delegate方法參數說明:

          delegate(childSelector,event,function)

          • childSelector: 子元素的選擇器
          • event: 事件名稱,比如: 'click'
          • function: 當事件觸發執行的函數

          3. 小結

          • 事件代理就是使用父元素來代理子元素的事件,好處是減少事件的綁定次數,提高性能。
          • 使用場景當多個相同的子元素綁定同一個事件,可以使用事件代理。
          • 事件代理使用是使用delegate方法來完成

          JavaScript對象

          學習目標

          • 能夠知道JavaScript對象有兩種創建方式

          1. JavaScript對象的介紹

          JavaScript 中的所有事物都是對象:字符串、數值、數組、函數等都可以認為是對象,此外,JavaScript 允許自定義對象,對象可以擁有屬性和方法。

          2. JavaScript創建對象操作

          創建自定義javascript對象有兩種方式:

          • 通過頂級Object類型來實例化一個對象
          • 通過對象字面量創建一個對象

          Object類創建對象的示例代碼:

          <script>
              var person=new Object();
          
              // 添加屬性:
              person.name='tom';
              person.age='25';
          
              // 添加方法:
              person.sayName=function(){
                  alert(this.name);
              }
          
              // 調用屬性和方法:
              alert(person.age);
              person.sayName();
          </script>
          

          對象字面量創建對象的示例代碼:

          <script>
              var person2={
                  name:'Rose',
                  age: 18,
                  sayName:function(){
                      alert('My name is' + this.name);
                  }
              }
          
              // 調用屬性和方法:
              alert(person2.age);
              person2.sayName();
          </script>
          

          說明:

          調用屬性和方法的操作都是通過點語法的方式來完成,對象的創建推薦使用字面量方式,因為更加簡單。

          3. 小結

          創建自定義javascript對象有兩種方式:

          • Object
          • 字面量

          json

          學習目標

          • 能夠知道json的格式

          1. json的介紹

          json是 JavaScript Object Notation 的首字母縮寫,翻譯過來就是javascript對象表示法,這里說的json就是類似于javascript對象的字符串,它同時是一種數據格式,目前這種數據格式比較流行,逐漸替換掉了傳統的xml數據格式。

          2. json的格式

          json有兩種格式:

          1. 對象格式
          2. 數組格式

          對象格式:

          對象格式的json數據,使用一對大括號({}),大括號里面放入key:value形式的鍵值對,多個鍵值對使用逗號分隔。

          對象格式的json數據:

          {
              "name":"tom",
              "age":18
          }
          

          格式說明:

          json中的(key)屬性名稱和字符串值需要用雙引號引起來,用單引號或者不用引號會導致讀取數據錯誤。

          數組格式:

          數組格式的json數據,使用一對中括號([]),中括號里面的數據使用逗號分隔。

          數組格式的json數據:

          ["tom",18,"programmer"]
          

          實際開發的json格式比較復雜,例如:

          {
              "name":"jack",
              "age":29,
              "hobby":["reading","travel","photography"]
              "school":{
                  "name":"Merrimack College",
                  "location":"North Andover, MA"
              }
          }
          

          3. json數據轉換成JavaScript對象

          json本質上是字符串,如果在js中操作json數據,可以將json字符串轉化為JavaScript對象。

          示例代碼:

          var sJson='{"name":"tom","age":18}';
          var oPerson=JSON.parse(sJson);
          
          // 操作屬性
          alert(oPerson.name);
          alert(oPerson.age);
          

          4. 小結

          • json就是一個javascript對象表示法,json本質上是一個字符串。
          • json有兩種格式:1. 對象格式, 2. 數組格式

          ajax

          學習目標

          • 能夠知道ajax的作用

          1. ajax的介紹

          ajax 是 Asynchronous JavaScript and XML的簡寫,ajax一個前后臺配合的技術,它可以讓 javascript 發送異步的 http 請求,與后臺通信進行數據的獲取,ajax 最大的優點是實現局部刷新,ajax可以發送http請求,當獲取到后臺數據的時候更新頁面顯示數據實現局部刷新,在這里大家只需要記住,當前端頁面想和后臺服務器進行數據交互就可以使用ajax了。

          這里提示一下大家, 在html頁面使用ajax需要在web服務器環境下運行, 一般向自己的web服務器發送ajax請求。

          2. ajax的使用

          jquery將它封裝成了一個方法$.ajax(),我們可以直接用這個方法來執行ajax請求。

          示例代碼:

          <script>
              $.ajax({
              // 1.url 請求地址
              url:'http://t.weather.sojson.com/api/weather/city/101010100',
              // 2.type 請求方式,默認是'GET',常用的還有'POST'
              type:'GET',
              // 3.dataType 設置返回的數據格式,常用的是'json'格式
              dataType:'JSON',
              // 4.data 設置發送給服務器的數據, 沒有參數不需要設置
          
              // 5.success 設置請求成功后的回調函數
              success:function (response) {
                  console.log(response);    
              },
              // 6.error 設置請求失敗后的回調函數
              error:function () {
                  alert("請求失敗,請稍后再試!");
              },
              // 7.async 設置是否異步,默認值是'true',表示異步,一般不用寫
              async:true
          });
          </script>
          

          ajax方法的參數說明:

          1. url 請求地址
          2. type 請求方式,默認是'GET',常用的還有'POST'
          3. dataType 設置返回的數據格式,常用的是'json'格式
          4. data 設置發送給服務器的數據,沒有參數不需要設置
          5. success 設置請求成功后的回調函數
          6. error 設置請求失敗后的回調函數
          7. async 設置是否異步,默認值是'true',表示異步,一般不用寫
          8. 同步和異步說明同步是一個ajax請求完成另外一個才可以請求,需要等待上一個ajax請求完成,好比線程同步。異步是多個ajax同時請求,不需要等待其它ajax請求完成, 好比線程異步。

          ajax的簡寫方式:

          $.ajax按照請求方式可以簡寫成$.get或者$.post方式

          ajax簡寫方式的示例代碼:

           <script>
              $(function(){
                  /*
                   1. url 請求地址
                   2. data 設置發送給服務器的數據, 沒有參數不需要設置
                   3. success 設置請求成功后的回調函數
                   4. dataType 設置返回的數據格式,常用的是'json'格式, 默認智能判斷數據格式
                  */ 
                  $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
                      console.log(dat);
                      console.log(status);
                      alert(dat);
                  }).error(function(){
                      alert("網絡異常");
                  });
          
                  /*
                   1. url 請求地址
                   2. data 設置發送給服務器的數據, 沒有參數不需要設置
                   3. success 設置請求成功后的回調函數
                   4. dataType 設置返回的數據格式,常用的是'json'格式, 默認智能判斷數據格式
                  */ 
                  $.post("test.php", {"func": "getNameAndTime"}, function(data){
                      alert(data.name); 
                      console.log(data.time); 
                  }, "json").error(function(){
                      alert("網絡異常");
                  }); 
              });
          
          
          </script>
          

          $.get和$.post方法的參數說明:

          $.get(url,data,success(data, status, xhr),dataType).error(func)
          $.post(url,data,success(data, status, xhr),dataType).error(func)

          1. url 請求地址
          2. data 設置發送給服務器的數據,沒有參數不需要設置
          3. success 設置請求成功后的回調函數data 請求的結果數據status 請求的狀態信息, 比如: "success"xhr 底層發送http請求XMLHttpRequest對象
          4. dataType 設置返回的數據格式"xml""html""text""json"
          5. error 表示錯誤異常處理func 錯誤異常回調函數

          3. 小結

          • ajax 是發送http請求獲取后臺服務器數據的技術
          • ajax的簡寫方式可以使用$.get和$.post方法來完成

          過 jQuery,可以很容易地添加新元素/內容。


          添加新的 HTML 內容

          我們將學習用于添加新內容的四個 jQuery 方法:

          • append() - 在被選元素的結尾插入內容

          • prepend() - 在被選元素的開頭插入內容

          • after() - 在被選元素之后插入內容

          • before() - 在被選元素之前插入內容


          jQuery append() 方法

          jQuery append() 方法在被選元素的結尾插入內容。

          實例

          $("p").append("追加文本");

          嘗試一下 ?


          jQuery prepend() 方法

          jQuery prepend() 方法在被選元素的開頭插入內容。

          實例

          $("p").prepend("在開頭追加文本");


          通過 append() 和 prepend() 方法添加若干新元素

          在上面的例子中,我們只在被選元素的開頭/結尾插入文本/HTML。

          不過,append() 和 prepend() 方法能夠通過參數接收無限數量的新元素。可以通過 jQuery 來生成文本/HTML(就像上面的例子那樣),或者通過 JavaScript 代碼和 DOM 元素。

          在下面的例子中,我們創建若干個新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 append() 方法把這些新元素追加到文本中(對 prepend() 同樣有效):

          實例

          functionappendText(){vartxt1="<p>文本。</p>"; // 使用 HTML 標簽創建文本vartxt2=$("<p></p>").text("文本。"); // 使用 jQuery 創建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}

          嘗試一下 ?


          jQuery after() 和 before() 方法

          jQuery after() 方法在被選元素之后插入內容。

          jQuery before() 方法在被選元素之前插入內容。

          實例

          $("img").after("在后面添加文本"); $("img").before("在前面添加文本");

          嘗試一下 ?


          通過 after() 和 before() 方法添加若干新元素

          after() 和 before() 方法能夠通過參數接收無限數量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建新元素。

          在下面的例子中,我們創建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 after() 方法把這些新元素插到文本中(對 before() 同樣有效):

          實例

          functionafterText(){vartxt1="<b>I </b>"; // 使用 HTML 創建元素vartxt2=$("<i></i>").text("love "); // 使用 jQuery 創建元素vartxt3=document.createElement("big"); // 使用 DOM 創建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在圖片后添加文本}


          主站蜘蛛池模板: 在线精品国产一区二区| 波多野结衣一区二区三区88| 国产福利一区二区精品秒拍| 国产精品成人一区无码| 国产一区在线视频| 色综合久久一区二区三区| 亚洲一区二区三区高清| 无码日韩人妻AV一区二区三区| 亚洲一区二区三区无码国产| 日本在线视频一区| 日韩精品福利视频一区二区三区| 亚洲福利视频一区二区三区| 国产免费一区二区三区在线观看| 日韩社区一区二区三区| 国产成人精品亚洲一区| 伊人久久一区二区三区无码| 麻豆AV无码精品一区二区| 无码AV中文一区二区三区| 国产综合一区二区| 无码人妻AV免费一区二区三区| 熟女少妇精品一区二区| 精品一区二区无码AV| 一区二区三区视频网站| 人妻无码一区二区三区四区| 国产伦精品一区二区三区精品| 伦精品一区二区三区视频| 亚洲AV无码一区二区三区牛牛| 人妻天天爽夜夜爽一区二区| 末成年女AV片一区二区| 中文字幕视频一区| 精品国产AV一区二区三区| 精品动漫一区二区无遮挡| 3D动漫精品啪啪一区二区下载| 91国偷自产一区二区三区| 国产一区二区三区小说| 国产一区二区精品在线观看| 国产精品免费综合一区视频| 精品视频一区二区| 国产福利电影一区二区三区| 一区二区三区内射美女毛片| 99久久精品国产高清一区二区 |