jQuery第四天

课程回顾：

元素操作：

遍历元素：

$(‘元素’).each(function (index, elm) {});

$.each(对象，function (index, elm) {});

创建元素：$(‘

新的元素

?’);

添加元素：

内部添加：append，appendTo，prepend，prependTo

外部添加：after，before

删除元素：remove，empty，html(’’);

元素尺寸：width，innerWidth，outerWidth，outerWidth(true);

元素位置：

偏移位置：offset，position

卷起位置：scrollTop

parents：获取所以上级元素

每日反馈

小计：小计 = 单价 * 数量数量：获取输入框里面的数量单价：获取内容，获取之后要吧纯数字部分截取出来小计：链接￥，并且要保留两位有效数字
总计：总件数：把所以输入框里面的数量相加,放到页面中总价格：把所有小计里面的数相加，放到页面中

案例：品优购电梯导航

①当我们滚动到 今日推荐 模块，就让电梯导航显示出来②点击电梯导航页面可以滚动到相应内容区域③核心算法：因为电梯导航模块和内容区模块一一对应的④当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号⑤就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top⑥然后执行动画即可

第二部分：①当我们点击电梯导航某个小li， 当前小li 添加current类，兄弟移除类名②当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，也会添加current类， 兄弟移除current类。③触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。④需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号⑤判断的条件：  被卷去的头部 大于等于 内容区域里面每个模块的offset().top⑥就利用这个索引号找到相应的电梯导航小li添加类。

jQuery 事件

目标：

能够说出4种常见的注册事件 能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件

jQuery事件注册

语法：element.事件(function(){})

$(“div”).click(function(){  事件处理程序 })

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

事件处理 on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

语法：element.on(events,[selector],fn)

\1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。\2. selector: 元素的子元素选择器 。\3. fn:回调函数 即绑定在元素身上的侦听函数。

on() 方法优势1：

1、可以绑定多个事件，多个处理事件处理程序。

 $(“div”).on({mouseover: function(){},mouseout: function(){},click: function(){} });

on() 方法优势2：

可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$('ul').on('click', 'li', function() {alert('hello world!');});

在此之前有bind(), live()，delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

on() 方法优势3：

动态创建的元素，click()没有办法绑定事件，on() 可以给动态生成的元素绑定事件

 $(“div").on("click",”p”, function(){alert("俺可以给动态生成的元素绑定事件")});

案例：发布微博案例

①点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。

②点击的删除按钮，可以删除当前的微博留言。

事件处理 off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序。

$("p").off() // 解绑p元素所有事件处理程序$("p").off( "click")  // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名$("ul").off("click", "li");   // 解绑事件委托

如果有的事件只想触发一次，可以使用 one()来绑定事件。

// 给input添加点击事件，但是这个事件只要触发1次就够$('input').one('click', function () {console.log('哇哈哈');});解绑：off，
一次性：one

自动触发事件trigger()

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

element.click() // 第一种简写形式

element.trigger(“type”)//第二种自动触发模式

element.triggerHandler(‘type)’ // 第三种自动触发事件【不会触发事件元素的默认效果】

$("p").on("click", function () {alert("hi~");}); $("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击

element.triggerHandler(type) // 第三种自动触发模式

triggerHandler模式不会触发事件的默认效果行为，这是和前面两种的区别。

$('input').focus(function () {console.log(123);});// $('input').focus();// $('input').trigger('focus');$('input').triggerHandler('focus');

上午回顾：

jQuery事件：

注册事件：

$(元素).click(function () {});

$(元素).on(‘事件类型’, [后代元素], function () {});

// 用on的又是：1.可以多事件同时绑定，2.事件委派，3.如果动态创建的元素可以有事件

解绑事件：

off：如果不加参数意思都解除，如果加参数解除指定的事件，可以解除事件委派

one：一次性事件

自动触发事件：

$(元素).click();

$(元素).trigger(‘事件类型’);

$(元素).triggerHandler(‘事件类型’)

jQuery事件对象

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

事件出发时，产生的特殊的对象

【event==》事件对象】

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

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

释放$符号

var jq = $.noConflict();<script type="text/javascript">// $('input');var jq = $.noConflict();console.log( jq('input') );</script>

jQuery 其他方法

jQuery 插件

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 (调用插件)。

瀑布流：

瀑布流

图片懒加载或者（BOOTSTRAP插件）

（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）

当我们页面滑动到可视区域，再显示图片。

我们使用jquery 插件库 EasyLazyload。注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面

注意：1、要引入JQuery2、插件JS【js引入文件和js调用必须写到 DOM元素（图片）最后面】3、将图片 src 替换为 data-lazy-src1、ctrl + H2、查找img的src（因为这里面还有script的src）3、替换的时候要和查找的时候保存格式相同4、调用lazyLoadInit(）

BOOTSTRAP插件

1、引入CSS、引入JQ、引入JS2、.container3、复制粘贴

知识点：

本地存储技术：

localSortage对象：把数据以字符串的方式保存本地获取： localStorage.getItem()设置： localStorage.setItem()

JSON 方法补充

作用：把字符串数组转成数组，或者把数组转成字符串数组例如：var str = '[{"name":"张三丰"},{"name":"李寻欢"},{"name":"乔峰"}]';JSON 解析：JSON.parse()：返回转换后的数组JSON 转字符串：JSON.stringify();<script type="text/javascript">var str = '[{"name":"张三丰"},{"name":"李寻欢"},{"name":"乔峰"}]';// console.log(str);// 转成数组var arr = JSON.parse(str);// console.log( arr );var newStr = JSON.stringify(arr);console.log(newStr);</script>

课程回顾：

jQuery注册事件：

$(元素).click(function () {})

$(元素).on(‘click’,[委派元素],function () {})；

一次性：one

jQuery解绑事件：off

自动触发：

简写：$(元素).click()

触发：$(元素).trigger(‘click’);

触发：$(元素).triggerHandler(‘click’);

jQuery事件对象：如果要用事件对象，那么我们直接再函数中设置形参接受即可

释放符号：var jq = $.noConflict();