jQuery初识 - jQuery是什么

jQuery

jQuery是什么

• jQuery是一 款优秀的JavaScript库 ,从命名可以看出jQuery最主要的用途是用来做
  查询(jQuery=js+Query) ，正如jQuery官方Logo副标题所说 (write less, do
  more)使用jQuery能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax
  变得更加简单

• 使用原生 js 查找DOM元素

  window.onload = function (event) {
      var div1 = document.getElementsByTagName("div")[0];
      var div2 = document.getElementsByClassName("box1")[0];
      var div3 = document.getElementById("box2");
  }
  

• 使用 jQuery 查找DOM元素

  $(function () {
      var $div1 = $("div");
      var $div2 = $(".box1");
      var $div3 = $("#box2");
  });
  

• 使用原生 js 设置背景颜色

  window.onload = function (event) {
      div1.style.backgroundColor = "red";
      div2.style.backgroundColor = "blue";
      div3.style.backgroundColor = "yellow";
  }
  

• 使用原生 jQuery 设置背景颜色

  $(function () {
      $div1.css({
          backgroundColor: "red",
      });
      $div2.css({
          backgroundColor: "blue",
          width: "200px",
          height: "200px",
      });
      $div3.css({
          backgroundColor: "yellow",
      });
  });
  

jQuery 版本选择问题

• 1.x: 兼容ie678,但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本: 1.12.4 (2016年5月20日).
• 2.x: 不兼容ie678,相对1.x文件较小，訪只做BUG维护，功能不再新增，最终版本: 2.2.4 (2016年5月20日)
• 3.x: 不兼容ie678，只支持最新的浏览器,很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本。

jQuery的使用

<script src="jquery-1.12.4.js"></script>
<script>
    // 1. 原生js的固定写法
    window.onload = function (event) {};
// 2. jQuery的固定写法
$(document).ready(function () {
    console.log("Hello World");
});
</script>

jQuery入口函数和原生js入口函数的区别

• 原生js和jQuery入口函数的加载模式不同

• 原生js会等到DOM元素加载完毕，并且图片也加载完毕才会执行

• jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕才会执行

• 原生的js如果编写了多个入口函数，后面编写的会覆盖前面编写的

• jQuery中编写多个入口函数，后面的不会覆盖前面的

jQuery入口函数的四种写法

// 1. 第一种写法
$(document).ready(function () {
    console.log("hello 1");
});

// 2. 第二种写法
jQuery(document).ready(function () {
    console.log("hello 1");
});

// 3. 第三种写法(推荐)
$(function () {
    console.log("hello 1");
});

// 4. 第四种写法
jQuery(function () {
    console.log("hello 1");
});

jQuery的冲突问题

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

test.js文件内容如下：

var $ = 100;

test.js中的 $ 符号覆盖了jquery-1.12.4中的 $ 符号

这时如果在使用 $ 符号，则会使用test.js中的 $

// 1. 释放 $ 的使用权
// 注意点：释放操作必须在编写其他代码之前编写
//    释放之后就不能再使用 $ ,改为使用 jQuery

//  jQuery.noConflict();

// 2. 自定义一个访问符号

var nj = jQuery.noConflict();

nj(function () {
    console.log("hello");
});

jQuery核心函数

// $(); 就代表调用jQuery的核心函数

// 1. 接收一个函数
$(function () {
    console.log("hello 1");
    // 2. 接收一个字符串
    // 2.1 接收一个字符串选择器
    // 返回一个jQuery对象，对象中保存了我们找到的DOM元素
    var $box1 = $(".box1");
    var $box2 = $("#box2");
    console.log($box1);
    console.log($box2);
    // 2.2 接收一个字符串代码片段
    // 返回一个jQuery对象，对象中保存了创建的DOM元素
    var $p = $("<p>我是段落</p>");
    console.log($p);
    $box1.append($p);
    // 3. 接收一个DOM元素
    // 会被包装成一个jQuery对象返回给我们
    var span = document.getElementsByTagName("span")[0];
    console.log(span);
    var $span = $(span);
    console.log($span);
});

jQuery对象

$(function () {
    /*
     * 1. 什么是jQuery对象
     * jQuery对象是一个类数组对象
     *
     * 2. 什么试试类数组对象？
     * 有0到length-1的属性，并且有length属性
     */
     var $div = $("div");
     console.log($div);

     var arr = [1, 3, 5];
     console.log(arr);
});

静态方法

var arr = [1, 3, 5, 7, 9];
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
/*
        第一个参数：遍历到的元素
        第二个参数：当前遍历到的索引
        注意点：
        原生的forEach方法只能遍历数组，不能遍历类数组对象
      */
//   arr.forEach(function (value, index) {
//     console.log(index, value);
//   });

//   obj.forEach(function (value, index) {
//     console.log(index, value);
//   });

// 1. 利用jQuery的each静态方法遍历数组
/*
        第一个参数：当前遍历到的索引
        第二个参数：遍历到的元素
        注意点：
        jQuery的each方法是可以遍历类数组对象的
      */
//   $.each(arr, function (index, value) {
//     console.log(index, value);
//   });
$.each(obj, function (index, value) {
    console.log(index, value);
});

静态方法map方法

var arr = [1, 3, 5, 7, 9];
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
// 1. 利用原生js的map方法遍历
/*
        第一个参数：当前遍历到的元素
        第二个参数：当前遍历到的索引
        第三个参数：当前被遍历的数组
        注意点：
        和原生的forEach一样，不能遍历的类数组对象
      */
//   arr.map(function (value, index, array) {
//     console.log(index, value, array);
//   });

//   obj.map(function (value, index, array) {
//     console.log(index, value, array);
//   });

/*
        第一个参数：要遍历的数组
        第二参数：每遍历一个元素之后执行的回调函数
        回调函数的参数：
        第一个参数：当前遍历到的元素
        第二个参数：遍历到的索引
        注意点：
        和jQuery中的each静态方法一样，map静态方法也可以遍历类数组对象
      */
//   $.map(arr, function (value, index) {
//     console.log(index, value);
//   });

var res1 = $.map(obj, function (value, index) {
    console.log(index, value);
    return value + index;
});

var res2 = $.each(obj, function (index, value) {
    console.log(index, value);
    return value + index;
});

/*
        jQuery中的each静态方法和map静态方法的区别：
        each静态方法默认的返回值就是，遍历谁就返回谁
        map静态方法默认的返回值是一个空数组

        each静态方法不支持在回调函数中对遍历的数组进行处理
        map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回
      */
console.log(res1, res2);

jQuery中的其他静态方法

/*
 $.trim();
 作用：去除字符串两端的空格
 参数：需要去除空格的字符串
 返回值：去除空格之后的字符串
 */
/*
  var str = "    lnj    ";
  var res = $.trim(str);
  console.log("---" + str + "---");
  console.log("---" + res + "---");
  */
// 真数组
var arr = [1, 3, 5, 7, 9];
// 伪数组
var arrlike = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
// 对象
var obj = { name: "lbj", age: "33" };
// 函数
var fn = function () {};
// window对象
var w = window;

/*
   $.isWindow();
   作用：判断传入的对象时候是window对象
   返回值：true/false
  */
/*
   var res = $.isWindow(w);
   console.log(res);
  */

/*
   $.isArray();
   作用：判断传入的对象时候是真数组
   返回值：true/false
  */

/*
   var res = $.isArray(arr);
   console.log(res);
  */

/*
   $.isFunction();
   作用：判断传入的对象时候是一个函数
   返回值：true/false
   注意点：
   jQuery框架本质上是一个函数
  */
var res = $.isFunction(jQuery);
console.log(res);

静态方法的holdReady方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12-静态方法的holdReady方法</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // $.holdReady(true); 作用：暂停ready执行
      // 代码效果：使得点击按钮后，只执行一次
      $.holdReady(true);
      $(document).ready(function () {
        console.log("ready");
      });
    </script>
  </head>
  <body>
    <button>恢复ready事件</button>
    <script>
      var btn = document.getElementsByTagName("button")[0];
      btn.addEventListener("click", () => {
        $.holdReady(false);
      });
    </script>
  </body>
</html>

jQuery内容选择器

// :empty 作用：找到既没有文本内容也没有子元素的指定元素
// var $div = $("div:empty");
// console.log($div);

// :parent 作用：找到有文本内容或有子元素的指定元素
// var $div = $("div:parent");
// console.log($div);

// :contains(text) 作用：找到包含指定文本内容的指定元素
// var $div = $("div:contains('我是div')");
// console.log($div);

// :has(selector) 作用：找到包含指定子元素的指定元素
var $div = $("div:has('span')");
console.log($div);