学习目标:
复习：
原生js的优缺点：
优点：
? 所有前端框架的基础，类似于Java、C语言的大基础；
缺点：
? 1.不能添加多个入口函数，如果有，则后面会把前面的给覆盖掉；
? 2.原生js的API名字太长，不好记；
? 3.原生js有些属性后者方法，有浏览器兼容问题；
? 4.原生js容错率太低，即前面的代码一旦出错，后续所有代码不再执行；
jQueryJavaScript开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。
把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）
常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个。
jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。
jQuery设计的宗旨是‘Write Less，Do More‘，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的操作，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。 极大地简化了 JavaScript 编程。
jQuery版本有很多，分为1.x 2.x 3.x 1.x版本：能够兼容IE678浏览器 2.x版本：不兼容IE678浏览器 1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。 3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678） 发现：京东、新浪大厂，都有jquery的使用，但是一些大厂还在用，并且发现大厂用的时候，版本比较低，考虑很多客户广泛性。 注意：开发版本和生产版本 https://jquery.com/ https://code.jquery.com/ 国内多数网站还在使用1.x的版本
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SwyqHBD9-1628145022876)(C:\Users\teayear\Desktop\深圳\jquery(1)]\jquery\media\image-20210802093229514.png)
案例：让div显示与设置内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j4k2zQBm-1628145022879)(C:\Users\teayear\Desktop\深圳\jquery(1)]\jquery\media\image-20210802095031470.png)
使用JavaScript开发过程中，有许多不便之处
-查找元素的方法太少，麻烦。 -遍历伪数组很麻烦，通常要嵌套一大堆的for循环。 -有兼容性问题。 -想要实现简单的动画效果，也很麻烦 -代码冗余。
$(document).ready(function () {
$(‘#btn1‘).click(function () {
// 隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。
$(‘div‘).show(200);
});
$(‘#btn2‘).click(function () {
$(‘div‘).text(‘我是内容‘);
});
});
优点总结：
-查找元素的方法多种多样，非常灵活 -拥有隐式迭代特性，因此不再需要手写for循环了。 -完全没有兼容性问题。 -实现动画非常简单，而且功能更加的强大。 -代码简单、粗暴。
jQuery中的顶级对象是jQuery,$是jQuery的简写；
获取jQuery对象 入口函数 高级功能
注意：jQuery中的$和JQuery关键字本身为同一对象；
使用jQuery的三个步骤：
引入jQuery文件;后续所有的库文件都是这样滴Mui/Layui/vue.js。。。 入口函数 功能实现；重点--->又有三个步骤;
关于jQuery的入口函数：
// 第一种写法
$(document).ready(function() {
});
// 第二种写法
$(function() {
});
jQuery入口函数与window.onload的对比
a.window.onload只能有一个，jQuery的入口函数可以是多个； b.执行时机不同,jQuery的效率高于系统默认的入口函数; 1.JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。 2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
jQuery对象和DOM对象的区别
用原生JavaScript获取的DOM对象 通过document.getElementById() 反馈的是元素(DOM对象) 通过document.getElementsByTagName()获取到的是什么？ 伪数组(集合)，集合中的每一个对象是DOM对象
jQuery对象用$()的方式获取的对象 jQuery对象又可以叫做包装集(包装的DOM对象的集合)
jQuery对象不能使用DOM对象的成员，DOM对象不能使用jQuery对象的成员
// DOM对象 var box = document.getElementById(‘box‘); // 错误 box.text(‘hello‘); // 正确 Dom对象.属性=值; box.innerText = ‘hello‘; // jQuery对象，jQuery对象加前缀$，用以区分DOM对象 var $box = $(‘#box‘); // 错误 dom对象; $box.innerText = ‘hello‘; // 正确 $box.text(‘hello‘);
jQuery对象转换成DOM对象：
jQuery对象.get(索引值);
jQuery对象[索引值]
jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式
DOM对象转换成jQuery对象：
$(DOM对象) 只有这一种方法;
// 仅仅演示对象之间的转换，代码不推荐这么写
jQuery(document).ready(function () {
// 获取元素；
var inpArr = document.getElementsByTagName(‘input‘);
// 获取第一个按钮，然后绑定事件；
$(inpArr[0]).click(function () {
// 设置body的背景色
$(‘body‘)[0].style.background = ‘#fff‘;
});
// 获取第二个按钮，然后绑定事件；
$(inpArr[1]).click(function () {
// 设置body的背景色
$(‘body‘).get(0).style.background = ‘#000‘;
});
});
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。（查看jQuery文档）
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(’#id’); | 获取指定ID的元素 |
| 类选择器 | $(’.class’); | 获取同一类class的元素 |
| 标签选择器 | $(‘div’); | 获取同一类标签的所有元素 |
| 并集选择器 | $(‘div,p,li’); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(‘div.redClass’); | 获取class为redClass的div元素 |
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(‘ul > li’); | 使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(‘ul li’); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq（index） | $(‘li:eq(2)’).css(‘color’, ‘red’); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $(‘li:odd’).css(‘color’, ‘red’); | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(‘li:even’).css(‘color’, ‘red’); | 获取到的li元素中，选择索引号为偶数的元素 |
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(‘ul’).children(‘li’) | 相当于$(‘ul-li’),子类选择器 |
| find(selector) | $(‘ul’).find(‘li’); | 相当于$(‘ul li’),后代选择器 |
| siblings(selector) | $(’#first’).siblings(‘li’); | 查找兄弟节点，不包括自己本身。 |
| parent() | $(’#first’).parent(); | 查找父亲 |
| eq(index) | $(‘li’).eq(2); | 相当于$(‘li:eq(2)’),index从0开始 |
| next() | $(‘li’).next() | 找下一个兄弟 |
| first() | $(‘li’).first() | 第一个 |
| last() | $(‘li’).last() | 最后一个 |
| prev() | $(‘li’).prev() | 找上一次兄弟 |
功能：设置或者修改样式，操作的是style属性。
操作单个样式
// name：需要设置的样式名称 // value：对应的样式值 $obj.css(name, value); // 使用案例 $(‘#one‘).css(‘background‘,‘gray‘);// 将背景色修改为灰色
// 参数是一个对象，对象中包含了需要设置的样式名和样式值
$obj.css(obj);
// 使用案例
$(‘#one‘).css({
‘background‘:‘gray‘,
‘width‘:‘400px‘,
‘height‘:‘200px‘
});
// name:需要获取的样式名称 $obj.css(name); // 案例 $(‘div‘).css(‘background-color‘);
注意：获取样式操作只会返回第一个元素对应的样式值。
隐式迭代：
// name：需要添加的样式类名，注意参数不要带点. $obj.addClass(name); // 例子,给所有的div添加one的样式。 $(‘div‘).addClass(‘one‘);
// name:需要移除的样式类名 $obj.removeClass(‘name‘); // 例子，移除div中one的样式类名 $(‘div‘).removeClass(‘one‘);
// name:用于判断的样式类名，返回值为true false $obj.hasClass(name) // 例子，判断第一个div是否有one的样式类 $(‘div‘).hasClass(‘one‘);
// name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。 $obj.toggleClass(name); // 例子 $(‘div‘).toggleClass(‘one‘);
$obj.show([speed], [callback]);
// speed(可选)：动画的执行时间
// 1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
// 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
// 3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
// callback(可选):执行完动画后执行的回调函数
slideDown()/slideUp()/slideToggle();同理
fadeIn()/fadeOut();fadeToggle();同理
CSS3学过；语法格式：animation,transform rotate等结合。
$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性left top width height，带数字（必选）
// speed：执行动画时长（可选）
// easing:执行效果，默认为swing（缓动） 可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）
// stop方法：停止动画效果 stop(stopAll, goToEnd); // 第一个参数：是否清除队列 // 第二个参数：是否跳转到最终效果
// $(htmlStr) // htmlStr：html格式的字符串 $(‘<span-这是一个span元素</span-‘);
append appendTo 在被选元素的结尾插入内容 prepend prependTo 在被选元素的开头插入内容 before 在被选元素之后插入内容 after 在被选元素之前插入内容
$(‘div‘).empty(); // 清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码） $(‘div‘).html(‘‘);// 使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。
$(‘div‘).remove();
// 复制$(selector)所匹配到的元素（深度复制） // cloneNode(true) // 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。 $(selector).clone();
// 第一个参数：需要设置的属性名 // 第二个参数：对应的属性值 $obj.attr(name, value); // 用法举例 $(‘img‘).attr(‘title‘,‘哎哟，不错哦‘); $(‘img‘).attr(‘alt‘,‘哎哟，不错哦‘);
// 参数是一个对象，包含了需要设置的属性名和属性值
$obj.attr(obj)
// 用法举例
$(‘img‘).attr({
title:‘哎哟，不错哦‘,
alt:‘哎哟，不错哦‘,
style:‘opacity:.5‘
});
// 传需要获取的属性名称，返回对应的属性值 $obj.attr(name) // 用法举例 var oTitle = $(‘img‘).attr(‘title‘); alert(oTitle);
// 参数：需要移除的属性名， $obj.removeAttr(name); // 用法举例 $(‘img‘).removeAttr(‘title‘);
// 设置属性 $(‘:checked‘).prop(‘checked‘,true); // 获取属性 $(‘:checked‘).prop(‘checked‘);// 返回true或者false
本质原因：****property**** : 原生JS对对象的属性称之为 property 。
*attribute* ：HTML元素标签上的属性称之为attribute。
使用jQuery操作的元素属性时：布尔值属性：使用prop() ，非布尔值属性：使用attr() 。
总结：
*attribute 与 **property** **同步关系***
非布尔值属性：实时同步。
布尔值属性：
property 永远不会同步至attribute
$obj.val() 获取或者设置表单元素的value属性的值 $obj.html() 对应innerHTML $obj.text() 对应innerText/textContent，处理了浏览器的兼容性
// 带参数表示设置高度 $(‘img‘).height(200); // 不带参数获取高度 $(‘img‘).height();
获取网页的可视区宽高
// 获取可视区宽度 $(window).width(); // 获取可视区高度 $(window).height();
innerWidth()/innerHeight() 方法返回元素的宽度/高度（包括内边距）。 outerWidth()/outerHeight() 方法返回元素的宽度/高度（包括内边距和边框）。 outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度（包括内边距、边框和外边距）。
// 获取页面被卷曲的高度 $(window).scrollTop(); // 获取页面被卷曲的宽度 $(window).scrollLeft();
// 获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
// 获取相对于其最近的有定位的父元素的位置。
$(selector).position();
案例：固定导航栏 [17-固定导航栏.html]
案例：电梯导航 [18-电梯导航.html]
JavaScript中已经学习过了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐)
click(handler) 单击事件 mouseenter(handler) 鼠标进入事件 mouseleave(handler) 鼠标离开事件
缺点：不能同时注册多个事件
// 第一个参数：事件类型
// 第二个参数：事件处理程序
$(‘p‘).bind(‘click mouseenter‘, function(){
// 事件响应方法
});
缺点：不支持动态事件绑定
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(‘.parentBox‘).delegate(‘p‘, ‘click‘, function(){
// 为 .parentBox下面的所有的p标签绑定事件
});
缺点：只能注册委托事件，因此注册时间需要记得方法太多了
on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( ‘click‘, function() {});
on注册事件委托
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on(‘click‘,‘span‘, function() {});
事件委托原理
// 事件委托的原理
var ul = document.querySelector(‘#ul‘);
ul.onclick = function (e) {
// console.log(e.target.tagName);
if (e.target.tagName.toLowerCase() === ‘li‘) {
console.log(e.target);
}
}
on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件） // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。 // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(events[,selector][,data],handler);
$(selector).unbind(); // 解绑所有的事件 $(selector).unbind(‘click‘); // 解绑指定的事件
$( selector ).undelegate(); // 解绑所有的delegate事件 $( selector).undelegate( ‘click‘ ); // 解绑所有的click事件
// 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $(selector).off(‘click‘);
$(selector).click(); // 触发 click事件 $(selector).trigger(‘click‘);
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
// screenX和screenY 对应屏幕最左上角的值 // clientX和clientY 距离页面左上角的位置（忽视滚动条） // pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离） // event.keyCode 按下的键盘代码 // event.data 存储绑定事件时传递的附加数据 // event.stopPropagation() 阻止事件冒泡行为 // event.preventDefault() 阻止浏览器默认行为 // return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
var c = $.noConflict();// 释放$的控制权,并且把$的能力给了c
$.method = fn 静态方法 $.fn.method = fn 实例方法
(function ($) {
$.add = function (a, b) {
return a + b;
}
}(jQuery))
$.add(5, 6);
(function ($) {
// {tabMenu: ‘#aa‘}
$.tab = function (options) {
// 默认参数
var defaults = {
tabMenu: ‘#tab‘,
activeClass: ‘active‘,
tabMain: ‘#tab-main‘,
tabMainSub: ‘.main‘,
selectedClass: ‘selected‘
}
// 把options中的属性，把对应属性的值赋给defaults对应的属性
// defaults.tabMenu = options.tabMenu || defaults.tabMenu;
// for(var key in options) {
// defaults[key] = options[key];
// }
$.extend(defaults, options);
$(defaults.tabMenu).on(‘click‘, ‘li‘, function () {
$(this)
.addClass(defaults.activeClass)
.siblings()
.removeClass(defaults.activeClass);
//
var index = $(this).index();
//
$(defaults.tabMain + ‘ ‘ + defaults.tabMainSub)
.eq(index)
.addClass(defaults.selectedClass)
.siblings()
.removeClass(defaults.selectedClass);
})
}
}(window.jQuery))
(function($) {
// 内部的变量，外部无法访问，防止变量名冲突
var a = 0;
// 给$增加了一个实例方法
$.fn.table = function (header, data) {
var array = [];
array.push(‘<table>‘);
array.push(‘<tr>‘);
// 生成表头
$.each(header, function () {
array.push(‘<th>‘ + this + ‘</th>‘);
})
array.push(‘</tr>‘);
// 生成数据行
$.each(data, function (index) {
// this是当前遍历到的数组中的每一个对象
// 拼数据行
array.push(‘<tr>‘);
array.push(‘<td>‘ + (index + 1) + ‘</td>‘);
// 遍历对象，拼表格
for (var key in this) {
array.push(‘<td>‘ + this[key] + ‘</td>‘);
}
array.push(‘</tr>‘);
})
array.push(‘</table>‘);
this.append(array.join(‘‘));
}
}(window.jQuery))
?
原文：https://blog.51cto.com/u_2096101/3310055