jQuery的两把利器

1 jQuery核心函数

* 简称: jQuery函数($/jQuery)

* jQuery库向外直接暴露的就是$/jQuery

* 引入jQuery库后, 直接使用$即可

* 当函数用: $(xxx)

* 当对象用: $.xxx()

1.1理解

即: $ 或 jQuery

jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用, 且传递的参数类型不同/格式不同功能就完全不同，也可作为对象调用其定义好的方法, 此时$就是一个工具对象。

1.2作为一般函数调用: $(param)

1)参数为函数：当DOM加载完成后，执行此回调函数。例：$(fun)

2)参数为选择器（(selector)）字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象。例：$("#div1")

3)参数为DOM对象: 将dom对象封装成jQuery对象。例：$(div1Ele)

4)参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象。例：$("<div>")

1.3作为对象使用: $.xxx()

1) 发送ajax请求的方法：

$.ajax()、 $.get()、$.post()···

2）其他工具方法：

$.each() : 隐式遍历数组

$.trim() : 去除两端的空格

$.parseJSON()

···

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
  <script type="text/javascript">
  /*
   需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
   需求2. 遍历输出数组中所有元素值
   需求3. 去掉"  my atguigu  "两端的空格
   */
  /*需求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)
  })

需求3. 去掉"  my atguigu  "两端的空格
  // 2). $.trim() : 去除两端的空格
  var str = ' my atguigu  '
  // console.log('---'+str.trim()+'---')
  console.log('---'+$.trim(str)+'---')
  </script>

2jQuery核心对象

* 简称: jQuery对象

* 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象

* 使用jQuery对象: $obj.xxx()

2.1理解

即执行jQuery核心函数返回的对象，jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法, 让程序员能方便的操作dom

2.2.属性/方法

1）基本行为

* size()/length: 包含的DOM元素个数

* [index]/get(index): 得到对应位置的DOM元素

* each(): 遍历包含的所有DOM元素

* index(): 得到在所在兄弟元素中的下标

2）属性：操作内部标签的属性或值

3）CSS：操作标签的样式

4）文档：对标签进行增删改操作

5）筛选：根据指定的规则过滤内部的标签

6）事件：处理事件监听相关

7）效果：实现一些动画效果

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
  <script type="text/javascript">
  /*
   需求:
   需求1. 统计一共有多少个按钮
   需求2. 取出第2个button的文本
   需求3. 输出所有button标签的文本
   需求4. 输出'测试三'按钮是所有按钮中的第几个
   */
  //需求1. 统计一共有多少个按钮
  var $buttons = $('button')
  /*size()/length: 包含的DOM元素个数*/
  console.log($buttons.size(), $buttons.length)
  //需求2. 取出第2个button的文本
  /*[index]/get(index): 得到对应位置的DOM元素*/
  console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)
  //需求3. 输出所有button标签的文本
  /*each(): 遍历包含的所有DOM元素*/
  /*$buttons.each(function (index, domEle) {
    console.log(index, domEle.innerHTML, this)
  })*/
  $buttons.each(function () {
    console.log(this.innerHTML)
  })
  //需求4. 输出'测试三'按钮是所有按钮中的第几个
  /*index(): 得到在所在兄弟元素中的下标*/
  console.log($('#btn3').index())  //2

  /*
  1. 伪数组
    * 伪数组的类型： Object对象
    * 两个特别的属性：length属性
                     数值下标属性
    * 没有数组特别的方法: forEach(), push(), pop(), splice()
   */
  console.log($buttons instanceof Array) // false
  // 自定义一个伪数组
  var weiArr = {}
  weiArr.length = 0
  weiArr[0] = 'atguigu'
  weiArr.length = 1
  weiArr[1] = 123
  weiArr.length = 2
  for (var i = 0; i < weiArr.length; i++) {
    var obj = weiArr[i]
    console.log(i, obj)
  }
  console.log(weiArr.forEach, $buttons.forEach) //undefined, undefined
  </script>