Web4-9-jQuery探秘原创文档.pptx

;4.9 兵器库 jQuery探秘;jQuery是什么？;一个JavaScript库 写的少，做的多 轻量级的库文件 功能强大的选择器 丰富的事件处理机制 封装完善的Ajax;jQuery库文件是免费的，可以从官网下载（） 目前官网版本为，版本分为： Production 压缩版，用于正式发布 Development 完整版，用于开发与测试 （考虑到兼容性问题，本讲实例使用完整版）;在HTML文档的首部标签head和/head中通过script标签添加jQuery的引用声明。 例如： script src=“js/jquery-1.12.4.js/script ;jQuery语法结构如下： $(selector).action() 例如：$(p).hide(); 表示隐藏所有段落;$(document).ready(function(){ jQuery函数内容 }); 功能与js的window.onload()方法类似，即当页面被载入时自动执行;html head script src= /script title第一个jQuery文档/title script $(document).ready(function(){ alert(Hello jQuery!); }); /script /head body/body /html;jQuery能做什么？;jQuery选择器 jQuery中的DOM jQuery的事件处理;jQuery选择器继承了CSS的风格，可用于快速选定需要的HTML元素，并为其进行后续处理。 基础选择器(Basic Selector) 属性选择器(Attribute Selector) 表单选择器(Form Selector) 层次选择器(Hierarchy Selector) jQuery CSS选择器 ; body h2标题/h2 p段落1/p p段落2/p button type=buttonClick me /button /body /html ;DOM（Document Object Model）是文档对象模型，它是一种与浏览器、语言无关的接口，利用该接口可以方便的访问页面中的标准组件。 jQuery提供了一系列方法对DOM进行各种操作，从而通过DOM实现对页面中各种元素的操作。;jQuery能获取或设置5种特定内容;追加：append()、prepend() 插入：after()、before() 删除：remove()、empty()、removeAttr();$(document).ready(function(){ $(#btn1).click(function(){ $(p).append( b追加文本~/b); }); $(#btn2).click(function(){ $(b).remove(); }); ……； });;JavaScript和HTML页面之间的交互是通过用户和浏览器操作页面时引发的事件来实现的，当页面中的元素状态由于用户的操作或其他原因发生变化时，浏览器会自动生成一个事件。虽然利用传统的JavaScript事件处理方式可以完成这些交互，但jQuery中增加并扩展了事件处理机制，极大地增强了事件处理能力;文档/窗口事件 键盘事件 鼠标事件 表单事件;页面文档或浏览器窗口发生变化时所触发的事件，常见事件如下：;用户操作键盘所触发的事件，常见事件如下：;用户操作鼠标所触发的事件，常见事件如下：;用户操作表单所触发的事件，常见事件如下：;on()方法可以用于给指定元素的子元素绑定一个或多个事件。 其语法格式如下： $(selector).on(event, [childSelector,] [data,] function) 例如，用on()方法指定id=test的div元素，然后为其中的子元素button绑定事件,代码如下： $(#test).on(click, button, function(){ alert(按钮被点击！); }); ;off()方法可以用于给指定元素的子元素解除一个或多个事件。 其语法格式如下： $(selector).off(event, [childSelector,] [data,] function) 例如，用off()方法为按钮button元素解绑点击事件（鼠标