$("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")
;
});