JQuery
This presentation is the property of its rightful owner.
Sponsored Links
1 / 43

jQuery PowerPoint PPT Presentation


  • 235 Views
  • Uploaded on
  • Presentation posted in: General

jQuery. jQuery. jQuery. jQuery. 所有网站中: 每 10 个,就有 6 个使用 jQuery 使用 工具库的 网站中: 每 10 个,就有 9 个使用 jQuery. 什么是 jQuery. jQuery 是 javascript 一个封装得非常好的类 ,封 装 了 jQuery 的一系列 方法。 比如: $( " # btn " ) = jQuery 类的实例 $("# btn ").show () = jQuery 方法. jQuery 优点.

Download Presentation

jQuery

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Jquery

jQuery


Jquery

jQuery


Jquery

jQuery


Jquery

jQuery

所有网站中:

每 10个,就有 6个使用 jQuery

使用工具库的网站中:

每 10个,就有 9个使用 jQuery


Jquery

什么是 jQuery

jQuery 是 javascript一个封装得非常好的类,封

装了 jQuery 的一系列方法。

比如:

$("#btn") = jQuery 类的实例

$("#btn").show() = jQuery 方法


Jquery

jQuery优点

  • write less, do more / 简洁易用

  • 兼容主流浏览器( IE, FF, Safari, Chrome…)

  • 插件丰富(OsChina:1000+)

  • 开源免费

  • 文档详尽


Jquery

jQuery使用准备

在需要使用 jQuery 的页面中引入 jQuery 的 js文

件即可。例如:

<script type="text/javascript"src="js/jquery.js">

</script>

引入之后便可在页面的任意 js区域使用 jQuery 提

供的语法。


Jquery

jQuery基本语法

jQuery 使用“$()” 通过元素的 id、class、元素名

以及元素的层级关系等方式引用元素,并返回 jQuery

对象,只有 jQuery 对象才能使用 jQuery 定义的

方法。

jQuery 不能直接调用 dom定义的方法。


Jquery

jQuery

核心功能


Jquery

核心功能选择网页元素

  • $(document) //整个文档对象

  • $('#myId') //ID为myId的网页元素

  • $('div.myClass') // class为myClass的div

  • $('a:first') //网页中第一个a元素

  • $('tr:odd') //选择表格的奇数行

  • ……


Jquery

核心功能改变选择结果集

  • $('div').next('p'); //div后面的第一个p元素

  • $('div').parent(); //div元素的父元素

  • $('div').closest('form'); //离div最近form

  • $('div').children(); //div的所有子元素

  • $('div').siblings(); //div的同级元素

  • ……


Jquery

核心功能元素取赋值

  • 使用同一个函数,来完成取值(getter)和赋值

  • (setter),即“取值器”与“赋值器”合一。

  • 取出或设置 text 内容:

  • .text() / .text("设置内容")

  • 取出或设置元素的属性值:

  • .attr() / .attr("width","180")


Jquery

核心功能元素移动

  • 第一种方法是使用 .insertAfter(),把 div 元素

  • 移动 p 元素后面:

  • $('div').insertAfter($('p'));

  • 第二种方法是使用 .after(),把 p 元素加到 div

  • 元素前面:

  • $('p').after($('div'));


Jquery

核心功能元素增删

  • 删除元素使用:.remove()

  • 清空元素内容:.empty()

  • 创建新元素:.append()


Jquery

核心功能链式操作

  • 在 jQuery 中,一切对象皆为 jQuery,任何扩展的

  • 方法/功能必须按照约定返回自身(jQuery 对象),

  • 因此许多功能都能通过追加“.”操作一步到位。

  • $('div').find('h3').eq(2).html('Hello');

  • $('div') //找到div元素

  • .find('h3') //选择其中的h3元素

  • .eq(2) //选择第3个h3元素

  • .html('Hello'); //将它的内容改为Hello


Jquery

核心功能事件操作

  • 将事件直接绑定在网页元素之上:

  • .blur() 表单元素失去焦点。

  • .change() 表单元素的值发生变化

  • .click() 鼠标单击

  • .dblclick() 鼠标双击

  • .ready() DOM加载完成

  • .unload() 用户离开页面


Jquery

核心功能工具方法

  • 提供与元素无关的工具方法:

  • $.each() 遍历一个数组或对象

  • $.inArray() 返回值在数组中的索引位置

  • $.trim() 去除字符串两端的空格

  • $.isEmptyObject() 判断某个对象是否为空

  • $.support() 判断浏览器是否支持某个特性

  • ……


Jquery

核心功能特效

  • 简单方法实现动态特效:

  • .fadeIn() 淡入

  • .fadeOut() 淡出

  • .fadeTo() 调整透明度

  • .hide() 隐藏元素

  • .show() 显示元素

  • ……


Jquery

jQuery

插件编写


Jquery

核心功能插件编写

类级别的插件开发。即给 jQuery 添加新的全局函数

,相当于给 jQuery 类本身添加方法:

jQuery.extend(object);


Jquery

核心功能插件编写

对象级别的插件开发,即给 jQuery 对象添加方法:

jQuery.fn.extend(object);


Jquery

核心功能插件编写示例

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val());

});

}

});

$("#input1").alertWhileClick();


Jquery

核心功能命名空间

jQuery.myPlugin = {

foo:function() {

alert('This is a test.');

},

bar:function(param) {

alert('This takes a parameter.');

}

};


Jquery

核心功能命名空间

  • 调用时采用的方法:

  • $.myPlugin.foo();

  • $.myPlugin.bar('baz');

  • jQuery 的全局函数就是属于 jQuery 命名空间

  • 的函数


Jquery

核心功能类库冲突

当引用的其他类库也定义了“$”方法,如果

同时把这些内容放在一起就会引起变量方法定

义冲突,jQuery 对此专门提供了方法用于解决

此问题。


Jquery

核心功能解决类库冲突

使用 jQuery 中的 jQuery.noConflict(); 即可把

变量 $ 的控制权让渡给第一个实现它的那个库或

之前自定义的 $ 方法。

之后应用 jQuery 的时候只要将所有的 $ 换成

jQuery 即可,如原来引用对象方法 $('#msg')

改为 jQuery('#msg')。


Jquery

jQuery

最佳实践


Jquery

最佳实践使用最新版本


Jquery

最佳实践使用最新版本

  • 2013年4月18日 jQuery 2.0正式版发布:

  • 不再支持IE 6/7/8

  • 更轻更快:2.0版本文件与1.9.1相比小了12%

  • jQuery 2.0 API完全兼容jQuery 1.9 API

  • jQuery 团队将同时支持 1.x / 2.x,jQuery 1.9 会继

  • 续支持 IE 6/7/8。


Jquery

最佳实践用对选择器


Jquery

最佳实践用对选择器

  • 最快:id选择器和元素标签选择器

  • jQuery 内部会自动调用浏览器的原生方法:getElementById()

  • 较慢:class选择器

  • IE5-IE8 都没有部署这个方法,所以这个选择器在IE中会相当慢

  • 最慢:伪类选择器和属性选择器

  • 浏览器没有针对它们的原生方法


Jquery

最佳实践不要过度使用

  • NO:

  • $(this).attr('id')

  • YES:

  • this.id


Jquery

最佳实践做好缓存

  • NO:

  • jQuery('#top').find('p.classA');

  • jQuery('#top').find('p.classB');

  • YES:

  • varcached = jQuery('#top');

  • cached.find('p.classA');

  • cached.find('p.classB');


Jquery

最佳实践使用链式写法

  • $('div').find('h3').eq(2).html('Hello');

  • 采用链式写法时,jQuery自动缓存每一步的结果,

  • 因此比非链式写法要快。根据测试,链式写法比

  • (不使用缓存的)非链式写法,大约快了25%。


Jquery

最佳实践事件委托处理

比如,有一个表格(table元素),里面有 100

个格子(td元素),现在要求在每个格子上面绑

定一个点击事件(click),请问是否需要将下面

的命令执行 100 次?

$("td").on("click", function(){

$(this).toggleClass("click");

});


Jquery

最佳实践事件委托处理

我们只要把这个事件绑定在 table 元素上面就可以

了,因为 td 元素发生点击事件之后,这个事件会

“冒泡”到父元素 table 上面,从而被监听到。

$("table").on("click", "td", function(){

$(this).toggleClass("click");

});


Jquery

最佳实践事件委托处理

比较:

$("td").on("click", function(){

$(this).toggleClass("click");

});

$("table").on("click", "td", function(){

$(this).toggleClass("click");

});


Jquery

最佳实践选择最短作用域链

读取变量的时候,先在当前作用域寻找该变量,如

果找不到,就前往上一层的作用域寻找该变量。这

样的设计,使得读取局部变量比读取全局变量快得

多。


Jquery

最佳实践选择最短作用域链

NO:

vara = 0;

function x(){

a += 1;

}

YES:

function y(){

vara = 0;

a += 1;

}


Jquery

jQuery扩展阅读

jQuery 基金下其他项目:

  • i2shopping 使用的部分 jQuery 插件:

  • jBox

  • Bgiframe

  • AjaxQueue


Jquery

jQuery

THANKS!

武良呈


Jquery

  • jQuery 扩展资料

jQuery1.8.3 api文档


Jquery

  • jQuery 扩展资料

jQuery 入门学习站点:

http://www.w3school.com.cn/jquery/index.asp

jQuery 官网:

http://jquery.com

jQuery 官方 API 文档:

http://api.jquery.com


  • Login