从零学前端第十讲：jQuery入门与使用
作者：互联网
jQuery入门与使用
主讲人介绍
沁修，葡萄藤技术总监
项目经验丰富，擅长H5移动项目开发。
专注技术选型、底层开发、最佳代码实践规范总结与推广。
直播录屏版
传送门：https://v.qq.com/x/page/n07491mn7tw.html
课程大纲
认识jQuery
写段简单的jQuery代码？
jQuery选择器
jQuery更改页面结构
4.1 创建和插入
4.2 删除
4.3 样式操作
4.4 设置文本内容
事件
5.1 文档加载事件
5.2 鼠标事件
5.3 事件对象
5.4 事件绑定
文字解析版:
1.认识jQuery
原生javascript我们已经学了几节课了，相信大家已经能够使用它来完成任务写一些有趣的东西了，在这个过程当中，会发现经常要遵循一种模式：
选择一个元素或一组元素，然后以某种方式对其进行操作。比如显示或隐藏，增加个CSS类，让某个元素活动起来等等。
以前的原生的JS去完成这些任务，都需要数十行的代码。
而为了简化这些操作，诞生了不少非常优秀的库，jQuery就是其中的佼佼者，凭借其简介的语法和强大的兼容性，极大地简化了开发人员遍历文档，操作DOM，处理事件，执行动画等操作。这些优点吸引了大量的JS开发者去学习研究它。
而时至今日，JS已经发布了好几个新版本，浏览器逐渐趋于标准化，又有著名的三大框架angluar、react、vue为前端撑场子，有人可能会发出疑问就是：
jQuery还有学习的必要吗？
答案是肯定的。
因为jQuery其实依旧是非常主流的一个库，市面上大量的插件都是基于jQuery的。
jQuery写的DOM操作代码非常非常的好，无论是使用的便捷上还是兼容性上都堪称完美。
而且它的学习成本非常低，如果熟练JS的话，学jQuery也就是一天两天的事儿，几乎没有学习成本。
最重要的是，jQuery除了它本身的这些使用优点外，也是一本极好的教材，风靡了那么多年后，早就被锤炼得滴水不漏了，因此能看看它的代码学习一下它的实现方式和设计原理，对于修炼自己的内功还是极有意义的。
总之，这节课我们就先来看看jquery的使用方法。
2.写段简单的jQuery代码？
首先登陆官网下载最新的jQuery库，http://jquery.com
jQuery不需要安装，直接把下载的jquery.js放到文件夹中，通过script标签的src引入就可以了。
接下来看看官网上的brief look，先简要地看一看jquery的使用
第一个，操作DOM和修改文档内容：点击一个button修改html内容
// 通过选择器获取一个button元素节点，并且改变它的html内容
$( “button.continue” ).html( “Next Step…” )
第二个，注册事件：
// #banner-message是个隐藏元素，点击一个#button-container中的button，触发事件，让隐藏元素变成显示状态
var hiddenBox = $( “#banner-message” );
$( “#button-container button” ).on( “click”, function( event ) {
hiddenBox.show();
});
第三个，Ajax
// ajax是种不刷新页面的情况下与服务器交换数据的技术，jquery中的$.ajax对这个技术进行了封装，变得简单易操作起来
$.ajax({
url: “/api/getWeather”,
data: {
zipcode: 97201
},
success: function( result ) {
$( “#weather-temp” ).html( “” + result + " degrees" );
}
});
然后我们来试一下在自己本地写一段代码试试：
其中符号就是jQuery的一个简写形式，而(document).ready()这段代码的作用和window.onload的作用是类似的
不过不同的是，window.onload不能同时编写多个而$(document).ready()则没有这个限制：
// 以下的代码无法正确执行
window.onload = function() {
alert(1);
};
window.onload = function() {
alert(2);
};
// 以下的代码则没有任何问题
$(document).ready(function() {
alert(1);
});
$(document).ready(function() {
alert(2);
});
另外(document).ready(function())可以简写为(function() { })。关于$(document).ready()的更详细的说明我们后面会提到，目前先知道这些就好。
3.jQuery选择器
写JS的大多数时候我们要做的第一件事就是选择将被操作的页面元素，直接使用原生JS会比较麻烦，而jQuery提供了非常健壮的选择器，让我们可以轻松的选择几乎任何元素集合。
实际上jQuery使用了我们已经熟练使用的css语法，并且扩展了一下，那我们就来看一下最常用的选择器。
选择器
使用
标签选择器
$(“p")
类选择器
$(“.intro")
id选择器
$(“#intro")
可以看出来和css选择器的用法几乎一样，更多的使用方式建议去看jQuery的官方文档：https://api.jquery.com/category/selectors/
不过需要注意的是，原生JS选择的结果是DOM对象：
var dom = document.getElementById(“id”); // 这里获得是是一个DOM对象，它可以直接使用JS中的方法
dom.innerHTML = “hello”;
jQuery选择器选出的结果是一个jQuery对象，是一个通过jQuery包装DOM对象后产生的对象，只能使用jQuery里的方法：
var $dom = $(“#id”);
$dom.html(“hello”);
切记，这二者并不等价，但是可以相互转换：
// DOM对象转成jQuery对象非常简单，用$()包裹起来就可以
var dom = document.getElementById(“id”);
var $dom = $(dom);
// jQuery对象转成DOM对象也很简单,jQuery对象是个类似数组的对象，可以通过[]下标的方法得到相应的DOM元素
var $dom = $(“#id”);
var dom = $dom[0];
总体来讲jQuery的优势非常大：
1.写法非常简洁，选择任意元素都是用$()来包裹。
2.处理机制很完善，如果取的是页面中没有的元素，JS会报错，而jQuery就不会有任何报错。
4.jQuery更改页面结构
前面讲到如何使用选择器之后，我们已经能在页面上自如的选择DOM了，接下来要做的就是改变DOM树的结构。
比如我们有这样一个页面：
logo
4.1 创建和插入
我们试着进行如下操作：
1.查找列表的第二个并打印出它的文本内容
2.创建1个li节点
3.把创建的li节点作为ul的子节点
// 1
var $li = $(“ul li:eq(1)”);
alert($li.text());
// 2
var $li1 = $(“
”);// 3
(“ul”).append(li1);
但这样插入的节点是一个空节点，其中并没有任何内容，我们还缺少文本节点，属性节点：
var $li1 = $(“<li title=’a new one’>a new li is here!”);
(“ul”).append(li1);
事实上想要将新创建的节点插入文档中的方法不止一种，而且比原生JS要全面要方便得多：
方法
描述
append()
向元素内部的尾部追加内容
appendTo()
颠倒append的操作，将内容追加到元素中
prepend()
向元素内部的前部追加内容
prependTo()
颠倒prepend的操作，将内容追加到元素中
after()
在元素之后追加内容
insertAfter()
颠倒after的操作
before()
在元素之前追加内容
insertBefore()
颠倒before的操作
4.2 删除
那如果li节点太多，我们需要删除掉其中一些，不用担心jQuery提供了3种方法：remove(), detach(), empty()。
他们的使用方法都差不多，但有一些些微的区别，比如同样是获取第一个li节点，从网页中删除这个操作：
// 这样删除后节点后的所有后代节点将被同时删除，返回值是被删除节点的引用，之后还可以再使用这个元素。
var $li = $(“ul li:eq(0)“).remove();
$li.appendTo(“ul”);
// 这个方法也是从DOM中去掉所有匹配的元素，但它所绑定的事件会保留下来
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction() {alert((this).html())});
var $li = $(“ul li:eq(0)“).detach();
$li.appendTo(“ul”);
// 这个方法严格来说叫做清空节点，能清空元素中的所有后代
$(“ul li:eq(0)“).empty();
4.3 样式操作
1.设置class属性
// 获取class属性
var liClass = $(“li”).attr(“class”);
// 设置class属性
$(“li”).attr(“class”, “hightlight");
2.追加class
$(“li”).addClass(“underline”);
3.移除class
$(“li”).removeClass(“underline”); // 移除一个样式类
$(“li”).removeClass(“underline”).removeClass(“hightlight”); // 移除两次样式类
$(“li”).removeClass(“underline hightlight”); // 两个样式类一起移除
$(“li”).removeClass(); // 移除所有样式
虽然修改元素的class可以让我们从样式表中选择一组预定好的样式加以应用，但有时候我们却想直接应用一点样式覆盖样式表，那么我们还有这个选择css()方法，它和attr()方法类似，第一个参数是属性，第二个参数是它的值：
$(“li”).css(“width”, “500px”);
// 甚至还可以使用一个函数的返回值
$(“li”).css(“width”, function() {
return $(this).width() + 20 + “px”;
});
4.4 设置文本内容
1.html方法
这个方法类似于JS的innerHTML属性，可以用来读取或者是设置元素中的html内容
$(“li”).html(“born jet”);
2.text方法
这个方法类似于JS中的innerText属性
$(“li”).text(“born jet”);
3.val方法
这个方法类似于value属性，用于返回文本框、下拉列表、单选框的值
$(“#user”).focus(function() {
if ($(this).val() == “”) {
alert(“请输入用户名”);
}
})
5.事件
5.1 文档加载事件
ready事件是事件模块中最重要的一个函数，极大的提高了网页的相应速度。
之前有说过这个方法，它是window.onload的替代方法，但是它又有所不同，window.onload是在文档完全加载完毕后才执行的，而ready是在DOM树建立好后就会执行。
比如说有一个页面有大量图片，ready只需要建立好图片的节点而无需完全加载好外部的图片内容就可以开始执行，大大提高了相应速度。这个方法有一个参数，就是在DOM就绪时执行的函数。
$(document).ready(function(){
// 在这里写你的代码…
});
5.2 鼠标事件
交互操作中，最简单直接的操作就是鼠标去点击操作，jQuery提供了click方法监听用户的单击操作，使用上非常简单：
// e.click(handler)绑定e元素，每次这个元素触发点击操作时会执行回调handler函数
$(“#e”).click(function() {
alert(“blablabla”);
})
// $e.click([eventData], handler) 这个方法和上面差不多，不过多一个可选参数，可以接受一些数据，可以传递下去
$(“#e”).click(“some datas”, function(e) {
alert(e.data); // some datas
})
和这个事件类似的还有mousedown和mouseup事件，他们可以监听用户鼠标按下的操作和弹起的操作，一个强调是按下触发，一个强调的是松手触发。
但不同的是，click事件是由mousedown和mouseup两个动作构成，所以点击的动作是在松手后才触发。
还有一些mouseover, mouseout, mousemove, hover, focusin等等鼠标事件，虽然是靠不同的鼠标动作触发，但使用方法和click其实都是差不多的。
以及键盘事件keydown, keyup等也是差不多的，不用赘述。建议大家在需要的时候自行查阅官方文档即可。
5.3 事件对象
事件对象是什么呢？就是在jQuery事件的回调方法中获取到的事件对象。
$(“#ele”).click(function(event) {
// event 事件对象
});
它有什么用呢？可以举一个简单的栗子来看看：
。。。
假设这里还有成千上万个li，如果我要相应每一个li的事件，之前讲JS的冒泡和捕获的时候就讲过，常规方法是给每一个li绑定一个事件监听，但这样太繁琐了而且效率太低。
那这里因为li都有一个共同的父元素，而且事件一致，那么就有一个技巧来处理。就是将事件绑定在父元素设上，由于冒泡的特性，就可以在触发li的时候把这个事件往上冒泡到ul上，然后触发ul上绑定的事件，这也是常说的事件委托。
到这里为止，看起来很完美，但唯一的问题是，怎么才知道那个li元素触发了事件呢？这就要提到事件对象，事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问。那既然如此，我们就可以从event中找到答案。
event.target，代表当前触发事件的元素，可以确定事件是不是冒泡触发的。
$(“body”).click(function(e){
console.log(e.target, this);
})
可以看到this和target是不一样的，事件触发后会向上冒泡，this就指向绑定事件的那个元素，而target会找到直接触发事件的目标元素。
event还有许多的属性和方法，但常用就那么几个：
event.type, 获取事件的类型
event.pageX event.pageY，获取鼠标当前相对于页面的坐标
event.preventDefault()方法，阻止默认的行为，这个方法用得很多，比如执行这个方法再点击一个连接后，就不会跳转到新的url上
event.which，获取鼠标在单击时用的是哪个键
event.currentTarget，冒泡后的那个元素，等同于this
5.4 事件绑定
之前说到的鼠标事件有个特点，就是字节给元素绑定一个函数，这类事件都属于快捷处理。
如果翻看源码其实可以看到，所有的这些快捷事件在底层的处理都是通过一个On方法来实现的，on()方法也是官方推荐的绑定事件方法。
最常见的点击事件是这样 ：
$(“li”).on(“click”, function() {});
但很显然它的功能不止于此
它还可以多个事件绑定一个函数，通过空格分离不同事件名：
$(“li”).on(“click keydown”, function() {});
还有委托机制：.on( events ,[ selector ] ,[ data ], handler(eventObject) )
这里可以看到第二个参数提供了一个selector选择器，那么和前面讲到的事件对象类似，可以将事件绑定在最上层的div，当用户触发事件的时候，事件往上冒泡，遇到这个selector就会触发回调函数：
$(“body”).on(‘click’, ‘li’, function(e){
console.log(e.target, this);
})
这样绑定事件，可以减少绑定事件的次数，提高效率和性能，还能解决动态添加的元素不能触发事件的bug，一举多得。
以上就是上节课的文字解析啦
下节课的内容是【Ajax异步通信】，一种无需重载整个网页就能更新部分网页的技术，极大程度提升了网站的用户体验，减轻服务器压力
课程大纲：
1、HTTP协议
2、XMLHttpRequest
3、JSON
4、跨域
标签：jQuery,function,零学,第十,元素,li,事件,click 来源： https://blog.csdn.net/jnshu_it/article/details/90474210