首页 > 代码库 > jQueryInAction Reading Note 5.
jQueryInAction Reading Note 5.
$(function(){ $(‘li:has(ul)‘) .click(function(event){ if (this == event.target){ if($(this).children().is(‘:hidden‘)){ $(this) .css(‘list-style-image‘, ‘url(minus.gif)‘) .children().show(); } else { $(this) .css(‘list-style-image‘, ‘url(plus.gif)‘) .children().hide(); } }
return false; }) .click() .css(‘cursor‘,‘pointer‘); $(‘li:not(:has(ul))‘) .css({‘cursor‘:‘default‘, ‘list-style-image‘:‘none‘}); });
- $(function(){// DOM加载完成之后执行的代码});
- $(‘li:has(ul)‘) VS. $(‘li:not(:has(ul))‘),他俩是一个if-else分支;
- event.target,由于DOM level 0的冒泡机制,这个事件会向上传递,可能会导致其父元素的事件发生,所以this == event.target是很有必要的;
- 想要使用jQuery的方法,必须要封装出一个包装集,$(this)也不例外;
- 如果设置一个css属性的值.css(‘key‘,‘value‘)即可,如果同时设定多个的话,需要.css({‘key1‘:‘value1‘, ‘key2‘:‘value2‘});
- 如果一个css的key不是一个单词的话,要用引号引起来;
- 不要尝试着在页面初始化的时候把某些元素隐藏,而应该在DOM加载完成的时候通过jQuery来完成。
- return false;能够阻止程序的传递(避免不必要的传播)。
jQuery动画方法总结
show(speed, callback), hide(speed, callback), toggle(speed, callback)
fadeIn(speed, callback), fadeOut(speed, callback), fadeTo(speed, opacity, callback)
slideDown(speed, callback), slideUp(speed, callback), slideToggle(speed, callback)
speed : slow, normal, fast, x
用slow等的时候需要加引号‘‘或""
callback : 回调函数,函数没有参数,但是函数拥有对当前操作对象的引用,用this来获取
stop()
没有参数,返回包装集,当调用jQuery动画的过程中,调用stop()的话会停止正在运行的动画,保持不变。
animate(animat:动画,animate:有生命的,也就设计会动的)
animate(properties, duration, easing, callback)
properties: 一个散列对象,也就是{property1: value1, property2: value2}
duration: slow, normal, fast, x
easing: linear, swing, 别多想了,会这俩就不错了
callback: 回调函数,没有参数,拥有对当前对象的引用,也就是this
animate(properties, options)
properties: 散列对象,跟上面一样
options: 也是一个散列对象,只不过只能包含duration,easing,complete(指定回调函数),queue(是否串行)
修改元素的位置相关的属性时,可能会用到一个Dimensions插件,它提供一个position()方法,用来获取当前对象在浏览器中的left和top的值。
并且有时需要指定css的position属性的值,一般为absolute和relative两种。
$(this).css({position: ‘absolute‘, top: 20, left: 20})
在不指定postion的情况下,top和left的值是没有意义的。