首页 > 代码库 > jquery 学习 笔记（一）
jquery 学习 笔记（一）
选择器
语法 说明
$(“*”) 选择所以元素
$(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=http://www.mamicode.com/"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>
jquery 学习 笔记（一）