05_jQuery函式的使用

ZHOU_VIP發表於2018-07-24
jQuery函式

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>03_jQuery核心函式</title>
</head>

<body>

<div>
  <button id="btn">測試</button>
  <br/>

  <input type="text" name="msg1"/><br/>
  <input type="text" name="msg2"/><br/>
</div>


<!--
1. 作為一般函式呼叫: $(param)
  1). 引數為函式 : 當DOM載入完成後，執行此回撥函式
  2). 引數為選擇器字串: 查詢所有匹配的標籤, 並將它們封裝成jQuery物件
  3). 引數為DOM物件: 將dom物件封裝成jQuery物件
  4). 引數為html標籤字串 (用得少): 建立標籤物件並封裝成jQuery物件
2. 作為物件使用: $.xxx()
  1). $.each() : 隱式遍歷陣列
  2). $.trim() : 去除兩端的空格
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

  /*
   需求1. 點選按鈕: 顯示按鈕的文字, 顯示一個新的輸入框
   需求2. 遍歷輸出陣列中所有元素值
   需求3. 去掉"  my atguigu  "兩端的空格
   */
  /*需求1. 點選按鈕: 顯示按鈕的文字, 顯示一個新的輸入框*/
  //1). 引數為函式 : 當DOM載入完成後，執行其中的函式     回撥函式
  $(function () {
    //2). 引數為選擇器(selector)字串: 查詢所有匹配的標籤, 並將它們封裝成jQuery物件
    var $btn = $("#btn")
    $btn.click(function () {
      //顯示按鈕的文字
      //this就是發生事件的dom元素物件(也就是button)
      //3). 引數為DOM物件: 將dom物件封裝成jQuery物件
      var text = $(this).html()
      alert(text)
      //顯示一個新的輸入框
      //4). 引數為html標籤字串 (用得少): 建立標籤物件並封裝成jQuery物件
      $('<input type="text" name="msg3" /><br />').appendTo('div')
    })
  })

  /*需求2. 遍歷輸出陣列中所有元素值*/
  var arr = [123, 'atguigu', true]
  // 1). $.each() : 隱式遍歷陣列
  $.each(arr, function (index, item) {
    console.log('第' + (index + 1) + '個元素的值為' + item)
  })

  /*需求3. 去掉"  my atguigu  "兩端的空格*/
  var str = "  my atguigu  "
  // 2). $.trim() : 去除兩端的空格
  console.log(str.trim() === 'my atguigu')  //true
  console.log($.trim(str) === 'my atguigu') //true

</script>
</body>

</html>

 

相關文章