《Jquery(很好的教程技术较为全面分享给大家)ppt课件》由会员分享，可在线阅读，更多相关《Jquery(很好的教程技术较为全面分享给大家)ppt课件（35页珍藏版）》请在金锄头文库上搜索。
1、Jquery,内容简介,什么是Jquery 万能的选择器 管理jQuery包装集 使用jQuery操作元素的属性与样式 事件与事件对象 jQuery中的Ajax jQuery动画-让页面动起来! 插播:jQuery实施方案 jQuery工具函数 jQueryUI常用功能实战 实战表单验证与自动完成提示插件,Jquery概述,Jquery是一套Javascript脚本库 JQuery = JavascriptLibrary Jquery != JavascriptFrameWork 提供了强大的功能函数 解决浏览器兼容性问题 实现丰富的UI ,Jquery的选择器,一个简单的Jquery的功能实
2、现 var $=function(id) return document.getElementById(id);,Jquery的选择器,在Dom编程中只能使用有限的函数根据id或者TagName获取Dom对象. jQuery提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery包装集的形式返回. 只有Jquery对象才能调用Jquery方法 通过索引器返回的不再是jQuery包装集, 而是一个Dom对象,“$”符号在jQuery中代表对jQuery对象的引用, “jQuery”是核心对象 Returns: jQuery包装集 $( html, ownerDocument
3、 ) 根据HTML原始字符串动态创建Dom元素. $( elements ) 将一个或多个Dom对象封装jQuery函数功能(即封装为jQuery包装集) $( callback ) $(document).ready()的简写方式,jQuery( selector, context ),Selector选择器 选择和过滤. 选择 不会有默认的范围 过滤 指定条件从前面匹配的内容中筛选 可以单独使用, 表示从全部 (*“) 中筛选 $(:title)等同于:$(*:title),选择器示例,$(“#divId) 选择ID为divId的元素$(.bgRed) 选择所用CSS类为bgRed的元素
4、$(a) 选择所有元素 $(*)选择页面所有元素 $(“#divId, a, .bgRed”)依次选择对应元素 alert($($(#dv,.dv)1).text();,$(.bgRed div) 选择CSS类为bgRed的元素中的所有元素. $(.myListli) 选择CSS类为myList元素中的直接子节点对象. $(#hibiscus+img) 选在id为hibiscus元素后面的img对象.(同级节点) $(#someDivtitle) 选择id为someDiv的对象后面所有带有title属性的元素,$(tr:first)查找表格的第一行 $(tr:last“)查找表格的最后一行 $
5、(input:not(:checked) 查找所有未选中的 input $(“tr:even”) 查找表格的奇数行 $(“tr:odd”)查找表格的偶数行 $(“tr:eq(1)”)查找第二行 即索引值是1 $(tr:gt(3)查找大于给定索引值的元素 $(“tr:lt(3)”)查找小于给定索引值的元素 $(:header).css(background, #EEE); 给页面内所有标题加上背景色 $(#run).click(function() $(div:not(:animated).animate( left: +=20 , 1000); ); 只有对不在执行动画效果的元素执行一个动画特
6、效,$(“div:contains(John) 查找所有包含 John 的 div 元素 $(td:empty) 查找所有不包含子元素或者文本的空元素 $(div:has(p).addClass(test); 给所有包含 p 元素的 div 元素添加一个 text 类 $(td:parent) 查找所有含有子元素或者文本的 td 元素 $(tr:hidden) 查找所有不可见的 tr 元素 $(tr:visible) 查找所有可见的 tr 元素,$(divid) 查找含有 id 属性的 div 元素 $(inputname=newsletter).attr(checked, true); 查找
7、 name 属性是 newsletter 的 input 元素 $(inputname!=newsletter).attr(checked, true); 查找 name 属性不是 newsletter 的 input 元素 $(inputname=news) 查找 name 属性以news开头的 input 元素 $(inputname$=letter) 查找 name 属性以letter结尾的 input 元素 $(inputname*=man) 查找所有 name 包含 man 的 input 元素 $(inputidname$=man) 找到所有含有 id 属性，并且它的 name 属
8、性是以 man 结尾的元素,$(ul li:nth-child(2) 在每个 ul 查找第 2 个li $(ul li:first-child) 在每个 ul 中查找第一个 li $(ul li:last-child) 在每个 ul 中查找最后一个 li $(ul li:only-child) 在 ul 中查找是唯一子元素的 li,$(:input)查找所有的input元素 $(:text) Radio Checkbox Submit Image Reset Button File查找所有文件域,$(input:enabled) 查找所有可用的input元素 $(input:disabled)
9、 $(input:checked) $(select option:selected) 查找所有选中的选项元素,Jquery中的方法:改变结果集：,$(div).has(p); 选择包含p元素的div元素 $(div).not(.myClass); 选择class不等于myClass的div元素 $(div).filter(.myClass); 选择class等于myClass的div元素 $(div).first(); 选择第1个div元素 $(div).eq(5); 选择第6个div元素,Jquery中的方法:DOM树上的移动,$(div).next(p); 选择div元素后面的第一个p元
10、素 $(div).parent(); 选择div元素的父元素 $(div).closest(form); 选择离div最近的那个form父元素 $(div).children(); 选择div的所有子元素 $(div).siblings(); 选择div的同级元素,.end()方法，使得结果集可以后退一步 $(div) .find(h3) .eq(2) .html(Hello) .end() /退回到选中所有的h3元素 .eq(0) /选中第一个h3元素 .html(World); /将它的内容改为World,元素的操作：取值和赋值,同一个函数，来完成取值和赋值 到底是取值还是赋值，由函数的参
11、数决定。 $(h1).html(); html()没有参数，表示取出h1的值 $(h1).html(Hello); html()有参数Hello，表示对h1进行赋值,常见的取值和赋值函数,.html() 取出或设置html内容 .text() 取出或设置text内容 .attr() 取出或设置某个属性的值 .width() 取出或设置某个元素的宽度 .height() 取出或设置某个元素的高度 .val() 取出某个表单元素的值 如果结果集包含多个元素,那么赋值的时候，将对其中所有的元素赋值,取值的时候，则是只取出第一个元素的值(.text()例外，它取出所有元素的text内容),元素的操作：
12、移动,第一种方法是使用.insertAfter() 把div元素移动p元素后面： $(div).insertAfter(p); 第二种方法是使用.after() 把p元素加到div元素前面： $(p).after(div); 第一种方法返回div元素，第二种方法返回p元素,.insertAfter()和.after()： 在现存元素的外部，从后面插入元素 .insertBefore()和.before()： 在现存元素的外部，从前面插入元素 .appendTo()和.append()： 在现存元素的内部，从后面插入元素 .prependTo()和.prepend()： 在现存元素的内部，从前面
13、插入元素,元素的操作：复制、删除和创建,复制元素使用.clone() 删除元素使用.remove()和.detach() 前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。 清空元素内容（但是不删除该元素）使用.empty()。 创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数 $(Hello);,工具方法,$.trim() 去除字符串两端的空格。 $.each() 遍历一个数组或对象。 $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。 $.grep() 返回数组中符合某种标准的元素。 $.extend() 将多个对象，合
14、并到第一个对象。 $.makeArray() 将对象转化为数组。 $.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。 $.isArray() 判断某个参数是否为数组。 $.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。 $.isFunction() 判断某个参数是否为函数。 $.isPlainObject() 判断某个参数是否为用或new Object建立的对象。 $.support() 判断浏览器是否支持某个特性。,事件操作,事件直接绑定在网页元素之上。 $(p).click(function() alert(Hello); );,jQ
15、uery主要支持以下事件,.blur() 表单元素失去焦点。 .change() 表单元素的值发生变化 .click() 鼠标单击 .dblclick() 鼠标双击 .focus() 表单元素获得焦点 .focusin() 子元素获得焦点 .focusout() 子元素失去焦点 .hover() 同时为mouseenter和mouseleave事件指定处理函数 .keydown() 按下键盘（长时间按键，只返回一个事件） .keypress() 按下键盘（长时间按键，将返回多个事件） .keyup() 松开键盘,.load() 元素加载完毕 .mousedown() 按下鼠标 .mouseen
16、ter() 鼠标进入（进入子元素不触发） .mouseleave() 鼠标离开（离开子元素不触发） .mousemove() 鼠标在元素内部移动 .mouseout() 鼠标离开（离开子元素也触发） .mouseover() 鼠标进入（进入子元素也触发） .mouseup() 松开鼠标 .ready() DOM加载完成 .resize() 浏览器窗口的大小发生改变 .scroll() 滚动条的位置发生变化 .select() 用户选中文本框中的内容 .submit() 用户递交表单 .toggle() 根据鼠标点击的次数，依次运行多个函数 .unload() 用户离开页面,这些事件在jQuery内部，都是.bind()的便捷方式。 使用.bind()可以更灵活地控制事件 /同时绑定click和change事件 $(input).bind(click change, function() alert(Hello);); /只运行一次，以后的点击不会运行 $(p).one(click, function() alert(“Hello”); ); /.un
