WEB前端jQuery—初识jQuery

原生js的缺点

• 代码比较麻烦，需要遍历，可能还需要嵌套。
• 查找元素的方法太少，找对象麻烦，方法少，还长。
• 如果想要实现简单的动画效果，封装animate很麻烦。
• js注册事件，会被覆盖，不想覆盖必须写addEventListener
• 如果脚本写在上边，需要写在window.onload里面。
• 遍历伪数组很麻烦，通常要嵌套一大堆的for循环
• 有兼容性问题。

什么是jQuery

• jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
• JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已
• 优点：
  • 查找元素的方法多种多样，非常灵活
  • 拥有隐式迭代特性，因此不再需要手写for循环了。
  • 完全没有兼容性问题。
  • 实现动画非常简单，而且功能更加的强大。
  • 代码简单、粗暴。
• 目前jQuery有三个大版本：
  • 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
  • 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
  • 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。 目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
• 三种环境：
  1. 开发环境:开发者写代码的(平常我们用的) -> 未压缩版
  2. 测试环境:对测试开放。
  3. 生产环境:对用户开放 -> 压缩版。
• jquery-xxx.js 与 jquery-xxx.min.js区别：
  • jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
  • jquery-xxx.min.js：生产(压缩)版本。程序中使用，去除了注释、换行、空格。体积小一些，程序加载更快

使用步骤

0. 引入jQuery文件：<script src="jquery-1.12.4.js"></script>
1. 写入口函数:$(function(){});
2. 功能实现

js和jq对比

	JavaScript	JQuery
入口函数	只能有一个，如果有多个，后面的会覆盖前面	可以有多个，并且不会发生覆盖的情况
代码兼容性	代码容错性差，代码出现错误，会影响到后面代码的运行。	代码容错性好，屏蔽错误，并且不会影响后面代码的运行。
浏览器兼容性	兼容性差，比如火狐不支持innerText	对浏览器兼容性做了封装，因此不存在兼容性问题
操作复杂性	DOM操作复杂，对于一些简单的动画效果，实现起来比较麻烦	DOM操作简单，支持隐式迭代，实现动画非常简单。

入口函数

语法:

// 第0种写法
$(document).ready(function() {
});
// 第1种写法(推荐)
$(function() {
});

jQuery入口函数与js入口函数的对比:

• JS的入口函数window.onload要等到页面中所有资源(图片、文件)加载完成才开始执行。
• jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
• 它们都等文档加载完成执行，但js的入口函数执行要比jQuery的入口函数执行得晚一些。

jq对象与DOM对象

• DOM对象(js对象)：使用JavaScript中的方法获取页面中的元素返回的对象。
• jq对象:使用jquery的方法获取页面中的元素返回的对象。一般对象前边加一个$

• 区别: js对象对象不能调用jq对象的方法，jq对象也不能调用js对象。

• 联系: jq对象其实就是js对象的一个集合(伪数组)，里面存放了一大堆的js对象。

• 转换:

  • DOM对象 -> jq对象: $()
  • jq对象 -> DOM对象: $li[0]或$li.get(0)

$的实质

一个函数

• 用途: 参数不同,功能不同,
  • 参数是一个function: 入口函数。
  • 参数是一个dom对象:把dom对象转换成jq对象。
  • 参数是一个字符串:css选择器找对象。

遍历

1. js的遍历方式

   • for(初始化值;循环结束条件;步长)

2. jq的遍历方式

   • jq对象.each(callback)，主要是回调函数的使用：

     • 语法：jq对象.each(function(i,ele){});
       • i:元素在集合中的索引
       • ele：集合中的每一个元素DOM对象，也可在方法中用this代替，要转换成jq对象可使用$(ele)或$(this)
     • callback如果有返回值：
       • return true: 结束本次循环，继续下次循环，相当于与continue
       • return false: 结束循环，相当于break。

   • $.each(obj,[callback])：和上一种方式基本类似

     // 以下两种遍历方式等效
     $citys.each(function(i,ele));
     $.each($citys,function(i,ele){});
     

   • for(元素对象 of 容器对象): jquery 3.0版本之后提供的方式

其他问题

$()和onload区别

都是入口函数,即DOM文档加载完之后才会执行

• window.onload只能定义一次,如果定义多次，后边的会将前边的覆盖掉
• $(function());可以定义多次

传参方法

<script src="jquery-3.3.1.min.js"></script>
<script>
    // 想让标签执行点击事件并传参，使用jQuery时不要写在入口函数$(function{})中
    function func(obj){
        $('#title').text('点击了div');
    }
</script>
<div onclick="func(this)"></div>
<h1 id="title"></h1>

无需遍历

• js:

  // 要想将所有div标签的html变为"shuang"
  var divs = document.getElementsByTagName("div");
  for(var i=0;i<divs.length;i++){
      divs[i].innerHtml = "shuang";
  }
  

• jQuery:

  // 要想将所有div标签的html变为"shuang"
  $("div").html("shuang");		// 即使是集合,也不用遍历
  

链式编程

在jQuery中，很多方法可以一直调用下去。

• 本质: 调用方法不断返回jq对象。

• 例子:$(this).slideDown(20).parent().siblings().children("div").slideUp(20);

index方法

返回当前元素在所有兄弟元素里面的索引

$("li").click(function () {
    console.log($(this).index());	//点击哪个打印哪个在兄弟元素的索引。
});