jQuery_1.pptVIP

本章内容 jQuery选择器 jQuery对DOM操作 jQuery的事件 jQuery简介 JavaScript的缺点 DOM操作比较复杂 浏览器支持不一致 代码编写复杂 可重用性不好 jQuery简介 为了简化JavaScript的开发，一些JS框架应运而生，这些框架对JavaScript进行了封装，提供了很多内置对象和实用函数，能帮助开发人员更轻松得建立较难、较复杂的页面，并且兼容主流的浏览器。目前几种比较流行的JS框架有： Prototype Dojo YUi ExtJS MooTools jQuery 每个JS框架都有自己的优缺点，也都有自己的支持者和反对者。jQuery从诞生的那天起，其关注度就在一直上升，现在已经成为Web开发人员的最佳选择。 jQuery简介 jQuery是一个由John Resig创建于2006年1月的开源项目。 jQuery凭借其简洁的语法和跨平台的兼容性，极大的简化了JS开发。其独特而优雅的代码风格改变了开发人员的设计思路和编码方式。 jQuery是一个轻量级的库，大小不超过200K。 jQuery能在当前主流的IE、FF、Opera等浏览器中正常运行。 jQuery简介 从官方网站 下载最新的jQuery框架，目前最新版本是1.7.x。 jQuery框架只是一个js文件，不需要安装和配置，只需要在页面中引入这个库就行了，例如： jQuery script src jquery-1.7.2.js type text/javascript jQuery用 // 作为单行注释，用/* */作为多行注释 jQuery选择器 jQuery选择器是用来查找、获得HTML元素的，与document.getElementById 功能类似，但是jQuery选择器功能更强大、更好用。 jQuery选择器分类 基本选择器 层次选择器 表单选择器 属性选择器 基本选择器 基本选择器是jQuery中最简单、最常用的选择器，主要是利用HTML元素的id、class、标签名来查找、获得HTML元素。 层次选择器 如果想通过HTML元素之间的层次关系来查找、获得HTML元素，例如父元素、子元素、相邻元素等，那么使用层次选择器是一个很好的选择。 表单选择器 表单在实际开发中应用频繁，为了能更加灵活、方便的操作 表单，jQuery中专门加入了表单选择器。 属性选择器 jQuery-DOM操作 DOM即文档对象模型，它把HTML元素转化成了DOM对 象。在jQuery中，对DOM的操作大概分为以下几种： 属性操作 文本和值操作 CSS样式操作 位置、大小操作 属性操作 attr name,value : 用来设置某元素某个属性的值，第一个参数name表示属性的名字，第二个参数value设置属性的值 $ “#btn” .attr “value”,”确定” ; 也可以同时为多个属性设置值 $ “#btn” .attr value: ”确定” , size : “50” ; 删除属性 $ “#btn” .removeAttr “属性名” 文本和值操作 html val : 与JS中的innerHTML功能相同，用来设置或获得某元素中的HTML内容 text val : 与JS中的innerText功能相同，用来设置或获得某元素中的文本内容 val val : 与JS中的value功能相同，例如：用来设置或获得文本框的值 css样式操作 css : 用来设置或获得style属性里各种样式的值 获取：css “样式属性名” 设置：css “样式属性名” , ”值” 例如： $ “#btn” .css “color” ; $ “p” .css “fontSize”,”14px” ; 也可以同时设置多个属性： $ “p” .css “fontSize” : ”14px” , “color” : “red” ; 位置大小操作 position scrollTop scrollLeft height width jQuery加载事件 页面加载事件：$ document .ready 页面卸载事件：$ element .unload jQuery焦点事件 失去焦点事件：$ element . blur 获得焦点事件：$ element . focus jQuery鼠标事件 鼠标单击事件： $ element .click 鼠标双击事件： $ element .dblclick 鼠标按下事件： $ element .mousedown 鼠标弹起事件： $ element .mouseup 鼠标移动事件： $ element .mousemove