jquery笔记

Jquery  UI 教程

操作元素

1.使用attr()方法控制元素的属性

$(" ").attr("href")：获得href属性值

$(" ").attr("href","http")：设置href属性值

http://www.w3school.com.cn

2.html(),text() 操作元素内容

参数为空时获取元素内容，不为空时设置元素内容

3.操作元素样式

css() 方法返回或设置匹配的元素的一个或多个样式属性。

$(selector).css(name)

$(selector).css(name,value)

$(selector).addClass(name)

$(selector).removeClass(name)

$(selector).removeAttr(name)

4.append()向元素追加内容

$(selector).append(content)

$(selector).append(function(index,html))

http://www.w3school.com.cn

appendTo

http://www.w3school.com.cn

$(content).appendTo(selector)

5.each()遍历元素

$("li").each(function(index){})

http://www.w3school.com.cn

6.remove(),enpty()删除元素

remove()删除备选元素本身及子元素

empty()删除被选元素的子元素

7.事件

http://www.w3school.com.cn/jquery/jquery_ref_events.asp

动画

1.show(),hide()控制元素的显示与隐藏

$("img").show(3000,function(){})

3000为show()执行的速度，function是显示成功后的回调函数

2.toggle()实现动画切换效果

$(selector).toggle(speed,[callback])

3.slideUp(),slideDown()滑动效果（实际上是改变元素的高度）

$(selector).slideUp(speed,[callback])

slideDown()仅适用于隐藏的元素，slideUp()则相反

slideToggle()切换slideUp(),slideDown()

$(selector).slideToggle(speed,[callback])

4.fadeIn(),fadeOut()实现元素的淡入淡出(改变元素的透明度)

$(selector).fadeOut(speed,[callback])

$(selector).fadeTo(speed,opacity,[callback])改变淡入淡出的不透明度

5.animate()制作动画效果

$(selector).animate({params},speed,[callback]);

params为制作动画效果的CSS属性名与值

<img style='width:0;height:0'>

$("img").animate({

height:"100px",

width:"100px";

},3000,function(){})

图片元素由小到大效果

animate()制作位置移动动画

将元素的定位属性设置为absolute或relative

<div style="width:0px; height:0px; background-color:#0F0; position:absolute"></div>

$(document).ready(function(){
$("div").animate({
width:"300px",
height:"500px"
},3000,function(){
$(this).animate({
left:"+=90px"
},3000,function(){
$(this).animate({
width:"+=50px",
height:"+=50px"
},3000,function(){
alert("finish");
});
});
});

});

6.stop()停止当前所有动画效果

$(selector).stop([clearQueue],[goToEnd])

clearQueue为布尔型值（是否停止当前动画，默认false）

goToEnd表示是否完成当前动画（默认为false）

http://www.w3school.com.cn/tiy/t.asp?f=jquery_stop_params

6.delay()延时执行动画效果（设置一个延时值来推迟动画效果的执行）

$(selector).delay(duration)

使用AJAX异步请求数据

1.load()方法异步请求数据

$(selector).load(url,[data],[callback])

将请求到的数据放在指定元素中；

2.getJSON方法

$.getJSON(url,[data],[callback])

3.getScript()异步加载并执行js文件

异步请求并执行服务器中的js格式的文件

$.getScript(url,[callback]);

4.get(),post()

5.serialize()序列化表单元素值

$(selector).serialize()

selector为已给或多个表单中的元素或表单元素本身

6.ajax()方法

http://www.w3school.com.cn/jquery/ajax_ajax.asp

7.ajaxSetup()设置全局ajax默认选项

$.ajaxSetup([options])

插件

1.表单验证插件 validate

该插件自带包含必填、数字、url在内的验证规则，及时显示异常信息，允许自定义验证规则

$("#formId").validate({options});

options参数表示调用方法时的配置对象，所有的验证规则和异常信息的显示位置都在该对象中设置。

http://www.cnblogs.com/linjiqin/p/3431835.html

2.图片灯箱插件--lightBox

该插件可以用圆角的方式展示选中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，

还能以自动播放的方式浏览图片

$(linkimage).lightBox({option});

其中linkimage参数为包含图片的<a>元素名称

3.图片放大镜插件-----jqzoom

http://www.oschina.net/p/jqzoom

4.搜索插件---autocomplete

5.右键菜单插件----contextmenu

$(selector).contextmenu(menuId,{options});

http://www.blogjava.net/supercrsky/articles/250091.html

6.自定义对象级插件-----lifocuscolor

自定义li标签获取焦点时 的背景色

$(id).focuscolor(color);

id为ul标签的id

7.拖拽插件----draggable

$(selector).draggable({options})

http://www.runoob.com/jqueryui/example-draggable.html

8.放置插件-----droppable

http://www.runoob.com/jqueryui/example-droppable.html

9.拖拽排序插件-----sortable

将序列元素（li、option）按任意位置进行拖拽形成新的序列

$(selector).sortable({options})

10.面板折叠插件-----accordion

11.选项卡插件-----tabs

12.对话框插件-----dialog

13.菜单工具插件-----menu

14.微调按钮插件-----spinner

15.工具提示插件-----tooltip