jQuery入门_02-Basics.ppt

1、- 1 -,jQuery入门,2012/12/24,Basics,- 2 -,目录,设计理念 Design Concept 基本语法 Basic Syntax 神奇的$() $(function(); jQuery对象和DOM对象 Getters $(expression, context) context参数默认值为document context参数应该是DOM对象，而不jQuery对象 $.func();,- 5 -,The Magic $() Function,jQuery() = $() window.jQuery = window.$ = jQuery; $(function) D

2、OM的Ready事件 $(document).ready(function); 的简写 $(selector) 元素选择器表达式 $(element) 直接指定元素 element为DOM对象时转换成为jQuery对象 $(HTML) 创建HTML元素 $.function() 执行一个jQuery函数 $.fn.myfunc() 创建一个jQuery函数,- 6 -,$(function();,自调用匿名函数 self-invoking anonymous function 通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。 (functio

3、n()(); (function()(); window.onload 必须等到页面内所有元素加载完毕后执行,只能设置成一个函数。 等价于：$(window).load(function (); $(document).ready() DOM结构绘制完后就执行,可同时设置多个不会被覆盖。 简写为：$(function();,- 7 -,jQuery Object and DOM Object,获取对象 （1）DOM对象 document.getElementById() （2）jQuery对象 $(选择器) 对象转换 （1）jQuery对象DOM对象 $jobj0 $jobj.get(0) （

4、2）DOM对象jQuery对象 $(domObj),- 8 -,Getters $(input:checkbox).val(opt1, opt2); Setter同时接受函数参数 $(a).attr(target, function() if (this.host = location.host) return _self else return _blank; / off-site links in a new window );,- 9 -,Getters ,- 11 -,Chaining,Chain Breakers var html = $(.).html().addClass(hel

5、lo) / Breaking, html() returns a string. / addClass method is undefined on a string,- 12 -,Stack Architecture,$(body)/body .find(p)/ p, p, p body .find(a)/a, a p, p, p body .addClass(foo) .end()/p, p, p body .end()/body,- 13 -,Conflict,将$控制权交出，之后可以使用jQuery jQuery.noConflict(); 自定义jQuery快捷方式 var $j = jQuery.noConflict(); 之后可以使用$j 将jQuery控制权也交出 var $jj = jQuery.noConflict(true); (fu