jquery

$("ul li:first")表示每个 <ul> 的第一个 <li> 元素

$("#intro")表示id="intro" 的第一个元素

$("div#intro .head")表示id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 拥有以下滑动函数：

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

jQuery 自定义动画

jQuery 函数创建自定义动画的语法：

$(selector).animate({params},[duration],[easing],[callback])

关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性：

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"})

jQuery Callback 函数

当动画 100% 完成后，即调用 Callback 函数。

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

改变 HTML 内容

语法

$(selector).html(content)

html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。

函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值：

实例

$(selector).css({properties})
$("p").css({"background-color":"red","font-size":"200%"});

jQuery Size 操作

jQuery 拥有两种用于尺寸操作的重要函数：

• $(selector).height(value)
• $(selector).width(value)

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

.class.class

$(".intro.demo")

所有 class="intro" 且 class="demo" 的元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

 $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });

替代语法

$(selector).bind({event:function, event:function, ...})

jQuery 事件 - change() 方法

当输入域发生变化时改变其颜色：

$(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
});

pageX() 属性是鼠标指针的位置，相对于文档的左边缘。

语法

event.pageX

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。

注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。

one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

当用户点击链接离开本页时，弹出一个消息框：

$(window).unload(function(){
  alert("Goodbye!");
});

unbind()从匹配元素移除一个被添加的事件处理器

在每个 p 元素结尾插入内容：

$("button").click(function(){
  $("<b>Hello World!</b>").appendTo("p");
});

向第一个 p 元素添加一个类：

$("button").click(function(){
  $("p:first").addClass("intro");
});

设置所有 p 元素的内容：

$(".btn1").click(function(){
  $("p").html("Hello <b>world</b>!");
});

检查第一个 <p> 元素是否包含 "intro" 类：

$("button").click(function(){
  alert($("p:first").hasClass("intro"));
});

用粗体文本替换每个段落：

$(".btn1").click(function(){
   $("p").replaceAll("<b>Hello world!</b>");
});

设置输入域的值：

$("button").click(function(){
  $(":text").val("Hello World");
});