选择器
语法 说明
$(“*”) 选择所以元素
$(this) 选择当前元素
$(“p.intro”) 选项所有class=intro的p元素
$(“p:first”) 选择第一个p元素 www.2cto.com
$(“ul li:first”) 选择第一个<ul>元素的第一个<li>元素
$(“ul li:first-child”) 选择每个<ul>的第一个 元素
$(“[href]“) 选择所有带href的元素
$(“a[target=‘_blank‘]“) 选择所有target=_blank的a元素
$(“a[target!=‘_blank‘]“) 选择所有target！=_blank的a元素
$(“:button”) 选择所有button元素及input类型为button的元素
$(“tr:even”) 选择所有偶数行<tr>元素
$(“tr:odd”) 选择所有单数行<tr>元素
常见的DOM事件：
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
隐藏或者显示的语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的参数speed 给出显示或隐藏内容的速度，可以使用“slow”,”fast”或者数字代表微秒。
第二个可选参数为回调函数，在显示或隐藏结束时调用
Query 提供了下面几种方法可以实现显示的淡入淡出效果：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
fadeIn()方法
fadeTo() 实现淡化到指定的透明度，其基本语法如下：
$(selector).fadeTo(speed,opacity,callback);
必需参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个必须参数为透明度，值域为0到1之间。www.2cto.com
可选参数为回调函数，在fadeIn()方法结束后调用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery练习</title>
<script src="Jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//$(unction(){});
$(document).ready(function() {
// $("#s1").hide();
$(‘#s1‘).click(function() {
$(‘*‘).hide();
});
$(‘#s2‘).dblclick(function() {
//双击事件
$(‘.l1‘).hide();
});
//鼠标进入
$(‘#s1‘).mouseenter(function() {
$(‘.l2‘).hide();
//鼠标离开
}).mouseleave(function() {
$(‘.l2‘).show();
});
//鼠标按下
$(‘#s3‘).mousedown(function() {
$(‘.l3‘).hide();
//鼠标松开
}).mouseup(function() {
$(‘.l3‘).show();
});
//hover()在鼠标指针放在某个元素之上时触发，为mouseenter和mouseleave的组合，它的第一个回调函数中鼠标进入时调用，第二个回调函数在鼠标离开时执行，
$(‘#s4‘).hover(function() {
$(‘.l4‘).hide();
}, function() {
$(‘.l4‘).show();
});
//focus()
//当某个表单输入域获得焦点时调用
//blur()
// 当某个表单输入域失去焦点时调用
$("#t1").focus(function() {
$(".l5").hide();
}).blur(function() {
$(".l5").show();
});
//toggle()方法，可以实现交替显示和隐藏内容
$(‘#s5‘).click(function() {
$(‘.l6‘).toggle(3000);
});
//fadeIn() 实现淡入效果
$(‘#s6‘).click(function() {
alert(‘1‘);
$(‘.l10‘).fadeIn();
$(‘.l11‘).fadeIn(‘slow‘);
$(‘.l12‘).fadeIn(3000);
});
//fadeOut() 实现淡出效果
$(‘#s7‘).click(function() {
alert(‘2‘);
$(‘.l10‘).fadeOut();
$(‘.l11‘).fadeOut(‘slow‘);
$(‘.l12‘).fadeOut(3000);
});
//fadeToggle() 交替进行fadeIn()和fadeOut()，如果元素是淡出的，那么fadeToggle()将淡入该元素，如果之前是淡入的，fadeToggle将淡出该元素。
$(‘#s8‘).click(function() {
$(‘.l7‘).fadeToggle();
$(‘.l8‘).fadeToggle(‘fast‘);
$(‘.l9‘).fadeToggle(2000);
});
//fadeTo() 实现淡化到指定的透明度
$(‘#s9‘).click(function() {
$(‘.w1‘).fadeTo("slow", 0.4);
});
//fadeIn() 实现淡化到指定的透明度
$(‘#s10‘).click(function() {
$(‘.w1‘).fadeTo("slow", 0.8);
});
});
</script>
</head>
<body>
<button id="s1" style="background-color: Red;">
1111
</button>
<button id="s2" style="background-color: yellow;">
2222
</button>
<button id="s3" style="background-color: blue;">
33333
</button>
<button id="s4" style="background-color: gary;">
44444
</button>
<button id="s5">
555555
</button>
<button id="s6">
666666
</button>
<button id="s7">
7777777
</button>
</button>
<button id="s8">
888888
</button>
<button id="s9">
99
</button>
<button id="s10">
100000
</button>
<textarea id=‘t1‘ cols=‘5‘></textarea>
<label class=‘l1‘>
11111</label>
<label class=‘l2‘>
22222</label>
<label class=‘l3‘>
33333333</label>
<label class=‘l4‘>
444444</label>
<label class=‘l5‘>
5555555555555</label>
<label class=‘l6‘>
666666</label>
<label class=‘l7‘>
7777</label>
<label class=‘l8‘>
8888</label>
<label class=‘l9‘>
999</label>
<label class=‘l10‘>
0aaaa</label>
<label class=‘l11‘>
sssss</label>
<label class=‘l12‘>
ddddd</label>
<table class=‘w1‘ style=" background-color:Red; width:300px; height:300px;"></table>
<label class=‘l13‘>
131331313</label>
</body>
</html>