1、,第一章 初识JQuery,本节课目标,1、了解Jquery的发展历史 2、了解Jquery的特性 3、掌握Jquery的基本语法 4、掌握Jquery的基本选择器用法 5、了解Jquery的高级选择器用法,相关知识回顾,JAVASCRIPT 1、由网景公司(netscape)开发的一种脚本语言 2、用于实现网页和用户之间的实时、动态交互关系 3、优点： 语法简单，学习难度低 灵活性高 功能强大，可以完成大多数页面动态功能 4、缺点： 较为复杂的DOM模型，使程序员操作文档复杂度增大 浏览器不一致的实现 缺乏比较有效的调试工具,相关知识回顾,AJAX 1、基于javascript的一种新型we
2、b应用 2、原理基于异步请求通讯 3、用于页面无刷新的web页面动态功能实现 4、是胖客户端应用的一种典型实现 5、google的一系列AJAX应用促使AJAX越来越流行,Jquery的产生由来,随着AJAX的应用越来也广泛，JS的应用也进一步加强，为了能提高开发效率，简化开发的复杂程度，我们迫切的需要JS能提供一些基本的功能函数包让我们使用，于是JS库出现了。 JS库：封装了大量的预定义对象和函数，能够帮助我们实现一些复杂的交互性富客户端页面 类似于java中的第三方组件库(jar),常见的JS库介绍,Prototype DOJO YUI Ext JS MooTools JQuery,Jqu
3、ery的优点,Jquery： 1、轻量级： 2、选择器功能强大 3、对DOM的良好封装 4、可靠的事件处理机制 5、完善的ajax支持 6、与其它JS库的良好兼容 7、出色的浏览器兼容性 8、链式操作方式 9、丰富的插件支持,JS的使用初级,如何在网页文档中导入jquery 1、下载最新版本的jquery 下载地址：http:/ Jquery库的两种版本 jquery-版本号.js 完整版 jquery 版本号.min.js 压缩版 2、在网页文档中添加导入语句 ,第一个Jquery小程序,现在我们来开发第一个Jquery程序，代码如下：第一个jquery程序$(document).ready
4、(function()alert(“hello world!“););,Jquery语法,Jquery所有的操作都要基于一个顶层对象，此对象名为jquery。该对象在jquery被导入浏览器时由浏览器创建。 使用语法： jquery.JQ函数 简化写法： $.JQ函数 $ = jauery,Jquery对象与DOM对象,Jquery对DOM做出了封装，简化了较为复杂的DOM操作 例如，获取Web页面中的id=“in”的元素对象 DOM：var inp = document.getElementById(“in”); JQ: var $inp = $(“#in”); Jquery对象与DOM对象
5、的转换 DOM JQ $(dom对象) JQDOM $inindex | $in.get(index),JQ选择器使用,回顾CSS选择器 CSS选择器提供的是如何定位要使用CSS规定样式元素的规则，即选择那些元素 CSS选择器种类 id选择器 类选择器 元素选择器 后代选择器 通配符选择器 Jquery继承了CSS元素选择器机制，给我们提供了一种比DOM 更加强大和优秀的元素选择、定位方式,Jquery选择器之一：基本选择器,id选择器 语法：#id名称 Jquery用法： $(“#id名称”) 获取web页面中指定id名称的元素 等价于document .getElementById(“#i
6、d”) 注意：$(#id)永远返回一个Jquery对象，即使不存在该id 对元素是否存在的判断 $(#id).length 0 | $(#id).get(0),Jquery选择器之一：基本选择器,类名选择器 语法：.类名 Jquery用法： $(“.classname”):根据给定的类名匹配元素 注意：该方法返回的是一组对象的集合 例： $(“.one”),Jquery选择器之一：基本选择器,元素选择器 语法：元素名 Jquery用法： $(“元素名”) 获取web页面中指定元素名的所有元素对象 注意：返回的是元素对象的集合 例如：$(“p”),Jquery选择器之一：基本选择器,通配符选择器
7、 语法：* Jquery用法： $(“*”):获取当前网页的所有元素对象 注意：返回是对象的集合 例如：$(“*”) 组合选择器 语法：n1,n2,n3 其中n可以是元素，类名 Jquery用法： $(“n1,n2,n3”):返回指定元素的集合 注意：返回的是对象集合,Jquery选择器之二：层次选择器,后代选择器 语法：父元素名 后代元素名 jquery语法： $(“父元素名后代元素名”)获取一个父元素下的所有子元素集合 例如：$(“div span”) ; 注意：1、这里的子元素是父元素下的所有，不管包含了几层2、父元素名也可以替换成id或类名,Jquery选择器之二：层次选择器,子元素选
8、择器 语法：父元素 子元素 Jquery用法： $(“父元素子元素”) 例如：$(“divspan”) 注意：1、该选择器和后代选择器的区别在于只找父元素下一级的子元素,Jquery选择器之二：层次选择器,兄弟元素选择器 后一个： 语法：prev+next Jquery语法：$(“prev+next”) 例如：$(“#id+a”)查找div后第一个a元素 注意：简化方法：$(“#id”).next(); 后所有： 语法：prevsiblings Jquery语法：$(“prevsiblings”) 例如：$(“#ida”)查找div后所有a元素 注意：简化方法：$(“#id”).nextAll
9、();,Jquery选择器之三：过滤选择器,过滤选择器按特定的规则筛选所需要的DOM元素，使用方式与CSS中的伪类一样，用“ ：”表示，根据过滤规则的不同，可分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象过滤,Jquery选择器之三：过滤选择器,基本过滤： $(“div:first”) 获取文档中的第一个div $(“div:last”) 获取文档中的最后一个div $(“div:not(.one) ”) 获取所有class不为one的div元素 $(“div:even”):获取索引为偶数的div元素 $(“div:odd”):获取索引为奇数的div元素 $(“div:e
10、q(2)”):获取索引等于2的div元素 注意：索引从0开始计数 $(“div:gt(2)”):获取索引大于2的div元素 $(“div:lt(2)”):获取索引小于2的div元素 $(“:header”):获取所有的标题元素 $(“:animated”):获取所有的正在执行动画的元素,Jquery选择器之三：过滤选择器,内容过滤选择器 $(“div:contains(text)”) 获取文档中内容包含字符串text的div元素 $(“div:empty”) 获取文档中不包含子元素或者文本的div元素 $(“div:has(selecter)”) 获取文档中包含选择器selecter所匹配的d
11、iv元素 $(“div:has(p)”) 获取包含段落的div元素 $(“div:parent”) 获取文档中包含子元素或文本的div元素,Jquery选择器之三：过滤选择器,可见性过滤选择器 $(“div:hidden”)：获取文档中所有隐藏的div元素 注意：hidden指的是包含display=none,visiability=hidden,input type=“hidden”的元素 $(“div:visible”)：获取文档中所有显示的div元素,Jquery选择器之三：过滤选择器,属性过滤选择器：通过元素的属性来获取文档元素的规则，元素属性用“ ”一对中括号表示 $(“divid”
12、)获取文档中拥有id属性的div元素 $(“inputname=sex”)获取文档中name属性值为sex的所有input元素 $(“inputname!=sex”)获取文档中name属性值不等于sex的所有input元素 $(“inputname=sex”)获取文档中name属性值以sex开头的所有input元素 注意：选择器以某个属性值开头也包括指定开头的值与属性值完全相等的情况，即name=sex结果会包含name=sex的结果 $(“inputname$=sex”)获取文档中name属性值以sex结束的所有input元素 与上述选择器类似,Jquery选择器之三：过滤选择器,属性过滤选
13、择器 $(“inputname*=sex”)获取属性值中包含sex的所有input元素 $(“inputname*=sexid”)获取name属性包含sex并具有id属性的所有input元素,Jquery选择器之三：过滤选择器,子元素过滤选择器 $(“diva:nth-child(1)”):获取所有div对象下的第1个a子元素 $(“diva:nth-child(2n)”):获取所有div下的2的倍数的子元素a $(“diva:nth-child(2n+1)”):获取所有div下2的倍数+1的子元素a $(“diva:nth-child(even)”):获取所有div下索引为偶数的子元素a $
14、(“diva:nth-child(odd)”):获取所有div下索引为奇数的子元素a 注意：1、这里的索引从1开始计数2、过滤选择器前必须用子选择器的写法，即元素元素,Jquery选择器之三：过滤选择器,子元素过滤选择器 $(“diva:first-child”):获取所有div下第一个子元素a的集合 $(“diva:last-child”):获取所有div下最后一个子元素a的集合 $(“diva:only-child”):获取所有div下只唯一存在一个子元素a的对象集合,Jquery选择器之三：过滤选择器,表单对象属性过滤器：主要用于表单对象的过滤选择 $(“#form1 *:enabled
15、”)获取id为form1的表单下所有可用的元素 $(“#form1 *:disabled”)获取id为form1的表单下所有不可用的元素 $(“input:checked”)获取所有被选中的input元素 $(“option:selected”)获取所有被选择的option元素,Jquery选择器之四：表单选择器,专门用于获取表单元素的选择器类型 $(“:input”)获取所有的表单input,textarea,select,button $(“:text”)获取所有表单的单行文本框 $(“:password”)获取所有表单的密码框 $(“:radio”)获取所有表单的单选按钮 $(“:che
16、ckbox”)获取所有表单的复选框 $(“:submit”)获取所有表单的提交按钮 $(“:reset”)获取所有表单的重置按钮 $(“:button”)获取所有表单的普通按钮 $(“:image”)获取所有表单的图片域 $(“:file”)获取所有表单的文件域 $(“:hidden”)获取所有隐藏元素，包括隐藏域,选择器注意问题,1、在选择器中出现特殊符号“#”“.”等 例如： $(“#t.1”) 错误 $(“#t.1”)正确 2、在选择器中空格问题 $(“div:odd”)获取所有的索引为奇数的div $(“div :odd”)获取div元素中包含的索引为奇数的元素 注意：“元素:”等同于“元素*:”,
