昨日重点:
一、jQuery 事件处理
on(): 用于事件绑定,目前最好用的事件绑定方法
off(): 事件解绑
trigger() / triggerHandler(): 事件触发
1、事件处理 on() 绑定事件
element.事件名(事件处理函数)
(1)通过on可以一次性绑定多个事件处理程序
element.on(事件名,事件处理函数)
element.on({事件1:函数1,事件2:函数2})
element.on(‘事件1 事件2‘,事件处理函数)
(2)on还能实现事件委托
(3)可以为动态添加的元素绑定事件
element父元素.on(事件名字,子元素,function(){ 事件处理程序 });
2、案例:发布微博案例
(1)点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。
(2)点击的删除按钮,可以删除当前的微博留言
3、事件处理 off() 解绑事件
(1)解除某个元素对象的所有事件处理函数绑定
ele.off()
(2)解除某事件处理函数绑定
ele.off(事件名)
(3)解除后代元素事件委托
ele.off(事件名,子元素选择器)
(4)如果有的事件只想触发一次,可以用one()来绑定事件
4、 事件处理 trigger() 自动触发事件
1)第一种:trigger()
element.事件名() 第一种简写形式
element.trigger(事件名) 第二种自动触发模式
2)第二种:triggrHandler()
element.triggrHandler(事件名) 第三种自动触发模式
区别:triggrHandler模式不会触发默认行为
二、jQuery 事件对象
语法:element.on(events,selector,function(event){})
阻止默认行为:event.preventDefault()或者return false
阻止冒泡:event.stopPropagation()
三、 jQuery 拷贝对象
四、jQuery部分工具函数使用
(1)$.each() 可遍历jQuery对象、普通对象、数组
$.each({name:‘Haha‘,age:18},function(i,e){
console.log(i,e) 输出 name Haha age 18
})
(2)$.extend() 可克隆对象至另一个对象
(3)$.noConflict() 可将jQuery*对象赋值给另外一个自定义变量,避免冲突
五、jQuery插件应用
jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤:
(1)引入相关文件。(jQuery 文件 和 插件文件)
(2)复制相关html、css、js (调用插件)。
1、瀑布流插件
插件的使用三点:(1)引入css. (2)引入JS (3)引入html。
2、 图片懒加载插件
图片的懒加载就是:当页面滑动到有图片的位置,图片才进行加载,用以提升页面打开的速度及用户体验。
懒加载只需引入html 和 js操作 即可,此插件不涉及css
3、全屏滚动插件
全屏滚动插件介绍比较详细的网站为:
http://www.dowebok.com/demo/2014/77/
4、bootstrap组件
凡是在软件开发中用到了软件的复用,被复用的部分都可以称为组件,凡是在应用程序中已经预留接口的组件就是插件
5、bootstrap插件(JS)
使用步骤 :
(1)引入 相关的css js.... --- 注意说明文档:引入文件的顺序。
(2)去官网复制html....
(3)复制js 代码,启动js插件 --- 如果需要更改js代码,也要遵循(先复制人家的代码,基于原来的代码再次修改)
6、bootstrap案例-阿里百秀
(1)通过调用组件实现导航栏
(2)通过调用插件实现登录
(3)通过调用插件标签页实现 tab 栏
六、ToDoList案例
有jQuery属性、文本、元素及尺寸位置操作请点击a=href"https://www.cnblogs.com/kk199578/p/14174964.html"