j query learn
Post on 17-May-2015
1.616 Views
Preview:
DESCRIPTION
TRANSCRIPT
Write Less, Do More.
JQUERY 简介 ------- 写更少的代码,做更多的事情。
1.JQUERY的概述
1.1 JQUERY简介 jQuery 由美国人 John Resig 于 2006 年初创建,至
今已吸引了来自世界各地的众多 javascript 高手加入其 team ,包括来自德国的 Jörn Zaeffere ,罗马尼亚的 Stefan Petre 等等。
jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents 、 events 、实现动画效果,并且方便地为网站提供 AJAX 交互。
jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆 js 来调用命令了,只需定义 id 即可。
1.JQUERY的概述
1.2 能做什么程序员:简化 javascript 和 ajax 编程,能够使程序员
从设计和书写繁杂的 JS 应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。
用户:改善了页面视觉效果,增强了与页面的交互性,体验更绚丽的网页物资。
1.JQUERY的概述
1.3 主流的 JavaScript框架 YUI Dojo mooTools Prototype jQuery More..
性能测试: http://mootools.net/slickspeed/
1.JQUERY的概述
1.4 JQUERY的特点 轻量级:经 GZip 压缩后传输的代码文件仅 14KB ,未经压缩
传送的代码文件仅 26KB 链式语法 : $("p.surprise").addClass("ohmy").show("slow"); CSS 1-3 选择器:支持 CSS 选择器选定 DOM 对象 跨浏览器:支持 Internet Explorer 6+ 、 Opera 9+ 、 Firefox
1.5+ 、 Safari 2+ 简单:较其它 JS 库更容易入门,中、英文档很齐全 易扩展: JQUERY UI 、 JQUERY FX – 已经有很完善的基
于 JQUERY 的用户界面库 和网页特效库
2.JQUERY的使用
2.1 jQuery下载 当前版本 1.3.1 官方网站下载: http://jquery.com/
2.2 jQuery安装在页面头部 head 中,添加 js
<script type="text/javascript" src="./script/jquery.js"></script>
2.3 VS2008中可以实现 jQuery的智能提示
http://www.cnblogs.com/zhangronghua/archive/2008/10/15/1311400.html
3.JQUERY--基础
3.1 页面载入$(document).ready(callback);
$(document).ready(function() {}); 简写 $(function(){});
绑定一个在 DOM 文档载入完成后执行的函数 同一个页面上可以多次使用 Demo
3.JQUERY--基础
3.2 核心函数$(expression,[context]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去
匹配一组元素jQuery 的核心功能都是通过这个函数实现的
$(html) 根据提供的原始 HTML 标记字符串,动态创建由 jQuery
对象包装的 DOM 元素
3.JQUERY--基础
$(elements) 将一个或多个 DOM 元素转化为 jQuery 对象 注意是 jQuery
对象,而不是 DOM 对象。如果我想得到 DOM 对象呢?很简单,只需在其后跟一个索引值(如 [0] )—因为它得到的是一个对象数组,即可得到 DOM 对象。然后就可以使用innerHTML 、 innerText 等 DHTML 方法和属性了。
3.JQUERY--基础
3.3 选择器返回 jQuery 对象
基本选择器*, class,element, id, selector1, selector2 等 .
层级选择器ancestor descendant, parent > child, prev + next , prev ` siblings
简单选择器even, odd, eq[index], last, first 等
内容选择器contains[text], empty, parent, has[selector] 等 .
3.JQUERY--基础
可见性选择器hidden, visible.
属性选择器[attribute *=value], [attribute =value], [attribute] 等
子元素选择器first-child, last-child, nth-child(index), only-child.
表单选择器button, checkbox, file, hidden 等 .
表单对象属性选择器checked, disabled, enabled, selected.
3.JQUERY--基础
3.4 属性attr(name)取得第一个匹配元素的属性值attr(properties) 将一个“名 /值”形式的对象设置为所有匹配元素的属性attr(key,value) 为所有匹配的元素设置一个属性值
3.JQUERY--基础
3.5 class
addClass(class) 为每个匹配的元素添加指定的 class
removeClass(class) 从所有匹配的元素中删除全部或者指定的 class Demo
3.JQUERY--基础
3.6 HTML
html()取得第一个匹配元素的 html 内容html(val) 设置每一个匹配元素的 html 内容
3.JQUERY--基础
3.7 文本text() 、 text(val) 和 HTML类似 Demo
3.JQUERY--基础
3.8 值val()获得第一个匹配元素的当前值val(val) 设置每一个匹配元素的值 Demo
3.JQUERY--基础
3.9 DOM文档处理 内部插入
append(content), appendTo(content), prepend(content), prependTo(content).
外部插入after(content), before(content), insertAfter(content), insertBefore(content).
Demo
3.JQUERY--基础
3.10 CSS
css(properties)把一个“名 /值对”对象设置为所有匹配元素的样式属性属性名包含 "-" 的话,必须使用引号css(name,value) 在所有匹配的元素中,设置一个样式属性的值 Demo
3.JQUERY--基础
3.11 事件 页面载入事件 事件处理
bind , one , trigger, triggerHandler, unbind 交互处理
hover, toggle 事件
click, mouse event, keyboardevent 等 . Demo
3.JQUERY--基础
3.12 效果show()显示隐藏的匹配元素show(speed,[callback]) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数
hide()隐藏显示的元素
3.JQUERY--基础
hide(speed,[callback]) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
toggle() 切换元素的可见状态 Demo
3.JQUERY--基础
3.13 Ajax
$.ajax(options)
$.get(”search.do”,{id:1},rend); function rend(xml){ alert(xml); }(1)
$.post(”search.do”,{id:1},rend); function rend(xml){alert(xml);}(2)
$(”#msg”).ajaxStart(function(){this.html(”正在载入 ..”);});(3)
$(”#msg”).ajaxSuccess(function(){this.html(” 加载完成!” ); });(4)
通过 HTTP 请求加载远程数据 Demo
4.其它
插件 官方插件网址 TerryLee Blog上的所做的240个jQuery插件索引 http://www.cssrain.cn/
工具 可采用任意文本编辑器 , VS2008 中可以实现智能提示 . Aptana Studio FireFox2 + FireBug1.05
4.参考网站
jQuery 官方网站http://jquery.com
jQuery 中文社区http://bbs.jquery.org.cn
一个 Blog( 有不少教程和插件 )
http://www.cssrain.cn 很好的 API查询站点 http://
www.visualjquery.com/index.xml 240 多个 jQuery 插件的列表
http://www.cnblogs.com/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html
09/1/4 Meteoric_cry
简是一种美德,懒是一种境界。
top related