Soumettre la recherche
Mettre en ligne
jQuery实践经验与技巧
•
Télécharger en tant que PPTX, PDF
•
0 j'aime
•
366 vues
fangdeng
Suivre
Technologie
Design
Affichage du diaporama
Signaler
Partager
Affichage du diaporama
Signaler
Partager
1 sur 24
Télécharger maintenant
Recommandé
jQuery 選取器解析
jQuery 選取器解析
Kingsley Zheng
Yui3入门
Yui3入门
cly84920
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Think hy
JQuery 学习
JQuery 学习
cssrain
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
fangdeng
用Jquery实现拖拽层
用Jquery实现拖拽层
yiditushe
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
zhangdaiping
test
test
referee
Recommandé
jQuery 選取器解析
jQuery 選取器解析
Kingsley Zheng
Yui3入门
Yui3入门
cly84920
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Think hy
JQuery 学习
JQuery 学习
cssrain
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
fangdeng
用Jquery实现拖拽层
用Jquery实现拖拽层
yiditushe
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
zhangdaiping
test
test
referee
jQuery底层架构
jQuery底层架构
fangdeng
Hibernate查询
Hibernate查询
llying
Building an event driven web
Building an event driven web
fangdeng
Ken20150320
Ken20150320
LearningTech
解決! メール送信
解決! メール送信
kmiyako
Mongodb
Mongodb
bj
JQuery Plugin
JQuery Plugin
Jason Wang
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
9scss
Semana4 Edgar Noé Sánchez Martínez
Semana4 Edgar Noé Sánchez Martínez
Edgar Sánchez
Wilden Analysis 020210 Final[1]
Wilden Analysis 020210 Final[1]
Falls Church Times
Villager awards ad
Villager awards ad
Katie Emery-Cooper
SMS trženje kot ključni del trženjske akcije ob odprtju spletne drogerije
SMS trženje kot ključni del trženjske akcije ob odprtju spletne drogerije
Tina Grbac
Presentation 6 hjfy intro to agency
Presentation 6 hjfy intro to agency
HomesJustForYou Team
Strategi Pemimpinan
Strategi Pemimpinan
Victor Madritsta
J query
J query
waitcat
Script with engine
Script with engine
Webrebuild
J Query简介及入门指南
J Query简介及入门指南
AppZ
Jquery指南
Jquery指南
yiditushe
JavaScript Advanced Skill
JavaScript Advanced Skill
firestoke
前端开发之Js
前端开发之Js
fangdeng
Asp.net mvc 培训
Asp.net mvc 培训
lotusprince
jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )
EZoApp
Contenu connexe
Tendances
jQuery底层架构
jQuery底层架构
fangdeng
Hibernate查询
Hibernate查询
llying
Building an event driven web
Building an event driven web
fangdeng
Ken20150320
Ken20150320
LearningTech
解決! メール送信
解決! メール送信
kmiyako
Mongodb
Mongodb
bj
JQuery Plugin
JQuery Plugin
Jason Wang
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
9scss
Tendances
(8)
jQuery底层架构
jQuery底层架构
Hibernate查询
Hibernate查询
Building an event driven web
Building an event driven web
Ken20150320
Ken20150320
解決! メール送信
解決! メール送信
Mongodb
Mongodb
JQuery Plugin
JQuery Plugin
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
En vedette
Semana4 Edgar Noé Sánchez Martínez
Semana4 Edgar Noé Sánchez Martínez
Edgar Sánchez
Wilden Analysis 020210 Final[1]
Wilden Analysis 020210 Final[1]
Falls Church Times
Villager awards ad
Villager awards ad
Katie Emery-Cooper
SMS trženje kot ključni del trženjske akcije ob odprtju spletne drogerije
SMS trženje kot ključni del trženjske akcije ob odprtju spletne drogerije
Tina Grbac
Presentation 6 hjfy intro to agency
Presentation 6 hjfy intro to agency
HomesJustForYou Team
Strategi Pemimpinan
Strategi Pemimpinan
Victor Madritsta
En vedette
(6)
Semana4 Edgar Noé Sánchez Martínez
Semana4 Edgar Noé Sánchez Martínez
Wilden Analysis 020210 Final[1]
Wilden Analysis 020210 Final[1]
Villager awards ad
Villager awards ad
SMS trženje kot ključni del trženjske akcije ob odprtju spletne drogerije
SMS trženje kot ključni del trženjske akcije ob odprtju spletne drogerije
Presentation 6 hjfy intro to agency
Presentation 6 hjfy intro to agency
Strategi Pemimpinan
Strategi Pemimpinan
Similaire à jQuery实践经验与技巧
J query
J query
waitcat
Script with engine
Script with engine
Webrebuild
J Query简介及入门指南
J Query简介及入门指南
AppZ
Jquery指南
Jquery指南
yiditushe
JavaScript Advanced Skill
JavaScript Advanced Skill
firestoke
前端开发之Js
前端开发之Js
fangdeng
Asp.net mvc 培训
Asp.net mvc 培训
lotusprince
jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )
EZoApp
Javascript 性能优化总结.docx
Javascript 性能优化总结.docx
baixingfa
前端MVC之backbone
前端MVC之backbone
Jerry Xie
Javascript autoload
Javascript autoload
jay li
HTML5 介绍
HTML5 介绍
S S
J Query Learn
J Query Learn
guestfb42fc
Discuz技术交流
Discuz技术交流
pigso
YUI ─ 阿大
YUI ─ 阿大
taobao.com
javascript的分层概念 --- 阿当
javascript的分层概念 --- 阿当
裕波 周
Node way
Node way
Ethan Zhang
jQuery源码学习
jQuery源码学习
fangdeng
CKAN : 資料開放平台技術介紹 (CAKN : Technical Introduction to Open Data Portal)
CKAN : 資料開放平台技術介紹 (CAKN : Technical Introduction to Open Data Portal)
Jian-Kai Wang
旺铺前端设计和实现
旺铺前端设计和实现
hua qiu
Similaire à jQuery实践经验与技巧
(20)
J query
J query
Script with engine
Script with engine
J Query简介及入门指南
J Query简介及入门指南
Jquery指南
Jquery指南
JavaScript Advanced Skill
JavaScript Advanced Skill
前端开发之Js
前端开发之Js
Asp.net mvc 培训
Asp.net mvc 培训
jQuery 教學 ( 搭配 EZoApp )
jQuery 教學 ( 搭配 EZoApp )
Javascript 性能优化总结.docx
Javascript 性能优化总结.docx
前端MVC之backbone
前端MVC之backbone
Javascript autoload
Javascript autoload
HTML5 介绍
HTML5 介绍
J Query Learn
J Query Learn
Discuz技术交流
Discuz技术交流
YUI ─ 阿大
YUI ─ 阿大
javascript的分层概念 --- 阿当
javascript的分层概念 --- 阿当
Node way
Node way
jQuery源码学习
jQuery源码学习
CKAN : 資料開放平台技術介紹 (CAKN : Technical Introduction to Open Data Portal)
CKAN : 資料開放平台技術介紹 (CAKN : Technical Introduction to Open Data Portal)
旺铺前端设计和实现
旺铺前端设计和实现
Plus de fangdeng
浅尝jQuery
浅尝jQuery
fangdeng
Html基础培训
Html基础培训
fangdeng
Javascript代码注释及文档生成
Javascript代码注释及文档生成
fangdeng
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
fangdeng
前端单元测试初体验
前端单元测试初体验
fangdeng
Java script测试之js unit ut
Java script测试之js unit ut
fangdeng
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
fangdeng
产品线中的思考
产品线中的思考
fangdeng
产品线中的思考
产品线中的思考
fangdeng
Postoffer前端架构设计
Postoffer前端架构设计
fangdeng
Varnish简介
Varnish简介
fangdeng
Websocket
Websocket
fangdeng
Let's talk about date in javascript
Let's talk about date in javascript
fangdeng
Test driven-frontend-develop
Test driven-frontend-develop
fangdeng
方凳良品1期
方凳良品1期
fangdeng
方凳良品2期
方凳良品2期
fangdeng
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
fangdeng
Datalazyload
Datalazyload
fangdeng
Request animateframe初探
Request animateframe初探
fangdeng
简鲜侠Websocket
简鲜侠Websocket
fangdeng
Plus de fangdeng
(20)
浅尝jQuery
浅尝jQuery
Html基础培训
Html基础培训
Javascript代码注释及文档生成
Javascript代码注释及文档生成
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
前端单元测试初体验
前端单元测试初体验
Java script测试之js unit ut
Java script测试之js unit ut
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
产品线中的思考
产品线中的思考
产品线中的思考
产品线中的思考
Postoffer前端架构设计
Postoffer前端架构设计
Varnish简介
Varnish简介
Websocket
Websocket
Let's talk about date in javascript
Let's talk about date in javascript
Test driven-frontend-develop
Test driven-frontend-develop
方凳良品1期
方凳良品1期
方凳良品2期
方凳良品2期
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
Datalazyload
Datalazyload
Request animateframe初探
Request animateframe初探
简鲜侠Websocket
简鲜侠Websocket
jQuery实践经验与技巧
1.
jQuery实战经验与技巧(一)
2.
jQuery对象(选择器) jQuery(), jQuery(document),
$(), $(docoment), $(‘div’), $(‘<div />’), $(‘#id .cls’) ……
3.
成员 { 0:
HTMLElement, 1: HTMLElement, 2: HTMLElement, …… length: 12, add:function(){}, addClass:function(){}, after: function(){}, …… }
4.
链式操作 add(expr,[context]) $(‘p’).add(‘span’).add(‘<a></a>’).addClass(‘hide’);
5.
andSelf() 对于筛选或查找后的元素,加入先前所选元素。 $("div").find("p").andSelf().addClass("border");
6.
end() 回到最近的一个“破坏性”操作之前,如果之前没有破坏性操作,则返回一个空集。 应用场景:当从后台取得用户信息后填充到页面相应位置并显示
<div id=“userinfo”> <h3 class=“name”></h3> <span class=“gender”></span> <p class=“detail”> <span class=“size”></span> <span class=“comments”></span> </p> </div>
7.
$(‘#userinfo’).find(‘.name’).html(‘Jquery’).end() .find(‘. gender’).html(‘woman’).end()
.find(‘.size’).html(’80k’).end() .find(‘. comments’).html(‘jquery’).end() .show();
8.
数据缓存 data(name[,value]), removeData(name) 这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。
$$(‘.drag’)[0].setAttribute(‘data-title’, ’abc’); $(‘.drag’).data(‘title’, ’abc’).data(‘obj’, {a:1, b2}); $(‘.drag’).removeData(‘title’);
9.
事件 $(document).ready(function(){ //
在这里写你的代码...}); $(function() { // 在这里写你的代码... }); $(init); function init(){ console.log(‘loaded’) }
10.
click(fn), mouseover(fn), focus(fn),
change(fn), keydown(fn), focusin(fn), focusout(fn), mouseenter(fn),示例 mouseleave(fn) …… jQuery自定义事件
11.
事件处理 bind(), unbind(),
one(), trigger(), triggerHandler() $(‘#btn’).unbind(‘click’).bind(‘click’, {a: 1}, function(e){ console.log(e.data.a); }).bind({ focus: function(){}, blur: function(){} }).one(‘mouseover’, function(){}); $().bind(‘click’, function(){}) 等同$().click(function(){}) $().bind(‘focus’, function(){})等同$().focus(function(){}) …… 1、bind方法可以绑定自定义事件 2、可以向事件处理函数传递参数 3、更加灵活
12.
trigger(type[,data]) 顾名思义:用来触发某类事件 $(‘#btn’).click(function(){
console.log(‘Oh, yeah!’); }).trigger(‘click’); $(‘#btn’).bind(‘myEvent’, function(a, b){ console.log(a + b) }).trigger(‘myEvent’,[‘Hello’, ’world’]);
13.
triggerHandler(type[,data]) 1、他不会触发浏览器默认事件。 2、只触发jQuery对象集合中第一个元素的事件处理函数。
3、这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。
14.
命名空间事件 什么是命名空间事件? 传统事件:.bind(‘click’,
function(){}); 命名空间事件:.bind(‘click.namespace’, function(){}); 场景一:一个节点上绑定了多个事件逻辑 DOM操作 click DOM操作 …… AJAX请求
15.
$(‘a.btn’).bind(‘click’, DOMchange) .bind(‘click’,
DOMchange2) .bind(‘click.ajax’, ajaxAdmin); if(condition){ $(‘a.btn’).unbind(‘click.ajax’); }
16.
你还可以: $(‘a.btn’).trigger(‘click!’); 也可以:
$(‘a.btn’).trigger(‘click.ajax’);
17.
事件委派 live(type, fn),
die(type) 给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。 也能绑定自定义事件。 <ul> <li></li> <li></li> <li></li> …… </ul> 插入 <li></li> $(‘li’).live(‘click’, function(){}); $(‘li’).die(‘click’);
18.
AJAX事件 ajaxStart(), ajaxSend(),
ajaxErorr(), ajaxSuccess(), ajaxStop(), ajaxComplete() $(‘#msg’).ajaxSend(function(){ $(this).html(‘sending…’); }).ajaxComplete(function(){ $(this).html(‘complete!’) }); $(‘#msg’).bind(‘ajaxSend’, function(){ $(this).html(‘sending…’); })
19.
jQuery事件对象 jQuery对事件对象进行了规范 为什么要规范事件对象?
20.
21.
$(document).keyup(function(e){ console.log(e.keyCode); console.log(e.which);
}) $(document).click(function(e){ console.log(e.pageX, e.pageY); console.log(e.target); console.log(e.currentTarget); return false; });
22.
jQuery事件对象共49个成员 原始事件对象保存在originalEvent中
23.
F&Q 其他JS框架中优秀的方法在jQuery中有吗? 你还希望了解jQuery中哪些方法?
……
24.
谢谢! http://t.sina.com/okwxj
Télécharger maintenant