JavaScript大杂烩15 - 使用JQuery(下)

  前面我们总结了使用各种selector拿到了jQuery对象了,下面就是对这个对象执行指定的行为了。

2. 操作对象 - 行为函数action

  执行jQuery内置的行为函数的时候,JQuery自动遍历jQuery对象中包装的所有对象,依次在这些对象上执行指定的行为,直白的说,就是JQuery执行的是批量的操作,所以在JQuery中,默认情况下,是不需要强行的遍历包装对象,然后独自的执行指定的行为的。下面是常用的行为函数介绍。

1). 遍历jQuery对象

  虽然执行jQuery内置的方法的时候不需要遍历这个对象,但是有时候还是需要遍历一下执行某些自定义的操作的,看例子:

<ul id="items">
 <li>Item 1</li>
 <li>Item 2</li>
</ul>
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// 缓存jQuery对象,方便多次使用
var jObj = $(‘li‘);
// 获取jQuery对象包装的对象的个数
alert(jObj.length);
// 获取第1个DOM对象
alert(jObj[0]);
alert(jObj.get(0));
// 获取第1个jQuery对象
alert(jObj.eq(0));
// 遍历
jObj.each(function( index, element) {
  $(element).prepend( ‘<em>‘ + index + ‘: </em>‘ );
});
jObj.map(function( index, element) {
  $(element).prepend( ‘<em>‘ + index + ‘: </em>‘ );
});
</script>

  这个例子展示了jQuery对象与遍历相关的一些方法和属性,使用起来很简单。需要注意的是map方法的用法与each方法完全一样,区别在于each方法没有返回值,只是对每一个元素执行某种操作,而map方法返回一个新的jQuery对象。

2). DOM操作

  对于常见的CRUD操作,查询的操作已经由selector指定并通过$函数执行了,下面就看看元素,属性和CSS等对象的创建/更新/删除操作。

  再看下面例子之前有一个现象需要注意,那就是JQuery习惯于使用同一个函数完成读取值和设置值连个功能(大部分函数是这样的),不带参数的重载是读取指定的值的,带参数的重载是设置指定的值,在下面的例子中你会看到这个特点。

<ul id="items">
 <li>Item 1</li>
</ul>
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// 0. 缓存jQuery对象,方便多次使用
var jObj = $(‘#items‘);
// 1. 获取元素的内容 - HTML形式与Text形式
alert(jObj.html());
alert(jObj.text());
// 2. 更新元素的内容 - 运行一下,体会使用html方法与text方法后,页面对于字符串的编码的不同
alert(jObj.html(‘<li>Item 2</li>‘).html());
alert(jObj.text(‘<li>Item 2</li>‘).html());
// 3. 添加新的子元素 - 体会一下append与appendTo的不同、prepend与prependTo的不同
jObj.append(‘<li>Item 3</li>‘);
$(‘<li>Item 4</li>‘).appendTo(jObj);
jObj.prepend(‘<li>Item 5</li>‘);
$(‘<li>Item 6</li>‘).prependTo(jObj);
// 4. 添加兄弟元素 - 体会一下after与insertAfter的不同、before与insertBefore的不同
jObj.after(‘<ol id="itemsClone1"><li>Item 7</li><ol>‘);
$(‘<ol id="itemsClone2"><li>Item 8</li><ol>‘).insertAfter(jObj);
jObj.before(‘<ol id="itemsClone1"><li>Item 7</li><ol>‘);
$(‘<ol id="itemsClone2"><li>Item 8</li><ol>‘).insertBefore(jObj);
// 5. 处理父元素
// - wrap方法:把包装集中每个元素都包装到一个指定的元素中
// - wrapAll方法:把包装集中所有元素包装到同一个指定的元素中
// - unwrap方法:移除当前元素的父元素。
// - wrapInner方法:为当前元素的所有子元素,添加一个父元素。
$(‘ul‘).wrap(‘<div style="color:Red"></div>‘);
$(‘ul‘).wrapAll(‘<div style="color:Red"></div>‘);
$(‘ul‘).unwrap();
$(‘ul‘).wrapInner(‘<strong></strong>‘);
// 6. 复制元素 - clone方法,包括id也会复制,所以通常clone完以后需要修改一下id以保证id唯一性
jObj.after(jObj.clone());
// 7. 移除元素
// - remove方法:移除元素,包括其挂接的事件
// - detach方法:移除元素,但保留挂接的事件
// - replaceWith方法:元素替换
$(‘li‘).remove();
$(‘li‘).detach();
$(‘li‘).replaceWith(‘<p>Items</p>‘);
// 8. 获取/设置/移除属性值
// 8.1 DOM对象的属性(property,如tagName,nodeName,className等)
// - 由于jQuery对象可以很容易转换成DOM对象,所以第一种方式就是直接取得DOM对象执行操作
// 这个例子在前面讲DOM操作的时候看过了,这里不再重复。
// - 第二种方式就是在JQuery中直接设置/获取DOM对象的属性值,看下面的例子:
$(‘li‘).prop(‘className‘, ‘big‘)
alert($(‘li‘).prop(‘className‘));

// 8.2 页面HTML元素的属性(attribute,如id,class,src等)
$(‘li‘).attr(‘title‘,‘tooltip...‘);
alert($(‘li‘).attr(‘title‘));
// 9. 获取/设置/移除CSS
// 9.1 addClass方法,removeClass方法,toggleClass方法
// - addClass方法用于添加一个class名字
// - removeClass方法用于移除一个class名字
// - toggleClass方法用于添加/删除一个class名字(如果无就添加,如果有就移除)。
$(‘li‘).addClass(‘special‘)
$(‘li‘).removeClass(‘special‘)
$(‘li‘).toggleClass(‘special‘)
// 9.2 css方法
// - css方法用于获取/改变CSS设置。
// 获取fontSize
$(‘h1‘).css(‘fontSize‘);
// css方法的参数是css属性名。
// 需要注意,CSS属性名的CSS写法和DOM写法,两者都可以接受,比如font-size和fontSize都行。

// 设置css属性
$(‘li‘).css(‘padding-left‘, ‘20px‘)
// 或者
$(‘li‘).css({
  ‘padding-left‘: ‘20px‘
});

// 10. 自定义数据利器 - data方法
// 储存数据
$("body").data("foo", 52);
// 读取数据
alert($("body").data("foo"));
</script>

3). 事件响应

  事件机制前面我们也讲过了,在JQuery中,设置事件有两种方式:

第一种,直接挂接相关的事件,例如以下几类:

click,focus,blur,scroll,resize
keydown/keypress/keyup
mouseover/moouseout/mouseenter/mouseleave/hover

  简单看个例子:

// 设置回调函数
$(‘li‘).click(function (e) {
  alert($(this).text());
});
// 主动的去触发回调函数
$(‘li‘).click();

  上面最后一行代码将触发click事件的回调函数。

  需要注意的是,通过这种方法触发回调函数,将不会引发浏览器对该事件的默认行为。比如,对a元素调用click方法,将只触发事先绑定的回调函数,而不会导致浏览器将页面导向href属性指定的网址。

地位超然的$(document).ready事件

  在众多的这类事件中,这个事件无疑是最常用的一个,当页面解析完成(即下载完</html>标签)以后,在所有外部资源(图片、脚本等)完成加载之前,该函数就会立刻运行,这是一个初始化逻辑执行的很好的一个时机。

  $(document).ready方法接受一个函数作为参数,将该参数作为document对象的DOMContentLoaded事件的回调函数。看例子:

$( document ).ready(function() {
  alert(‘ready!‘);
});
// 等价写法
$(function() {
  alert(‘ready!‘);
});

  上面代码表示,一旦页面完成解析,就会运行ready方法指定的函数,在控制台显示“ready!”。

  需要说明的是,jQuery的ready事件和传统的JavaScript中onload方法功能接近,但前者优于onload。因为传统的onload方法必须等页面中的图片加载完才执行,而ready当在页面DOM加载完毕后就执行了,比较精确。

第二种,使用on,trigger,off,one方式(忘记过气的bind,delegate,live方法吧)

  我相信on方法是绑定事件的核心方法,上面那些简单挂接的方法都可以使用on方法实现,看个例子:

$(‘li‘).on(‘click‘, function (e) {
  alert($(this).text());
});

  on方法相当强大,使用它不仅一次可以挂接一个事件,还可以做很多事情,看下面的例子:

// 同时挂接click与mouseleave事件
$(‘li‘).on(‘click mouseleave‘, function (e) {
  alert($(this).text());
});
// 给回调函数传额外的参数
$(‘li‘).on(‘click‘, {name: ‘clicked‘}, function (event){
    alert(event.data.name);
});
// 给子元素挂事件
$(‘ul‘).on(‘click‘, ‘li‘, function (e){
  alert($(this).text());
});

  这里由两点需要说明:

  第一点,上面最后一个给子元素挂事件的例子,这种方式click事件还是在ul元素上触发回调函数,但是会检查event对象的target属性是否为li子元素,如果为true,再调用回调函数。这样就比为li元素一一绑定回调函数,节省了内存空间。正式由于是在ul上检查的,这种绑定的回调函数,对于在绑定后新生成的li元素依然有效。

  第二点,回调函数的参数e,就代表事件对象event,这个与DOM回调中的event对象类似,也有type, which, target, data, pageX, pageY等属性和preventDefault, stopPropagation等方法,不再多说了。

  trigger方法就很简单了,就是触发事件:

$(‘li‘).trigger(‘click‘);

  该方法同样不触发浏览器的默认行为。

  off方法用于取消事件的回调函数:

$(‘li‘).off(‘click‘);

  one方法设置了事件之触发一次,执行完一次后事件回调函数就被注销了:

$(‘li‘).one(‘click‘, function (e) {
  alert($(this).text());
});

  one这种方式特别适合提交表单的情况,这样即使用户多次点击也不会破坏程序。

4). 动画与特效

  jQuery提供一些方法,可以很容易地显示网页动画效果。但是,总体上来说,它们不如CSS动画强大和节省资源,所以应该优先考虑使用CSS动画,例如像BootStrap这种超级CSS模板,提供了很多强大的特效。

第一种动画:简单特效

  jQuery提供以下一些动画效果方法。

show/hide/toggle:显示/隐藏当前元素。
fadeIn/fadeOut:淡入/淡出特效。
slideDown/slideUp/slideToggle:以从上向下滑入/从下向上滑出的方式显示当前元素。

  上面这些方法可以不带参数调用,也可以接受毫秒或预定义的关键字作为参数。

$(‘li‘).show();
$(‘li‘).show(300);
$(‘li‘).show(‘slow‘);

  上面三行代码分别表示,以默认速度、300毫秒、较慢的速度隐藏一个元素。

  jQuery预定义的关键字是在jQuery.fx.speeds对象上面,可以自行改动这些值,或者创造新的值。

jQuery.fx.speeds.fast = 50;
jQuery.fx.speeds.slow = 3000;
jQuery.fx.speeds.normal = 1000;

  上面三行代码重新定义fast和slow关键字对应的毫秒数,并且自定义了normal关键字,表示动画持续时间为1000毫秒。

  当然了,你可以定义自己的关键字。

jQuery.fx.speeds.blazing = 30;
// 调用
$(‘.hidden‘).show(‘blazing‘);

  这些方法还可以接受一个函数,作为第二个参数,表示动画结束后的回调函数。

$(‘p‘).fadeOut(300, function() {
  $(this).remove();
});

  上面代码表示,p元素以300毫秒的速度淡出,然后调用回调函数,将其从DOM中移除。

第二种动画:自定义特效 - animate方法

  上面这些简单特效,实际上都是animate方法的简便写法。在幕后,jQuery都是统一使用animate方法生成各种动画效果。animate方法接受三个参数:

$(‘div‘).animate({
    left: ‘+=50‘, // 增加50
    opacity: 0.25,
    fontSize: ‘12px‘
  },
  300, // 持续事件
  function() { // 回调函数
     console.log(‘done!‘);
  }
);

  上面代码表示,animate方法的第一个参数是一个对象,表示动画结束时相关CSS属性的值,第二个参数是动画持续的毫秒数,第三个参数是动画结束时的回调函数。需要注意的是,第一个参数对象的成员名称,必须与CSS属性名称一致,如果CSS属性名称带有连字号,则需要用“驼峰拼写法”改写。

动画的延迟执行 - delay方法

  delay方法接受一个时间参数,表示暂停多少毫秒后继续执行。

$(‘#foo‘).slideUp(300).delay(800).fadeIn(400);

  上面代码表示,slideUp动画之后,暂停800毫秒,然后继续执行fadeIn动画。

动画的停止 - stop方法/off属性

  stop方法表示立即停止执行当前的动画。

$(‘#stop‘).click(function() {
  $(‘.block‘).stop();
});

  上面代码表示,点击按钮后,block元素的动画效果停止。

  如果想要停止所有动画效果,则需要将jQuery.fx.off设为true,这样就使得网页元素的各种变化一步到位,没有动画效果。

5). AJAX

  使用原生的AJAX去获取数据的例子大家都尝试过了吧,写起来是不是很麻烦?兼容性问题是不是很烦人?有了JQuery,一切变得相当简单。

  AJAX的核心就是异步与回调,下面我们先看一下最强大,也最低层的$.ajax方法。看个小例子:

$.ajax({
  type: ‘POST‘,
  url: ‘some.php‘,
  data: { name: ‘John‘, location: ‘Boston‘ }
}).done(function( msg ) {
    alert( ‘Data Saved: ‘ + msg );
  });

  这是使用了POST方式去更新数据的小例子,从这个例子中可以看出使用JQuery的ajax方法还是相当直接的,这个函数可以传入很多的设置,这些设置完成了许多不同的功能,比如跨域获取数据,是否异步等等,完整的设置可以参看官方文档:http://api.jquery.com/jQuery.ajax/#options,这里就不多说了。

  由于ajax函数返回了XHR对象(在1.5版本后返回jqXHR对象,是XHR的超集,拥有更多的方法和事件),所以我们可以使用链式调用去完成我们的功能。

  实际上,对于大部分的数据操作来说,常用的就是那么几种,比如获取一份json数据,更新页面数据等等,JQuery对ajax方法在这些场景中的使用进行了简化,提供了更加简洁的函数,比如下面几个:

// 使用http get方法向server申请一份数据
// jQuery.get( url, [data], [callback], [type] )
$.get( ‘ajax/test.html‘, function( data ) {
  $( ‘.result‘ ).html( data );
  alert( ‘Load was performed.‘ );
});
// 获取json数据的快捷方法:jQuery.getJSON( url, [data], [callback] )
// 方法相当于jQuery.get(url, [data],[callback], ‘json‘)
// getJSON函数将get函数的type参数设置为‘JSON‘,在回调函数中获取的数据已经是按照JSON格式解析后的对象了。
$.getJSON(‘Sample.aspx‘, { ‘resultType‘: ‘json‘ }, function(data, textStatus)
{
  alert(data.length);
});

// 获取并执行一段脚本的快捷方法:jQuery.getScript( url, [callback] )
// 方法相当于: jQuery.get(url, null, [callback], ‘script‘)
$.getScript(‘../scripts/Sample.js‘, function(data, textStatus)
{
  alert(data);
  alert(textStatus);
});
// 使用http post方法向server申请一份数据
$.post( ‘ajax/test.html‘, function( data ) {
  $( ‘.result‘ ).html( data );
});
// 使用load方法直接获取一个页面信息,然后更新当前元素
// 默认使用GET方式, 如果传递了data参数则使用Post方式
$(‘#divResult‘).load(‘data/AjaxGetCityInfo.aspx‘, { ‘resultType‘: ‘html‘ });

6). 元素图形学

  使用JQuery可以轻易的获取元素的宽高,位置等信息,

// height/width/innerHeight/innerWidth/outerHeight/outerWidth
// 上述函数取值时得到的都是以px为单位的值,设置值的时候默认单位是px,此外可以是em或者是%
$(‘li‘).height();
$(‘li‘).height(20);
// offset/position 获取当前元素相对于窗口的偏移和相对于父元素的偏移(只对可见元素有效)
$(‘li‘).offset();
$(‘li‘).position();
// scrollTOP/scrollLeft/
// 获取/设置当前元素相对滚动条顶部/左边的偏移。此方法对可见和隐藏元素均有效。
$("div.demo").scrollTop();
$("div.demo").scrollTop(300);

  这里需要弄清楚的一点就是height, innerHeight, outerHeight的区别,这个可以通过下面的图来说明:

  除了这些核心的东西,下面这些组件或方法也是JQuery重要的组成部分:

1. 工具方法

  JQuery提供了很多的方法来弥补原生JavaScript的缺陷,在ECMAScript 5中,已经加入了大部分类似方法,我们使用这些方法可以很方便的完成类似于"去除首尾空白字符($.trim)","遍历($.each, $.map)","筛选 ($.grep)","类型判断 ($.isArray, $.isFunction, $.inArray, $.isNumeric, $.isEmptyObject, $.isPlainObject)", "字符串解析 ($.parseJSON, $.parseXML, $.parseHTML)"等功能,这里就不一一列举了,详细的列表请查看:http://api.jquery.com/category/utilities/

2. JQuery UI

  JQuery UI是jQuery的一部分,它是在jQuery之上的一套专门用于UI交互的类库。 JQuery UI可以方便的实现底层交互,各种高级特效和动画,并且可定制主题(一整套特效)。我们可以用它轻松的构建高度交互的Web应用程序。这个就不多说了,大家量才录用吧 - 官方首页: http://jqueryui.com/

  值得一提的是,jQuery UI的在线网站十分强大,在下载时可以组装自己想要的功能定制下载,这样能有效控制类库文件的大小。

参考资料:

JQuery官方网站:http://api.jquery.com/

JQueryUI官方网站:http://jqueryui.com/

W3C标准教程:http://www.w3school.com.cn/jquery/index.asp

阮一峰同志的精彩总结:http://javascript.ruanyifeng.com/jquery/basic.html

一个全面的教程:http://kb.cnblogs.com/page/46450/

JavaScript大杂烩15 - 使用JQuery(下)

时间: 2024-10-08 03:47:14

JavaScript大杂烩15 - 使用JQuery(下)的相关文章

JavaScript(15)jQuery 选择器

jQuery 选择器 选择器允许对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器允许通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器允许对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 &

JavaScript大杂烩14 - 使用JQuery(上)

JQuery意义 - Why? 为什么要使用JQuery,从我个人来说,就是这么几点:简化代码 + 统一行为 + 功能强大 + 搭配方便. 简化代码是从写代码的角度来说的,实现同样的功能,如果用JavaScript内置对象和函数去完成的话,需要写很多代码,而使用JQuery这种类库却很简洁,下面的例子会体现出来. 统一行为是从浏览器的兼容性的角度来说的,实现一个行为,如果用JavaScript内置对象和函数去完成的话,需要处理很多的兼容性问题,这个在前面我们已经见识过了,使用JQuery这种类库

JavaScript大杂烩16 - 推荐实践

JavaScript部分 1. 总是使用===来进行相等判断 原因:由于 == 和 != 操作符存在类型转换问题,而为了保持代码中数据类型的完整性,推荐使用全等 === 和不全等 !=== 操作符. 2. 总是使用";"来结束一条语句 原因:JavaScript允许不使用";"来结束语句,当没发现";"的时候,JavaScript会自己判断何时是语句结束了,这种不确定性大大的提高了出错的几率,所以请严格要求自己,使用";"结束

JavaScript大杂烩6 - 理解JavaScript中的this

在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this). JavaScript中的this关键字通常只使用在函数中,它指向当前函数的调用者,这是this关键字的本质,所有的使用方式都是围绕这个展开的,让我们来看一下在各种性质的函数中this的用法.1. 在对象的函数中使用this var person = { name: 'Frank', say: f

JavaScript大杂烩13 - 总结ECMAScript 5新功能

虽说这个标准已经出来很久了,所有的主流浏览器的最新版本也都支持了这些特性,但是很多的教程中并没有包含这个部分,这一节我们专门来总结一下这个标准中的新功能. Object的新方法 在最新的JavaScript规范(ECMAScript 5)中,Object扩展了很多不错的静态方法,下面来简单看一下: 1. create/getPrototypeOf方法 - 干净的原型链 先说简单的getPrototypeOf方法,这个方法统一了获取对象原型的方式,使用这个对象可以获取到对象的原型,这个不多说了.

JavaScript大杂烩7 - 理解内置集合

JavaScript内置了很多对象,简单的类型如String,Number,Boolean (相应的"值类型"拥有相同的方法),复杂一点的如Function,Object,Array,它们支撑起来JavaScript编程的基石.由于Number与Boolean很简单,这里就不多说了,下面着重介绍其他的内置对象. 万物之源 - Object对象 JavaScript是单根的,唯一的根就是Object对象,这个对象提供了几个还是不错的方法,值得了解一下. 1. hasOwnProperty

JavaScript大杂烩9 - 理解BOM

毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript不仅仅包含基本的语法规范.下面我们就重点看一下JavaScript在页面中干的那些事.总的来说,JavaScript在页面端就干两件事:操作DOM与操作BOM (当然了向Server获取数据也是它的工作,不过获取到数据后还是回来干这两件事,大家对JavaScript最直接的印象应该就是各种光怪陆离的

JavaScript大杂烩17 - 性能优化

在上一节推荐实践中其实很多方面是与效率有关的,但那些都是语言层次的优化,这一节偏重学习大的方面的优化,比如JavaScript脚本的组织,加载,压缩等等. 当然在此之前,分析一下浏览器的特征还是很有意义的. 浏览器的特征1. 浏览器的渲染过程 在详细讨论脚本文件的优化前,我们先来看一下浏览器是如何渲染一个HTML页面的. 当浏览器渲染一个HTML页面的时候,它总是从页面的开始位置按顺序向页面末尾依次渲染,当页面遇到引用外部文件的时候(JavaScript脚本,CSS文件等),页面渲染就会停下来等

50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段

50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段 本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中! 1. 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ ajaxSetti