Chinaunix
标题: jQuery学习笔记 [打印本页]
作者: zhuizhuziwo 时间: 2011-12-21 08:44
标题: jQuery学习笔记
Jasonye 2011-06-12
综述:jQuery是JavaScript类库,它提供一些功能,让程序员更加简洁地编写
JavaScript程序。可以通过一行简单的标记被添加到网页中。
jQuery 库包含以下特性:
HTML 元素选取(选择器)
JavaScript 特效和动画
HTML 事件函数
HTML 元素操作、CSS 操作(文档操作)
HTML DOM 遍历和修改
AJAX
Utilities
0:添加jQuery库
方法一、本地方法
<head>
<script type="text/javascript" src="jquery.js"> </script>
</head>
方法二、Google的CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
文档就绪函数:
$(document).ready(function(){
---jQuery functions go here.---
});
这是为了防止文档没有完全加载前运行函数,而产生操作失败。
比如试图:访问一个不存在的元素、获得未加载的图像的大小等
由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突,则重命名 jQuery 库,解决名称冲突:
var jq = jQuery.noConflict() 使用自己的名称比如jq来代替$符号
1、元素选取
jQuery定义了各种元素选择器,让我们更加方便、简洁地选取各种元素。
jQuery选择器分为元素选择器和属性选择器, 用来选择需要操作的HTML元素。
选择器运行对DOM元素组或者单个DOM节点进行操作。
基本语法是:$(selector).action()
示例:
$(this).hide() 隐藏当前元素
$("p").hide() 隐藏所有段落
$(.test).hide() 隐藏class=test的元素
$("#test").hide() 隐藏id=test的元素。
元素选择器:使用CSS选择器来选取HTML元素
$("p") 选取<p>元素
$("p.intro") 选取所有class="intro"的<p>元素
$("p#demo") 选取id="demo"的第一个<p>元素
属性选择器:使用XPath表达式来选择带给定属性的元素
$("[href]") 选取所有带href属性的元素
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
2、jQuery事件
为特定事件编写相应的处理函数。 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
常见的事件:
ready
click
dblclick
focus
mouseover 鼠标悬停
bind() 附加一个或者多个事件处理器
delegate() 向匹配元素的当前或者未来的子元素附加一个或者多个事件处理器
更多事件见参考库。
3、效果
jQuery可以创建隐藏、显示、切换、滑动以及自定义的动画效果,让我们更加简单地编写各种动画效果,
常用来制作菜单栏等效果。
hide(),show() 隐藏与显示函数,这两个函数可以设置参数speed和callback。
slideToggle() 滑动面板
fadeTo() 淡入淡出
animate() 动画
隐藏与显示:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。
切换函数:
$(selector).toggle(speed, callback)
用来实现元素的切换(隐藏的显示,显示的隐藏)。
滑动函数:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
Fade函数:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
动画:
$(selector).animate({params},[duration],[easing],[callback])
params:定义产生动画的 CSS 属性。可以同时设置多个此类属性:例如:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
duration:定义用来应用到动画的时间。它设置的值是:"slow", "fast", "normal" 或毫秒。
Callback函数在当前动画100%完成后执行。
注意:HTML 元素默认是静态定位,且无法移动。如需使元素可以移动,请把 CSS 的
position 设置为 relative 或 absolute。
4、jQuery文档操作函数
文档操作函数用来改变文档的DOM数。
HTML 操作函数 描述
$(selector).html(content) 改变被选元素的(内部)HTML
$(selector).append(content) 向被选元素的(内部)HTML 追加内容
$(selector).prepend(content)向被选元素的(内部)HTML “预置”(Prepend)内容
$(selector).after(content) 在被选元素之后添加 HTML
$(selector).before(content) 在被选元素之前添加 HTML
CSS 操作函数
jQuery拥有三种用于CSS操作的重要函数:
$(selector).css(name,value) 为所有匹配元素的给定 CSS 属性设置值:
$(selector).css({properties}) 为所有匹配元素的一系列 CSS 属性设置值:
$(selector).css(name) 返回指定的 CSS 属性的值:
$(selector).height(value)
$(selector).width(value) 函数 width(value) 设置所有匹配元素的宽度:
例子:$("p").css({"background-color":"red","font-size":"200%"});
5、Ajax操作函数
jQuery为长远用的AJAX请求封装了各种函数。让我们更方便地进行AJAX请求。
jQuery 的 load 函数是一种简单的(但很强大的)AJAX 函数。它的语法如下:
$(selector).load(url,data,callback)
请使用 selector 来定义要改变的 HTML 元素,
使用 url 参数来指定数据的 web 地址。
只有当您希望向服务器发送数据时,才需要使用 data 参数。
还有更低级的:Low Level AJAX ,。
$.ajax(options) 是低层级 AJAX 函数的语法。
option 参数设置的是 name|value 对,定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
$.ajax 提供了比高层级函数更多的功能,但是同时也更难使用
jQuery AJAX请求
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件
(data) 发送到服务器的数据的键/值对象
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项
jQuery参考手册
一、选择器
二、事件
三、效果
四、文档操作:对XML、HTML文档进行相关的操作,除了:html()
五、CSS操作 :CSS相关操作函数,css()、height()等
六、AJAX操作
七、遍历函数 :用于筛选、查找和串联元素的方法
八、数据存储
九、队列控制
十、核心
欢迎光临 Chinaunix (http://bbs.chinaunix.net/) |
Powered by Discuz! X3.2 |