jQuery自动触发事件与bootstrap/jQuery插件用法

jQuery自动触发事件：

有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

语法：

1
2
3
4
5
1、element.click();

2、element.trigger();

3、element.triggerHandler("event-type")

jQuery事件对象：

事件被触发，就会有事件对象的产生.

1
element.on (events, [selector] ,function(event) {})

阻止默认行为:event.preventDefault()或者return false 阻止冒泡: event.stopPropagation0

这个效果和web api中效果类似

jQuery对象拷贝：

如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$.extend()方法

语法:

1
s.extend ( [deep], target, object1, [objectN])
  • 1.deep:如果设为true为深拷贝，默认为false浅拷贝
  • 2.target要拷贝的目标对象
  • 3.object1:待拷贝到第一个对象的对象
  • 4.objectN:待拷贝到第N个对象的对象。
  • 5.浅拷贝是把被拷贝数据中的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
  • 6.深拷贝，前面加true，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被考贝对象。

第五点浅拷贝解析：拷贝时是把拷贝对象中的复杂数据类型的地址传递到被拷贝的对象当中，当我们对拷贝对象或者被拷贝到对象的复杂类型地址的修改时机会对所有的拷贝对象数据进行修改

第六点深拷贝解析：拷贝时是将所有的数据拷贝到另外一个对象当中，因此再修改拷贝对象中的复杂数据类型数据时不会对拷贝对象中的数据造成任何影响

eg：浅拷贝案例

img

jQuery多库共存：

问题概述: jQuery使用$作为标示符，随着jQuery的流行,其他js库也会用这$作为标识符，这样 一起使用会引起冲突。

客观需求： 需要一个解决方案，让jQuery和其他的s库不存在突，可以同时存在，这就叫做多库共存.

jQuery解决方案: 1.把里面的$符号统一改为jQuery。比如jQuery(“div’) 2.jQuery变量规定新的名称:$.noConflict()

1
2
3
var o = $.noConflict();

o("span");利用这个方法一样可以获取到span这个标签

jQuery插件的使用

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。

注意:这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件

JQuery插件常用的网站：

1.jQuery插件库 jQuery插件库-收集最全最新最好的jQuery插件

  1. jQuery之家 jQuery之家-自由分享jQuery、html5、css3的插件库

插件使用步骤:

1.引入相关文件。( jQuery文件和插件文件）

2.复制相关html、css、js(调用插件)。

1、制作瀑布流案例+页面懒加载效果

修改HTML结构内容即可

img

2、图片懒加载(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)以下页面正常只是需要载入时间。

img

3、全屏滚动案例（隐藏侧边滚动条，页面以一帧一帧的方式去展现）

gilHub : https://github.corn/alvarotrigoffullPage.js 中文翻译网站:jQuery全屏滚动插件fullPage.js演示_dowebok