【jQuery】基础知识
前言
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
一、jQuery 概述
1、JavaScript 库
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuery，就是一个js库，里面封装了很多用于操作dom的方法。
2、jQuery优点
- 轻量级。核心文件才几十kb，不会影响页面加载速度
- 跨浏览器兼容。基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持，大大简化了DOM操作
- 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
- 免费、开源
二、jQuery的基本使用
1、jQuery 的下载
官网地址： https://jquery.com/
2、jQuery 的版本
版本：
- 1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
- 2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
- 3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本
各个版本的下载：https://code.jquery.com/
3、jQuery 的使用步骤
1） 引入 jQuery 文件
2） 添加入口函数
3） 在入口函数中调用封装好的api实现页面效果
4、jQuery 的入口函数
入口函数的必要性：
1). 等待文档加载完成，保证能够获取到元素
2). 形成了一个沙箱，防止全局变量污染。
代码如下（示例）：
$(function(){... //此处是页面DOM加载完成的入口
})
// Or
$(function(){... //此处是页面DOM加载完成的入口
})
5、jQuery 的入口函数的特点(与window.onload的差异)
6、jQuery 的顶级对象 $
1） $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
2） $ 是jQuery 的顶级对象，把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
3）它的常用方式：
• 添加入口函数
• 获取元素
• dom元素转换为jQuery对象
• 创建元素
注意：只有jQuery对象才能调用jQuery封装的方法
7、jQuery 对象和 DOM 对象
1）用原生 JS 获取来的对象就是 DOM 对象
2）jQuery 方法获取的元素就是 jQuery 对象。
3）jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。它们的api不能混用哦。
4）DOM 对象与 jQuery 对象之间是可以相互转换的。
- ① DOM 对象转换为 jQuery 对象： $(DOM对象) eg. $(‘div’)
- ② jQuery 对象转换为 DOM 对象（两种方式）
$(‘div’) [index] index 是索引号
$(‘div’) .get(index) index 是索引号
三、jQuery 选择器
1、jQuery 基础选择器
$(“选择器”) // 里面选择器直接写 CSS 选择器即可
2、jQuery 筛选选择器
3、jQuery 筛选方法（重点）
重点记住： parent() children() find() siblings() eq() next()
四、jQuery 样式操作
jQuery 提供了两种用于操作样式的方式
①. 可以使用 css 方法来设置元素样式，css方法可以设置单个样式，也可以设置多个样式
②. 也可以直接通过类名操作样式，我们可以为元素添加类样式(addClass)，移除类样式(removeClass)，切换
元素的类样式(toggleClass)，并且可以判断元素是否拥有指定名称的样式(hasClass)
1、操作 css 方法-单组样式设置
① 语法：
$(选择器).css(样式名称，样式值); // 设置元素的单个样式
② 设置样式的时候，属性名称必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(‘‘color’’, ‘‘red’’);
注：设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
2、操作 css 方法-多组样式设置
① 语法：
$(选择器).css(｛样式名称1，样式值1，样式名称2，样式值2｝); // 设置元素的多个样式
② 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性名称可以不用加引号
$(this).css({ “color”:“white”,“font-size”:“20px”});
3、操作 css 方法-获取元素的样式
① 语法：
(选择器).css(样式名称);//获取指定样式属性所对应的值如：(选择器).css(样式名称); // 获取指定样式属性所对应的值 如：(选择器).css(样式名称);//获取指定样式属性所对应的值如：(“div”).css(“background-color”); 获取div元素的背影色
② 特点：获取样式操作只会返回满足条件的第一个元素对应的样式值。
案例（突出展示案例）
需求：鼠标上移到某张图片，让其它图片透明度降低，以突出显示当前图片，移出整个图片区域的时候，图片显示还原到最初的状态
$(function() {// 获取所有li元素let $lis = $('.wrap li');$lis.mouseenter(function() {console.log(11);// 实现排它效果，让当前的li元素的兄弟透明度降低$(this).css('opacity', '1').siblings().css('opacity', '0.5')})// 鼠标移出让li元素高亮const $wrap = $('.wrap');$wrap.mouseleave(function() {$(this).find('li').css('opacity', '1')})})
4、设置类样式方法
作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
// 1. 添加类
$(“div”).addClass(''current'');
// 2. 移除类
$(“div”).removeClass(''current'');
// 3、切换类
$(“div”).toggleClass(''current'');
// 4、 判断元素是否有指定类样式
$(“div”).hasClass(''current''); // 返回true/false,true代表有这个类样式
案例：tab 栏切换效果
$(function () {// 给所有的li做鼠标的移入事件$('.tab li').mouseenter(function () {// 1. 排他：给自己li增加active类，其他的干掉// 谁有active类干掉谁：$('.tab li.active')：筛选选择器，这也是个方案（效率高，但是麻烦）$(this).addClass('active').siblings().removeClass('active')// 2. 排他：main的排他$('.products .main').eq($(this).index()).addClass('selected').siblings().removeClass('selected')})
})
补充：类操作与className区别：原生 JS 中 className 会覆盖元素原先里面的类名。jQuery 里面类操作只是对指定类进行操作，并不影响原先的类样式。
五、 jQuery 效果
jQuery 给我们封装了很多动画效果，以满足常见的页面效果需求，最为常见的如下：
1、显示隐藏效果
1）显示隐藏语法规范
show|hide([speed,[easing],[fn]])toggle([speed,[easing],[fn]])
2） 显示隐藏参数
show|hide参数
（1）参数都可以省略， 如省略则无动画直接显示。
（2）speed：三种预定速度之一的字符串(slow(200)、normal(400)、fast(600))或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
toggle切换参数
（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
建议：平时一般不带参数，直接显示隐藏即可。
2、滑动效果
1）滑动效果语法规范
slideDown|slideUp|slideToggle([speed,[easing],[fn]])
2）滑动效果参数
（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或毫秒数值(如：1000)，默认为normal。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
下拉菜单案例
$(function() {/* $('.wrap>ul>li').mouseenter(function () {// this代表当前li// slideDown()下拉$(this).children('ul').slideDown()})$('.wrap>ul>li').mouseleave(function () {// slideUp()收起来$(this).children('ul').slideUp()}) */// slideToggle()切换效果$('.wrap>ul>li').click(function() {$(this).children('ul').slideToggle()})
})
3、淡入淡出效果
1）淡入效果语法规范
fadeIn|fadeOut|fadeToggle[speed,[easing],[fn]])
//渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])
2）效果参数
fadeIn|fadeOut效果参数
（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
fadeTo效果参数
（1）opacity 透明度必须写，取值 0~1 之间。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
淡入淡出效果-京东轮播图
$(function() {const $left = $('.arrow .arrow-left')const $right = $('.arrow .arrow-right')const $lis = $('.slider li')let index = 0//点击右边滑动$right.click(function() {index++if (index >= $lis.length) return index = 0$lis.eq(index).fadeIn().siblings().fadeOut()})//点击左边滑动$left.click(function() {index--if (index < 0) return index = lis.length - 1$lis.eq(index).fadeIn().siblings().fadeOut()})// 轮播自动播放let timeId = setInterval(function() {$right.click()}, 1000)// 触发鼠标移入事件$lis.mouseenter(function() {clearInterval(timeId)}).mouseleave(function() { // 触发鼠标移出事件timeId = setInterval(function() {$right.click()}, 2000)})})
4、自定义动画 animate
1）淡入效果语法规范
animate(params,[speed],[easing],[fn])
2）效果参数
（1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采
取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
自定义动画 animate
小米首页-手风琴案例
// 给li动态添加背景图片
const $li = $('#box li')
// for循环遍历
for (let i = 0; i < $li.length; i++) {// $li[i] 拿到的是原生DOM li// console.log($li[i])$($li[i]).css({backgroundImage: `url(images/${i + 1}.jpg)`})
}
// 给所有的li做鼠标移入事件
$li.mouseenter(function () {// 自己800，别人100：排他// 在新动画开始前，结束其他动画$(this).stop().animate({ width: 800 }).siblings().stop().animate({ width: 100 })
})
// 给盒子div做移出事件
$('#box').mouseleave(function () {$li.stop().animate({ width: 240 })
})
王者荣耀-手风琴案例
$(function() {// 鼠标经过某个小li 有两步操作：$(".king li").mouseenter(function() {// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入$(this).stop().animate({width: 224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出$(this).siblings("li").stop().animate({width: 69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();})
});
六、 jQuery 属性操作
1 、 设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如<a> 元素里面的 href ，比如 <input> 元素里面的 type。
① 获取属性语法
prop(''属性'')
② 设置属性语法
prop(''属性'', ''属性值'')
2、设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
① 获取属性语法
attr(''属性'') // 类似原生 getAttribute()
② 设置属性语法
attr(''属性'', ''属性值'') // 类似原生 setAttribute() 改方法也可以获取 H5 自定义属性
3、数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
① 附加数据语法
data(''name'',''value'') // 向被选元素附加数据
② 获取数据语法
date(''name'') // 向被选元素获取数据
同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型
七、jQuery 文本属性值
主要针对元素的内容还有表单的值操作。
1、普通元素内容 html()（ 相当于原生inner HTML)
html() // 获取元素的内容
html(''内容'') // 设置元素的内容
2、普通元素文本内容 text() (相当与原生 innerText)
text() // 获取元素的文本内容
text(''文本内容'') // 设置元素的文本内容
3、表单的值 val()（ 相当于原生value)
val() // 获取表单的值
val(''内容'') // 设置表单的值
八、jQuery 元素操作
主要是遍历、创建、添加、删除元素操作。
1、 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
语法1：
$("div").each(function (index, domEle) { xxx; }）
①. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
②. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
③. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法2：
$.each(object，function (index, element) { xxx; }）
① $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
② 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
2、创建元素
语法：
$(''<li></li>''); //动态的创建了一个 <li>
3、添加元素
① 内部添加
element.append(''内容'')
把内容放入匹配元素内部最后面，类似原生 appendChild。
element.prepend(''内容'')
把内容放入匹配元素内部最前面。
② 外部添加
element.after(''内容'') // 把内容放入目标元素后面
element.before(''内容'') // 把内容放入目标元素前面
内部添加元素，生成之后，它们是父子关系。
外部添加元素，生成之后，他们是兄弟关系。
4、删除元素
element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容
remove 删除元素本身。
empt() 和 html(‘’‘’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。
案例：购物车案例模块
实现功能：全选、增减商品数量、增减商品数量分析、修改商品小计、计算总计和总额、删除商品模块、选中商品添加背景
$(function () {// 不是所有的代码都在一个入口（或者入口）// 一个入口只做一件事情// 给所有的j-checkbox做点击事件：只要修改背景色$('.j-checkbox').on('click', function () {// 修改上级的上级$(this).parent().parent().toggleClass('check-cart-item')// 验证是否需要全选$('.checkall').prop('checked', $('.j-checkbox').length === $('.j-checkbox:checked').length)// 修改统计信息getSum()})// 全选控制j-checkbox的选中效果$('.checkall').on('click', function () {// 控制子菜单的选中问题$('.j-checkbox').prop('checked', $(this).prop('checked'))// 控制所有全选的效果$('.checkall').prop('checked', $(this).prop('checked'))// 控制选中的类的效果if ($(this).prop('checked')) {$('.j-checkbox').parent().parent().addClass('check-cart-item')} else {$('.j-checkbox').parent().parent().removeClass('check-cart-item')}// 修改统计信息getSum()})
})
// 独立函数：写在外面
const getSum = function () {// 拿到所有被选中的商品：check-cart-itemconst $checked = $('.check-cart-item')// 修改两个数据：数量.amount-sum>em和总价.price-sum>em$('.amount-sum>em').text($checked.length)// 修改价格// 找到每个被选中的商品中的价格：累加起来// console.log($checked.children('.p-sum'))let sum = 0$checked.children('.p-sum').each(function (i, item) {// console.log(item, $(item).text().slice(1))sum += +$(item).text().slice(1)})// 保留两位小数：toFixed(2)$('.price-sum>em').text('￥' + sum.toFixed(2))
}
// 数量的修改
$(function () {// 给所有的+号做点击事件$('.cart-item .increment').on('click', function () {// 0. 隐藏信息：让当前的选项框：被选中（没有选中：触发一次单击事件）if (!$(this).parents('.cart-item').find('.j-checkbox').prop('checked')) {// 原来没有被选中$(this).parents('.cart-item').find('.j-checkbox').trigger('click')}// 1. 让输入框的数字在原来的基础上+1$(this).prev().val(+$(this).prev().val() + 1)// 2. 修改对应商品的总价：数量 * 单价let sum = $(this).parents('.p-num').prev().text().slice(1) * $(this).prev().val()$(this).parents('.p-num').next().text('￥' + sum.toFixed(2))// 3. 修改整个购物车的统计信息getSum()})// 给所有的+号做点击事件$('.cart-item .decrement').on('click', function () {// 0. 隐藏信息：让当前的选项框：被选中（没有选中：触发一次单击事件）if (!$(this).parents('.cart-item').find('.j-checkbox').prop('checked')) {// 原来没有被选中$(this).parents('.cart-item').find('.j-checkbox').trigger('click')}// 1. 让输入框的数字在原来的基础上-1，但是要注意安全（不能小于1if ($(this).next().val() == 1) {return}// console.log(+$(this).next().val() - 1)// 当前符号（1）的下一个元素（数量）$(this).next().val(+$(this).next().val() - 1)// 2. 修改对应商品的总价：数量 * 单价let sum = $(this).parents('.p-num').prev().text().slice(1) * $(this).next().val()$(this).parents('.p-num').next().text('￥' + sum.toFixed(2))// 3. 修改整个购物车的统计信息getSum()})
})
九、jQuery 尺寸、位置操作
1、jQuery 尺寸
- 以上参数为空，则是获取相应值，返回的是数字型。
- 如果参数为数字，则是修改相应值。
- 参数可以不必写单位。
2、jQuery 位置
位置主要有三个： offset()、position()、scrollTop()/scrollLeft()
1）offset() 设置或获取元素偏移
① offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
③ 可以设置元素的偏移：offset({ top: 10, left: 30 });
2）position() 获取元素偏移
① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
③ 该方法只能获取。
3）scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
① scrollTop() 方法设置或返回被选元素被卷去的头部。
② 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
案例：
带有动画的返回顶部
① 核心原理： 使用animate动画返回顶部。
② animate动画函数里面有个scrollTop 属性，可以设置位置
③ 但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0})
$(function () {// 给页面做滚动事件$(window).on('scroll', function () {// console.log(1)// 获取滚动距离：建议通过html标签或者body标签（兼容）console.log($('html,body').scrollTop()) // 获取// 修改// $('html,body').scrollTop(0)})$('button').on('click', function () {// 直接上去// $('html,body').scrollTop(0)// 动画效果$('html,body').animate({scrollTop: 0})})})
固定导航栏
$(function() {// 获取相关数据let scrollTop = $('#topPart').height()const $nav = $('#navBar')// 这行代码不能放到事件内部let oldMargin = parseInt($('#mainPart').css('marginTop'))// console.log(oldMargin)$(window).on('scroll', function() {if ($('html,body').scrollTop() > 168) {$nav.addClass('fixed')// 导航栏脱标：让原来的主体部分增加margin$('#mainPart').css({marginTop: oldMargin + $nav.height()})} else {// 恢复不固定$nav.removeClass('fixed')$('#mainPart').css({marginTop: oldMargin})}})})
十、 jQuery 事件注册
1、单个事件注册
语法：
element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
十一、jQuery 事件注册
1、 事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：
element.on(events,[selector],fn)
1）events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
2）selector: 元素的子元素选择器 。
3）fn:回调函数 即绑定在元素身上的侦听函数。
on() 方法
优势1：
可以绑定多个事件，多个处理事件处理程序。
$(“div”).on({mouseover: function(){},
mouseout: function(){},
click: function(){}
});
如果事件处理程序相同
$(“div”).on(“mouseover mouseout”, function() {$(this).toggleClass(“current”);
});
优势2：
可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$('ul').on('click', 'li', function() {alert('hello world!');
});
在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
优势3：
动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件
$(“div").on("click",”p”, function(){alert("俺可以给动态生成的元素绑定事件")
});$("div").append($("<p>我是动态创建的p</p>"));
案例：发布微博案例
① 点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。
② 点击的删除按钮，可以删除当前的微博留言。
$(function() {// 获取元素 定义元素const const $area = $('#area')const $useCount = $('.useCount')const $send = $('#send')const $ul = $('ul')// 输入框输入事件$area.on('input', function() {// 获取输入框内容并清除内容两边空格val()、trim()let value = $(this).val().trim()// 显示内容的字数$useCount.text(value.length)})// 点击发送事件 $jq.on('事件类型',回调函数())$send.on('click', function() {// 获取输入框内容并清除内容两边空格let value = $area.val().trim()// 安全判定，判断内容是否为空值if (value == '') {// 如果为空值return 内容框值为空''return $area.val('')}// 定义变量存储随机数据let rand = Math.floor(Math.random() * dataArr.length)// 定义变量获取日期let date = getTime()// 在ul添加内容，用到prepend()$ul.prepend(`<li><div class="info"><img class="userpic" src="${dataArr[rand].imgSrc}" /><span class="username">${dataArr[rand].uname}</span><p class="send-time">发布于 ${date}</p></div><div class="content">${value}</div><span class="the_del">X</span></li>`)// 数据清理，数据输入之后点击发送的同时清理输入框的内容，val(),text()$area.val('')$useCount.text(0)// 删除功能，在ul标签中找到删除键添加点击事件进行清理操作// $(this)为当前的删除键找到父类为li标签进行删除操作，remove()$ul.find('.the_del').click(function() {$(this).parent().remove()})})})
// 日期格式化
function getTime() {var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;month = month < 10 ? '0' + month : month;var day = date.getDate();day = day < 10 ? '0' + day : day;var hours = date.getHours();hours = hours < 10 ? '0' + hours : hours;var minutes = date.getMinutes();minutes = minutes < 10 ? '0' + minutes : minutes;var seconds = date.getSeconds();seconds = seconds < 10 ? '0' + seconds : seconds;var str = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;return str;
};
2、事件处理 off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序。
$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托
如果有的事件只想触发一次， 可以使用 one() 来绑定事件。
3、 自动触发事件 trigger()
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标
点击触发。
element.click() // 第一种简写形式
element.trigger("type") // 第二种自动触发模式
$("p").on("click", function () {alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标
点击触发。
element.triggerHandler(type) // 第三种自动触发模式
十二、 jQuery 事件对象
事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event) {})
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()
十三、jQuery 拷贝对象
如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法
语法：
$.extend([deep], target, object1, [objectN])
1） deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
2） target: 要拷贝的目标对象
3）object1:待拷贝到第一个对象的对象。
4）objectN:待拷贝到第N个对象的对象。
5）浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
6）深拷贝，前面加true， 完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。
十四、多库共存
问题概述：
jQuery使用作为标示符，随着jQuery的流行,其他js库也会用这作为标示符，随着jQuery的流行,其他 js 库也会用这作为标示符，随着jQuery的流行,其他js库也会用这作为标识符， 这样一起使用会引起冲突。
客观需求：
需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery 解决方案：
1）把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(‘‘div’’)
2） jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();
十五、 jQuery 插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：
1）jQuery 插件库 http://www.jq22.com/
2）jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤：
1）引入相关文件。（jQuery 文件 和 插件文件）
2）复制相关html、css、js (调用插件)。
jQuery 插件演示：
1）瀑布流
2）图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片。
我们使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面
3）全屏滚动（fullpage.js）
gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/
bootstrap JS 插件：
bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用 ，也必须引入jQuery 文件。
【jQuery】基础知识相关推荐
- jQuery小测试系列之jQuery基础知识
日期:2012-4-17 来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识
- jQuery基础知识整理
jQuery基础知识整理 jQuery简介 什么是jQuery(了解) jQuery简化JS代码 jQuery的核心思想:"写的更少,但做的更多"(write less,do mo ...
- JQuery 基础知识学习（详尽版）
JQuery 详尽的基础知识学习 jQuery 语法 jQuery 选择器 jQuery 选择器(大全) jQuery 事件 ready() holdReady() on() off() one() ...
- jQuery基础知识（黑马程序员前端基础必备教程视频笔记）
一.jQuery概述 1.JavaScript库 即library,是一个封装好的特定的集合(方法和函数).从封装的一大堆函数的角度理解库.就是在个库中,封装了很多预先定义好的函数在里面,比如动画an ...
- jquery基础知识（一）
一.JQuery 基础: 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优 ...
- jQuery基础知识准备
一． 代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起 始的.而这个"$"就是jQuery当中最重要且独有的对象:j ...
- jQuery框架-1.jQuery基础知识
jQuery简介 jQuery,顾名思义是JavaScript和查询(Query),jQuery是免费.开源的.它可以简化查询DOM对象.处理事件.制作动画.处理Ajax交互过程且兼容多浏览器的jav ...
- jQuery基础知识笔记一
学习目标 知道jQuery常用选择器的写法 知道jQuery如何操作元素样式 知道jquery的常用事件 知道选项卡的基本实现原理 知道如何制作基本的动画 了解表单验证的基本原理 03-[了解]jqu ...
- Jquery基础知识之菜鸟教程
jquery核心: write less do more1.jQuery 语法基础语法: $(selector).action();2.文档就绪事件 :文档完全加载完后执行函数第一种方式: $(doc ...
- 【jquery】jquery基础知识
总体介绍: jquery是一个js的类库,为了减少代码量实现更多的功能 1.jquery使用需要引入jquery的类库,其中有一名称带min(产品版)有一个不带min的(开发版),作用相同.当我们同网 ...
最新文章
- 刻意练习：LeetCode实战 -- Task11. 删除链表的倒数第N个节点
- 安卓高手之路 图形系统（2)----------------基于Binder的架构思路）
- ajax怎样获得表头信息,layui.table动态获取表头和列表数据示例
- [转]Zend Studio 9正式版激活破解注册…
- IL入门之旅（三）——Dump对象
- 数值范围_如何理解PLC对数值运算的定义与处理方式？
- boost::process::search_path相关的测试程序
- python 公司年会抽奖_Python语言学习之用Python写公司年会抽奖程序
- HadoopDB GlobalHasher的参数问题
- sql 日期和当前日期时间差_SQL基础进阶16日期处理
- Leetcode 137. Single Number I/II/III
- idea报错：Lambda expressions are not supported at language level '7'
- 语义分割之pspnet
- 机器人学习参考书籍目录整理
- setValue和setObject的区别
- JAVA 守护线程 Deamon
- 这交互炸了(三):闪屏页是像云一样消失的
- deepin回收站无法清空
- 金山云智能营销平台再升级，AI 投放助力游戏厂商精准到达；微医发布 AI 解决方案，提升县域医疗服务能力...
- 记一次搭建 nodebb 论坛