JQuery基础总结下

时间:2023-12-13 20:15:26
JQuery动画与特效

show()和hide()方法可以用来显示和隐藏元素,toggle()方法用来切换显示和隐藏。

$(selector).hide(speed,[callback]);
$(selector).show(speed,[callback]);
$(selector).toggle(speed,callback);

speend 可以设置为fast slow或者数字(毫秒),cellback是回调函数

slideUp()和slideDOwn()以及用来自动切换的slideToggle(),这个是上下滑动效果。细心的同学可能发现了,toggle这个词出现的时候一般都是用来切换的。所有以后看***toggle()这种方法的时候应该很快就能反映过来这是***的一个单击切换方法。

$(selector).slideUp(speed,[callback]);
$(selector).slideDown(speed,[callback]);
$(selector).slideToggle(speed,callback);

fadeIn() fadeOut() fadeTo() fadeToggle()这个四个方法是用来做淡入淡出效果的

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

$(selector).fadeTo(speed,opacity,callback);

$(selector).fadeToggle(speed,callback);

opacity的取值0-1。0代表透明,1代表不透明。

animate()方法用来制作动画效果,

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

params是css的参数,在{}里面写css代码即可。下面举个例子

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

注意:默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

stop()方法用来停止当前执行的动画。

$(selector).stop(stopAll,goToEnd);

stop()有的两个参数,在默认情况下都是false。

第一个参数是用来判断是否所有的动画。在false的情况下,stop只会停止当前的动作,但是后续的动作不会停止,如果把stopAll设置为true则会停止当前和后续的所有动作。

第二个参数是用来立即完成当前动画的。在两个参数都为true的情况下会立即执行完当前动画,并停止后续所有动画。当stopAll为false,goToend为true的时候会立即执行完当前动画,后续动画会在这个动画完成后立即执行。

建议大家自己动手实践下,效果一下就看出来了。

delay()方法用来设置延迟,调用的时候是对下一个动画设置的延迟,也就是说延迟的时间是从当前动画完成后开始计算的。这个方法不能设置当前的动画的延迟。

$(selector).delay(speed,queueName)
JQuery实现AJAX应用

load()方法从服务器加载数据,并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

在加载文件的时候可以选择文件其中制定的元素,例如加载”demo_test.txt”中的p1

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

get()和post()方法

$.get(URL,callback);
$.post(URL,data,callback);

get:必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:

$("button").click(function(){
$.get("demo_test.html",function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});

set:必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据:

$("button").click(function(){
$.post("demo_test_post.html",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});

{ name:"Donald Duck", city:"Duckburg" }这是个JSON对象。具体内容百度JSON。

这是最基本的三个方法,更多ajax方法请参见http://www.w3cschool.cc/jquery/jquery-ref-ajax.html

JQuery常用插件

在使用插件前,记得需要先引用。

表单验证插件-validate

这个插件的内容挺多的,具体用到的时候请参考http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

ajaxform()方法用来提交表格,并可以获取返回值。$(form). ajaxForm ({options})  参考: http://www.360doc.com/content/13/1001/17/1542811_318406421.shtml

lightBox()图片灯箱插件

该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:

$(linkimage).lightBox({options})

options的参数,参考http://code.ciaoca.com/jquery/lightbox/

 

jqzoom()放大镜

在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大镜的效果,调用格式如下:

$(linkimage).jqzoom({options})

其中linkimage参数为包含图片的<a>元素名称(即大图片),options为插件方法的配置对象。参数和实例参考http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819887.html

cookie插件可以很方便地通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为$.cookie(名称,值,[option])

具体内容参考http://www.cnblogs.com/kissdodog/archive/2012/12/14/2818827.html

autocomplete()搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下:

$(textbox).autocomplete(urlData,[options]);

其中,textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。

options的参考网址:http://www.jb51.net/article/24219.htm

http://www.cnblogs.com/chengxiaohui/articles/1872882.html

contextMenu()右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:

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

Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。

options的参考网址:http://www.blogjava.net/supercrsky/articles/250091.html

http://fs20041242.iteye.com/blog/830889

现在网上有很多各种各样的插件,在具体项目需要的时候再百度下,应该会了解到更多实用的插件。

JQuery UI插件

draggable()

拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下:

$(selector). draggable({options})

options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。

更多options参考:http://www.w3cschool.cc/jeasyui/plugins-base-draggable.html

http://www.cnblogs.com/tyxloveyfq/archive/2013/04/27/3046732.html

droppable()

droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:

$(selector).droppable({options})

selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。

droppable全面解析参考:http://www.w3cschool.cc/jqueryui/api-droppable.html#option-accept

sortable

拖曳排序插件的功能是将序列元素(例如<option>、<li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为:

$(selector).sortable({options});

selector参数为进行拖曳排序的元素,options为调用方法时的配置对象

sortable全面解析参考:http://www.w3cschool.cc/jqueryui/api-droppable.html#event-drop

accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下:

$(selector).accordion({options});

其中,参数selector为整个面板元素,options参数为方法对应的配置对象。

accordion全面解析参考:http://www.w3cschool.cc/jquery/jquery-plugin-accordion.html

tabs

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下:

$(selector).tabs({options});

selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容

tabs全面解析参考:http://blog.csdn.net/dier4836/article/details/5109410

http://www.w3cschool.cc/jqueryui/api-tabs.html

dialog

对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中alert()confirm()函数的功能,它的调用格式为:

$(selector).dialog({options});

selector参数为显示弹出对话框的元素,通常为<div>,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

dialog全面解析参考:http://blog.csdn.net/xue_feitian/article/details/6462105

http://www.w3cschool.cc/jqueryui/example-dialog.html

menu

菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下:

$(selector).menu({options});

selector参数为菜单列表中最外层<ul>元素,options为menu()方法的配置对象。

menu全面解析参考:http://www.w3cschool.cc/jqueryui/example-menu.html

spinner

微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下:

$(selector).spinner({options});

selector参数为文本输入框元素,可选项options参数为spinner()方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。

spinner全面解析参考:http://www.w3cschool.cc/jqueryui/example-spinner.html

tooltip

工具提tooltip示插件可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置,它的调用格式如下:

$(selector).tooltip({options});

其中selector为需要显示提示信息的元素,可选项参数options为tooltip()方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。

tooltip全面解析参考:http://www.jb51.net/article/19368.htm

http://www.css88.com/jquery-ui-api/tooltip/index.html

http://www.w3cschool.cc/jquery/jquery-plugin-tooltip.html

JQuery工具类函数

jQuery从1.9版开始,移除了$browser和$.browser.version,取而代之的是$.support.

jQuery.support 用于检查浏览器对各项特性的支持。检查项多达 27 个。

具体27个检查项,参考:http://xxing22657-yahoo-com-cn.iteye.com/blog/1044984

在jQuery中,可以调用名为$.isEmptyObject的工具函数,检测一个对象的内容是否为空,如果为空,则该函数返回true,否则,返回false值,调用格式如下:

$.isEmptyObject(obj);

其中,参数obj表示需要检测的对象名称。

$.contains

调用名为$.contains的工具函数,能检测在一个DOM节点中是否包含另外一个DOM节点,如果包含,返回true,否则,返回false值,调用格式为:

$.contains (container, contained);

参数container表示一个DOM对象节点元素,用于包含其他节点的容器,contained是另一个DOM对象节点元素,用于被其他容器所包含。

$.strm(str)用来去除字符串的空格。

$.extend

调用名为$. extend的工具函数,可以对原有的工具函数进行扩展,自定义类级别的jQuery插件,调用格式为:

$. extend ({options});

参数options表示自定义插件的函数内容。参考:http://www.cnblogs.com/chengzi/p/3994609.html

http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html