第十讲jquery框架.ppt_H5之家 - 中国HTML5教程资源分享第一站

文档介绍：
一、什么是jQuery
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
二、jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 中所有选择器都以美元符号开头:$()。
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。$("#test")
例如;当用户点击按钮后,有 id="test" 属性的元素将被隐藏:
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("p").hide();
});
$("#btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="btn1">Hide</button>
<button id="btn2">Show</button>
</body>
</html>
.class 样式选择器
jQuery 类选择器可以通过指定的 class 查找元素。$(".test")
实例:用户点击按钮后所有带有 class=“test”属性的元素都隐藏:
$(document).ready(function(){ $("button").click(function(){    $(".test").hide(); });});
.class样式选择器
jQuery 类选择器可以通过指定的 class 查找元素。$(".test")
实例:用户点击按钮后所有带有 class=“test”属性的元素都隐藏:
$(document).ready(function(){ $("button").click(function(){    $(".test").hide(); });});
$(“p”)HTML元素选择器
jQuery HTML元素选择器可以通过指定的查找元素。$(“body")
实例:用户点击按钮后所有 body内的元素都隐藏:
$(document).ready(function(){ $("button").click(function(){    $(" body ").hide(); });});
三、使用 jQuery方法
<head><script src=""></script><script src=“jquery/jquery.js"></script></head>
四、 jQuery事件
页面对不同访问者的响应叫做事件。
常见事件:(鼠标事件、键盘事件、表单事件、文档/窗口事件)
如click,keypress,submit,load,dblclick,keydown,change,resize,mouseenter,keyup,focu,sscroll,mouseleave,blur,unload
五、Query 事件方法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法,常用的 jQuery 事件方法:
1、$(document).ready() 方法
文档完全加载完后执行该函数
2、click() 方法
在用户点击 HTML 元素时执行。
$("p").click(function(){ $(this).hide();});

内容来自淘豆网转载请标明出处.