jQuery

 

 

     匿名函数自调用

(function( window, undefined ) {


    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$,
    
// Define a local copy of jQuery
    jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    },

})( window );

 

获取输入框的值：

用户名: <input type="text" id="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>

1、原生js代码：

<!--使用原生DOM-->
  <script type="text/javascript">
    window.onload = function () {
      var btn1 = document.getElementById('btn1')
      btn1.onclick = function () {
        var username = document.getElementById('username').value
        alert(username)
      }
    }
  </script>

2、jQuery实现：

<!--使用jQuery实现-->
    <!--本引入-->
  <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <!--远程引入-->
  <!--<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>-->
  <script type="text/javascript">
    //绑定文档加载完成的监听
    jQuery(function () {
      var $btn2 = $('#btn2')
      $btn2.click(function () { // 给btn2绑定点击监听
        var username = $('#username').val()
        alert(username)
      })
    })
  </script>

 

jQuery核心函数: $/jQuery
　　jQuery库向外直接暴露的就是$/jQuery
　　　　当函数用: $(xxx)，当对象用: $.xxx()

//1.  jQuery函数: 直接可用
  console.log($, typeof $)
  console.log(jQuery===$) // true

jQuery核心对象: 执行$()返回的对象
　　得到jQuery对象: 执行jQuery函数返回的就是jQuery对象

console.log($() instanceof Object) // true

 

 

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

　　1). 参数为函数 : 当DOM加载完成后，执行此回调函数

//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). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象

　　3). 参数为DOM对象: 将dom对象封装成jQuery对象

　　4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象

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

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

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

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

 

jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
　　

基本行为

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

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

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

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

 //需求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

 

$的工具方法：

　　1、$.each(): 遍历数组或对象中的数据

/1. $.each(): 遍历数组或对象中的数据
  var obj = {
    name: 'Tom',
    setName: function (name) {
      this.name = name
    }
  }
  $.each(obj, function (key, value) {
    console.log(key, value)
  })

 2、$.trim(): 去除字符串两边的空格

 3、$.type(obj): 得到数据的类型

//3. $.type(obj): 得到数据的类型
  console.log($.type($)) // 'function'

 4、$.isArray(obj): 判断是否是数组

//4. $.isArray(obj): 判断是否是数组
  console.log($.isArray($('body')), $.isArray([])) // false true

 5、$.isFunction(obj): 判断是否是函数

//5. $.isFunction(obj): 判断是否是函数
  console.log($.isFunction($)) // true

 6、$.parseJSON(json) : 解析json字符串转换为js对象/数组

//6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
  var json = '{"name":"Tom", "age":12}'  // json对象: {}

  // json对象===>JS对象
  console.log($.parseJSON(json))
  json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []
 
 // json数组===>JS数组
  console.log($.parseJSON(json))

JSON.parse(jsonString)   //json字符串--->js对象/数组

JSON.stringify(jsObj/jsArr)  //js对象/数组--->json字符串