沉淀，再出发：jQuery的初步了解和入门
一、前言
对于后端开发者来说，是不是真的不需要了解前端的开发经过和相关技术，从我个人的角度来说，我觉得如果不了解或者接触很少，极有可能造成开发的时候语言交流的障碍，并且影响自己对整个系统性能的理解，这在程序员的职业生涯之中是非常不利的，因为再向上层发展就涉及到了从整个系统架构的角度来分析性能和技术的取舍了，在这个层面上，必须要有全栈开发的能力，这样才能担当重任。但是现在的开发通过json等手段，在某种程度上将前后端僵硬的分割开来，其实是对于我们理解整个系统和提升性能非常不利的。因此，我们有必要了解前端的相关知识，并且能够理解其中的本质，这样当我们分析用户使用UI来访问服务器以及数据库的整个数据传输和处理的过程是非常有利的。那么在前端的开发之中，无外乎是使用三剑客（HTML+CSS+JS）再配合上一些其他的先进技术，比如ajax,bootstrap，jQuery等额外的‘插件’和性能提升工具，使得在开发层面、运行层面都能达到一定的灵活性、稳定性和效率。那么这次我们就来看看jQuery的本质吧。
二、jQuery本质
了解一件事物，第一件事情就是理解其本质，如果不能达到这种程度，那么永远都理解不了也使用不好。其实jQuery的本质就是一个JavaScript的类库，设计的最初设想就是简化JavaScript每次启动和事件响应，数据绑定，选择器等最常用的功能，将这些东西封装起来，使得变量在jQuery和DOM之间不断地转换，从而完成链式编程，隐式迭代等功能，使得前端的开发更加的便捷和可靠。那么从这个角度来理解，我们也可以完全开发出这样的一个JavaScript库，并且自己使用了，从本质上来说是完全一样的。
既然是这样就会有版本，相对于1.1.xxx 版本来说，2.2.xxx 版本不再支持IE6、7、8的兼容性了。同样的也会有压缩版和非压缩版的区别，这在很多库里面都是常见的，其中命名标记中带min的是压缩版的，打开之后发现各种对齐都没有，这个是在我们部署的时候使用的，同样的还有一个非压缩版，便于我们开发的时候调试使用。
同样的相比于jQuery来说，JavaScript的缺点有：
1.window.onload 事件有个事件覆盖的问题，我们只能写一个
2.代码容错性差
3.浏览器兼容性问题
4.书写很繁琐，代码量多
5.代码很乱，各个页面到处都是
6.动画效果，我们很难实现
2.1、使用jQuery
a、引包：要把我们的jQuery源文件拿到我们的项目里面来，在我们的页面中引用jQuery文件
<script src="jquery-1.11.1.min.js"></script>
b、入口函数
<script>
// 1. 入口函数的方式
$(document).ready(function () {
$("#demo").click(function () {
$("div").show(1000).html("我是内容");
});
});
// 2.简化版
$(function () {
});
</script>
c、事件处理程序
1.事件源 Js方式：document.getElementById(“id”) jQuery方式：$(“#id”) 2.事件 Js方式 :document.getElementById(“id”).onclick jQuery方式: $(“#id”).click 区别：jQuery的事件不带on 3.事件处理程序 Js 书写方式: document.getElementById(“id”).onclick = function(){ // 语句 } jQuery 书写方式: $(“#id”).click(function(){ // 语句 });
2.2、jQuery的一些注意事项
$问题 a)Js命名归法：下划线、字母、$、数字 b)但是不能以数字作为开头 var $ = “我是$符号”; jQuery的两个变量：$ 和 jQuery jQuery占用了我们两个变量：$ 和 jQuery js入口函数跟jQuery入口函数的区别： 1.Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行 2.jQuery的入口函数 是在 html所有标签都加载之后，就回去执行。 Js创建对象 三种方式： 1.var obj = {}; 2.var obj1 = new Object(); 3.var obj2 = Object.create(); 1跟2的区别：推荐使用第一个方式，第二种方式存在效率问题，因为要new对象，会涉及到原型查找的问题
2.3、jQuery基本选择器
规律：$(selector).css(“background”,”red”);
2.4、mouseover事件跟mouseenter事件的区别
mouseover/mouseout事件，鼠标经过的时候会触发多次，每遇到一个子元素就会触发一次。
mouseenter/mouseleave事件，鼠标经过的时候只会触发一次。
2.5、DOM对象跟jQuery对象相互转换
jQuery对象转换成DOM对象:
方式一：$(“#btn”)[0]
方式二：$(“#btn”).get(0)
DOM对象转换成jQuery对象：
$(document) -> 把DOM对象转成了jQuery对象
var btn = document.getElementById(“btn”);
btn -> $(btn);
2.6、其他注意事项
动画：show、hide、fadeIn、fadeOut、fadeTo、slideDown、slideUp、slideToggle、animate DOM操作：.css()、addClass(“className”)、removeClass()、toggleClass()、 .attr()、removeAttr()、
.val()、.html(“<p></p>”)、text()、node.append(“<p>我是追加的内容</p>”)、prePend() 元素操作： 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别：返回值不同，.height()方法返回的是 数字类型(20)，
.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候 坐标值： $(“div”).offset(); // 获取或设置坐标值 设置值后变成相对定位 $(“div”).position(); // 获取坐标值 子绝父相 只能读取不能设置 滚动条（滚动事件）： $(“div”).scrollTop(); // 相对于滚动条顶部的偏移 $(“div”).scrolllLeft(); // 相对于滚动条左部的偏移 jQuery事件： 绑定 click/mouseenter/blur/keyup // 绑定事件 bind：$node.bind(“click”,function(){}); // 触发一次 one : $node.one(“click”,function(){}); delegate : $node.delegate(“p”,”click”,function(){}); on： $node.on(“click”,”p”,function(){}); 解绑 unbind、undelegate、off 触发 click: $(“div”).click(); trigger：触发事件，并且触发浏览器默认行为 triggerHandler：不触发浏览器默认行为 jQuery事件对象介绍 event.stopPropagation() //阻止事件冒泡 event.preventDefault(); //阻止默认行为
三、案例分析
mouseenter跟mouseover事件的区别：
<html> <head> <meta charset="UTF-8"> <script src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> x=0; y=0; $(document).ready(function(){ $("div.over").mouseover(function(){ $(".over span").text(x+=1); }); $("div.enter").mouseenter(function(){ $(".enter span").text(y+=1); }); }); </script> </head> <body> <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p> <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p> <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left"> <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2> </div> <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right"> <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2> </div> </body> </html>