第十讲jq的uery框架.ppt

一、什么是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 pThis is a paragraph./p button class=btn1Hide/button button class=btn2Show/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 pThis is a paragraph./p button id=btn1Hide/button button id=btn2Show/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方法 headscript src=/libs/jquery/1.10.2/jquery.min.js/scriptscript 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();}); Query 事件方法 3、dblclick() 方法 当双击元素时，运行的函数 $(p).dblclick(function(){? $(this).h