jQuery JavaScript Library v1.4.2
1.对于div中的id 或class的引用
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$('.yes').hide();
//for id
//$('#yes').hide();
})
</script>
</head>
<body>
<div class="yes" id="yes" >yes</div>
<div>text1</div>
<div>text2</div>
</body>
</html>
2.button的单击事件 & toggle()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$('#button').click(function () {
$('#zxl').toggle();
$('#button').val('zbutton');
});
})
</script>
</head>
<body>
<input type="submit" id="button" />
<div id="zxl" >type some text</div>
</body>
</html>
3.jquery 中的css
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$('ul li').each(function (e) {
if (e != 2) {
$(this).css('background', 'red');
}
$('li').eq(2).css('background', 'green');
$('li').has('b').css('background', 'blue');
$(this).append(e);
});
})
</script>
</head>
<body>
<h1>zzz</h1>
<ul>
<li>this is an item</li>
<li>this is an item</li>
<li>this is an item</li>
<li><b>this</b> is an item</li>
<li>this is an item</li>
<li>this is an item</li>
<li>this is an item</li>
<li>this is an item</li>
<li>this is an item</li>
</ul>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
// SHOW效果
// $('h1').hide();
// $('#button').click(function () {
// $('h1').show();
// });
// slidedown效果
// $('h1').hide();
// $('#button').click(function () {
// $('h1').slideDown(3000);
// });
// slideUp效果
// $('#button').click(function () {
// $('h1').slideUp(3000);
// });
// fadeout效果
$('#button').click(function () {
$('h1').fadeOut(3000);
});
})
</script>
</head>
<body>
<h1>zzz</h1>
<ul>
<li><b>this</b> is an item</li>
<li>this is an item</li>
<li>this is an item2</li>
<li>this is an item</li>
<li>this is an item</li>
</ul>
<input id="button" type="submit" />
</body>
</html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
// //无参数
// $.fn.YourName = function () {
// alert('zxl');
// }
// //带参数
// $.fn.zxl = function (str) {
// alert(str);
// }
// $('#button').click(function () {
// $(this).YourName();
// $(this).zxl('hello zxl');
// });
///////////////////////////////////////////////////////////////
// //无参数
// $.fn.customThing = function () {
// return $(this).css('background','green').fadeOut(3000);
// }
// $('#button').click(function () {
// $('h1').customThing();
// });
//有参数
$.fn.customThing = function (color) {
return $(this).css('background', color).fadeOut(3000);
}
$('#button').click(function () {
$('h1').customThing('blue');
});
})
</script>
</head>
<body>
<h1>zzz</h1>
<ul>
<li><b>this</b> is an item</li>
<li>this is an item</li>
<li>this is an item2</li>
<li>this is an item</li>
<li>this is an item</li>
</ul>
<input id="button" type="submit" />
</body>
</html>