您的位置：首页 > Web前端 > JQuery

jquery 学习 笔记（一）

2014-09-15 16:50 225 查看
选择器

语法 说明

$(“*”) 选择所以元素

$(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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航