Jquery学习笔记(初级) .

字体大小: 中小 标准 ->行高大小: 标准
选择器
语法:$(selector).action()
选择器实例:
$(this) 当前 HTML 元素 
$("p") 所有 <p> 元素 
$("p.intro") 所有 class="intro" 的 <p> 元素 
$(".intro") 所有 class="intro" 的元素 
$("#intro") id="intro" 的元素 
$("ul li:first") 每个 <ul> 的第一个 <li> 元素 
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性 
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
  

注:jQuery 使用 XPath 表达式来选择带有给定属性的元素(上表中倒数第二个便是示例)。


重要函数


文档加载完成
$(document).ready(function(){ })
如果文档在未完全加载之前运行 jQuery 代码,有可能会有以下错误:
•试图隐藏一个不存在的元素
•获得未完全加载的图像的大小
为了避免这种情况需要将Jquery代码放在上面函数中执行。


单击事件
$(element).click(function(){})


双击事件
$(element).dblclick(function(){})


效果


隐藏/显示


隐藏: $(selector).hide(speed,callback);
显示: $(selector).show(speed,callback);
切换: $(selector).toggle(speed,callback);


可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。


淡入淡出


淡入: $(selector).fadeIn(speed,callback);
淡出: $(selector).fadeOut(speed,callback);
切换: $(selector).fadeToggle(speed,callback);
渐变: $(selector).fadeTo(speed,opacity,callback);


可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
必需的opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)


滑动


向下滑动: $(selector).slideDown(speed,callback);
向上滑动: $(selector).slideUp(speed,callback);
滑动切换: $(selector).slideToggle(speed,callback);


可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。


动画


开始动画
$(selector).animate({params},speed,callback);


必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。


注意:必须使用 驼峰标记法书写所有的属性名,
比如,必须使用 paddingLeft 而不是 padding-left,
使用 marginRight 而不是 margin-right,等等。


中止动画
$(selector).stop(stopAll,goToEnd);


可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。


jQuery 方法链接


下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,然后向下滑动:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);


HTML操作


获取内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值


获取属性
attr() - 设置或获取元素的属性值


添加内容
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容


删除内容
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
remove函数可以接收一个参数,以过滤要移除的元素,如: $("p").remove(".italic");


操作 CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性


元素尺寸
width() - 设置或返回元素的宽度(不包括内边距、边框或外边距)
height() - 设置或返回元素的高度(不包括内边距、边框或外边距)
innerWidth() - 返回元素的宽度(包括内边距)
innerHeight() - 返回元素的高度(包括内边距)
outerWidth() - 返回元素的宽度(包括内边距和边框)
outerHeight() - 返回元素的高度(包括内边距和边框)
outerWidth(true) - 返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) - 返回元素的高度(包括内边距、边框和外边距)。
$(window).width/height() - 返回浏览器窗口的宽度或者高度
$(document).width/height() - 返回HTML文档的宽度或者高度


元素遍历


向上遍历
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。


向下遍历
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
提示: 使用find("*")可以返回元素的所有子元素


水平遍历
siblings() 方法返回被选元素的所有同胞元素
next() 方法返回被选元素的下一个同胞元素
nextAll() 方法返回被选元素的所有跟随的同胞元素
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
prev() 方法返回被选元素的之前一个同胞元素
prevAll() 方法返回被选元素的之前所有的同胞元素
prevUntil() 方法返回介于两个给定参数之间的所有之前的同胞元素


过滤
first() 方法返回被选元素的首个元素
last() 方法返回被选元素的最后一个元素
eq() 方法返回被选元素中带有指定索引号的元素
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
not() 方法返回不匹配标准的所有元素(与filter作用相反)


Ajax


load() 
从服务器加载数据,并把返回的数据放入被选元素中
语法: $(selector).load(URL,data,callback);
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
提示:也可以把 jQuery 选择器添加到 URL 参数


$.ajax()
通过 HTTP 请求加载远程数据
比下面的$.get() 、$.post()方法更灵活强大
支持同步、异步、缓存、超时等设置
语法: $.ajax([settings])
详细参数说明参考手册


$.get() 
通过 HTTP GET 请求从服务器上请求数据。
语法: $.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名


$.post() 
通过 HTTP POST 请求从服务器上请求数据。
语法: $.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

此文章由 http://www.ositren.com 收集整理 ,地址为: http://www.ositren.com/htmls/67600.html