jQuery css方法和创建修改元素

添加单个样式

.css('background-color','#dddddd');

添加多个样式

.css({'background-color': '#dddddd', 'color': '#666666'});

多个样式书写规范

$('#celebs tbody tr:even').css({
'background-color': '#dddddd',
'color': '#666666',
'font-size': '11pt',
'line-height': '2.5em'
});

建议将css属性名,值都写在引号中。不这样做,可能会造成混淆。

创建元素时,添加属性及事件。包括正常html属性key/value,也可以添加事件处理程序。例:

$('
', { id: 'specialButton', text: 'Click Me!', click: function(){ alert("Advanced jQuery!") } }).insertBefore('#disclaimer');

text方法:为纯文本。
html方法:里面包含html标签。

jQuery animate、jQuery Easing简记

jquery动画属性,已经掌握了花哨的隐藏与显示,看一下如何发生的。要使用动画,传递一个对象(animate)包含的属性,动画指定为键/值对。

例:

$('p').animate({ 
  padding: '20px',
  fontSize: '30px'
}, 2000);

当您分配了多个相同的属性的CSS功能。有一点需要注意,你需要记住,属性名称必须是“驼峰”大小写才能使用的动画。如:backgroundColor、paddingLeft

$('#navigation li').hover(function() {
  $(this).animate({paddingLeft: '+=15px'}, 200);
}, function() {
  $(this).animate({paddingLeft: '-=15px'}, 200);
});

Easing:指在动画过程中所发生的加速和减速给它一个更自然的感觉。easing:(Optional) 用来指定切换效果,默认是”swing”,可用参数”linear”。

注:
swing 慢慢地摆动宽松政策开始前获得速度,然后对结束动画再次减慢,美观大方。
linear 就是一个线性的非缓动动画,没有加速或减速的动画出现以恒定的速率。

通过例子可以感觉到,linear的速度固定,而swing在开始和结束比较慢,与中间环节较快结合,比较流畅。

更多高级缓动效果,可用插件实现:
http://plugins.jquery.com/project/Easing
http://gsgd.co.uk/sandbox/jquery/easing/ 提供了近30种缓动效果。

jquery创建元素及插入页面方法

jQuery函数常用于选择,但它也有另一个同样重要的功能:创建新的元素。使用这种方法,你可以创建任何新的元素,你需要通过jQuery本身,而不是定义它们您的HTML标记。通过这种方式,我们可以完成我们的目标是逐步提高我们的页面可用性。

创建元素:$(‘<p>A new paragraph!</p>’)

创建了一个元素后,需要一种方式插入去到页面中。

$(A).insertAfter(B)
把所有匹配的元素A插入到另一个指定的元素B元素集合的后面。

$(A).insertBefore(B)
把所有匹配的元素A插入到另一个指定的元素B元素集合的前面。

$(A).prependTo(B);
将所匹配元素A插入到指定元素B中,并前置。

$(A).appendTo(B);
将所匹配元素A插入到指定元素B中,并后置。

注:A和B为jquery元素。

创建元素时,添加属性及事件。包括正常html属性key/value,也可以添加事件处理程序。例:

$('
', { id: 'specialButton', text: 'Click Me!', click: function(){ alert("Advanced jQuery!") } }).insertBefore('#disclaimer');