1.jQuery 的两大特点

  • 链式编程：比如.show()和.html()可以连写成.show().html()。
    链式编程原理：return this。
    通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
  • 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

2.引入 jQuery 的原因

在用 js 写代码时，会遇到一些问题,jQuery的出现，可以解决以下问题。

  • window.onload 事件有事件覆盖的问题，因此只能写一个事件。
  • 代码容错性差。
  • 浏览器兼容性问题。
  • 书写很繁琐，代码量多。
  • 代码很乱，各个页面到处都是。
  • 动画效果很难实现。

3.jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

  • Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
  • jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

  • Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
  • jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

4.js中的DOM对象 和 jQuery对象 比较，有何不同

通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：

针对下面这样一个div结构：

<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>

通过原生 js 获取这些元素节点的方式是：

var myBox = document.getElementById("box");           //通过 id 获取单个元素
    var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是数组
    var divArr = document.getElementsByTagName("div");    //通过标签获取的是数组

通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

//获取的是数组，里面包含着原生 JS 中的DOM对象。
    var jqBox1 = $("#box");
    var jqBox2 = $(".box");
    var jqBox3 = $("div");

5.jQuery的选择器

  • 基本选择器
  • 层级选择器
  • 过滤选择器
  • 属性选择器
  • 筛选选择器

6.jQuery的动画

显示与隐藏动画

  • $(selector).show(time,callback) 显示动画
  • $(selector).hide(time,callback) 隐藏动画
  • $(selector).toggle(time,callback) 切换动画

划入与滑出动画

  • $(selector).slideDown(time,callback) 滑入
  • $(selector).slideUp(speed, callback) 滑出
  • $(selector).slideToggle(speed, callback) 滑出滑出切换

淡入淡出动画

  • $(selector).fadeIn(speed, callback) 淡入动画
  • $(selector).fadeOut(speed, callback) 淡出动画
  • $(selector).fadeToggle(speed, callback) 淡入淡出切换动画

jQuery的事件机制

常见的事件绑定

  • click(handler) 单击事件。
  • blur(handler) 失去焦点事件。
  • mouseenter(handler) 鼠标进入事件。
  • mouseleave(handler) 鼠标离开事件。
  • dbclick(handler) 双击事件。
  • change(handler) 改变事件，如：文本框值改变，下拉列表值改变等。
  • focus(handler) 获得焦点事件。
  • keydown(handler) 键盘按下事件。

参考链接：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

on方式绑定事件

最早采用的是 bind、delegate等方式绑定的。jQuery 1.7版本后，jQuery用on统一了所有的事件处理的方法，此方法兼容zepto(移动端类似于jQuery的一个库)。

格式举例：

$(document).on("click mouseenter", ".box", {"name": 111}, function (event) {
            console.log(event.data);      //event.data获取的就是第三个参数这个json。
            console.log(event.data.name); //event.data.name获取的是name的值。
        });

参数解释：

  • 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）。上方代码绑定的是单击事件和鼠标进入事件。
  • 第二个参数：selector, 执行事件的后代元素。
  • 第三个参数：data，传递给事件处理函数的数据，事件触发的时候通过event.data来使用（也就是说，可以通过event拿到data）
  • 第四个参数：handler，事件处理函数。

简单点的写法：

$(document).on("click",".box", function () {
       alert(1);
    });

off方式解绑事件

$(selector).off();      // 解绑匹配元素的所有事件

    $(selector).off("click");   // 解绑匹配元素的所有click事件

    $(selector).off( "click", "**" );   // 解绑所有代理的click事件，元素本身的事件不会被解绑

jQuery的事件对象

event.data 传递给事件处理程序的额外数据

event.currentTarget 等同于this，当前DOM对象

event.pageX 鼠标相对于文档左部边缘的位置

event.target 触发事件源，不一定===this

event.stopPropagation()； 阻止事件冒泡

event.preventDefault(); 阻止默认行为

event.type 事件类型：click，dbclick…

event.which 鼠标的按键类型：左1 中2 右3

event.keyCode 键盘按键代码