$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
jQuery 元素选择器
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
$("p").css("background-color","red");
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery 事件
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
jQuery toggle()
$("button").click(function(){
$("p").toggle();
});
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery 效果 - 滑动
<p class="flip">请点击这里</p>
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
相反就是slideUp()，综合slideToggle
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
slideDown() 方法$(selector).slideDown(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
动画
$(selector).animate({params},speed,callback);
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - 使用预定义的值
$("button").click(function(){
$("div").animate({
height:'toggle'
});
}
动画animate() - 使用队列功能
jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
stop() 方法用于在动画或效果完成前对它们进行停止。
jQuery 方法链接
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
获取属性 - attr()
$("button").click(function(){
alert($("#w3s").attr("href"));
});
添加
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
如果 <p> 的父元素是 <div> 元素，弹出提示信息:
if ($("p").parent().is("div")) {
alert("p 的父元素是 div");
}
选择 <body> 元素中每个可见的元素：
$("body :visible")
网友评论