jQuery核心函数

<!--
1. 作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后，执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. 作为对象使用: $.xxx() 可以叫做工具方法
1). $.each() : 隐式遍历数组
2). $.trim() : 去除两端的空格
-->

<script type="text/javascript" src="../../js/jquery-1.10.1.js"></script>
<script type="text/javascript">
  /*
   需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
   需求2. 遍历输出数组中所有元素值
   需求3. 去掉"  my atguigu  "两端的空格
   */
  $(function(){//绑定文档加载完成的监听
      $("#btn").click(function(){
          alert($(this).html())
          $('<input type="text" name="msg3"/><br/>').appendTo("div");
      });
      var arr = [2,4,8];
      $.each(arr, function(index,value) {
          console.log("index="+index+", value="+value);
          
      });
      var str = " rainbow cai";
      
      console.log($.trim(str))
      
  })
  
  
    /*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
  //1.1). 参数为函数 : 当DOM加载完成后，执行此回调函数
  $(function () { // 绑定文档加载完成的监听
    // 1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
    $('#btn').click(function () { // 绑定点击事件监听
      // this是什么? 发生事件的dom元素(<button>)
      // alert(this.innerHTML)
      // 1.3). 参数为DOM对象: 将dom对象封装成jQuery对象
      alert($(this).html())
      // 1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
      $('<input type="text" name="msg3"/><br/>').appendTo('div')
    })
  })

  /*需求2. 遍历输出数组中所有元素值*/
  var arr = [2, 4, 7]
  // 1). $.each() : 隐式遍历数组
  $.each(arr, function (index, item) {
    console.log(index, item)
  })
  // 2). $.trim() : 去除两端的空格
  var str = ' my atguigu  '
  // console.log('---'+str.trim()+'---')
  console.log('---'+$.trim(str)+'---')
</script>
</body>

</html>