温故而知新jQuery杂项

记录一些jQuery中常见的function
html()---innerHTML;
text()----innerText
val() --多用于表单元素,用于读写值
each(function(index,obj){..}) ---常用语循环对象数组,如选择器选中的元素组,注意第一个为索引,且传入的为HTML对象,转换成jQuery需要使用对应的$()进行包装
使用[0]访问一个$("a")返回的数组对象时,会将其转换成一个HTML对象,所以如果需要访问jQuery集合对象的第一个元素,需要使用$("a").slice(0, 1)....方法截取第一个元素或者$('a:first')...
attr('','') -- 一个参数为读取,二个参数为修改
html('') -- 不带参数为读取,带参数为替换
text("") --- 同上,区别是对标签的处理
append("") -- 添加内容,也可以用于移动指定元素
width() //height() 跨平台的宽高获取方法,带参数也可以用于设置宽高
a.wrap(b),用于将a元素嵌入b元素之内
before(),after() --在指定元素前后插入内容

常见的事件监听方法
blur( ), focus( ), load( ), resize( ),
scroll( ), unload( ), beforeunload( ),
click( ), dblclick( ), mousedown( ),
mouseup( ), mousemove( ), mouseover( ),
mouseout( ), mouseenter( ), mouseleave( ),
change( ), select( ), submit( ), keydown( ),
keypress( ), keyup( ), and error( ).

事件绑定的方法
1:bind("event name",date,handler) ; 其中date为可选的参数
2:.eventName(); 使用等同上面
3:one("event name",date,handler) ;区别第一种,该绑定方法只会执行一次

移除事件绑定
1:unbind('event name',handler) 用于移除事件绑定

event对象的使用--即事件触发时,传入给监听函数的参数
常见的有pageX ,pageY screenX screenY //用于获取鼠标触发所在的位置
target,relatedTarget 用于获取触发的目标
type 用于获取事件的类型
常见的方法
event.preventDefault( ) ;阻止浏览器对事件的默认行为

判断触发事件的按键
String.fromCharCode(event.keyCode);

hover事件,用于弥补a:hover 选择器的跨浏览器问题
hover(over, out)

特效和动画部分
hide() / show() 常见的隐藏和显示,可以带1个参数控制动画的时间,毫秒为单位,包括常量slow,faster等
也可以带两个参数,用于在动画执行完成后调用的回调函数
toggle() 包含上隐藏和显示元素,参数同上
fadeOut() 渐渐消失,参数同上
fadeIn() 渐渐出现
slideUp() 向上收缩
slideDown() 向下收缩
slideToggle() 用于切换收缩效果
fadeTo() 可以带三个参数,速度,透明度,回调,用于提供可控的渐变效果,其中透明度为0-1
animate() 提供自定义的动画变化效果,使用第一个参数的json对象,对需要变化的css值进行设置
$("#target").animate({
width: "80%",
opacity: 0.333,
fontSize: "26pt",
marginLeft: "0.5in",
borderWidth: "15px"
}, 2000 );

jQuery提供的工具方法,如$.trim()等
$.each(items,function(index,item){...}) //循环数组对象
$.brower.msie 用于判断浏览器类型,还有其他的safari opera msie mozilla version等属性
使用if($.browser.msie) { } 进行判断
$.support的使用同上,使用一些内部属性判断浏览器支持的行为 如$.support.boxModel
$.makeArray(objs) 用于将dom元素转换成一个数组保存,js中常见的是集合,转换成数组后更方便使用,提供了反转等方法,如:
var array =$.makeArray(document.getElementsByTagName("p"));
array.reverse( );

在数组中搜索
$.inArray(searchTerm, array))

过滤数组
$.grep( array,function(n,i)),

移除重复的元素
$.unique( );

判断对象是否为一个数组
$.isArray( )

循环处理数组元素,并返回一个新数组
var newarray=$.map(array, function(n, i){return x})

去除多余的空格
$.trim( )

使用Ajax

load方法,常用于加载部分的html代码,如一个div元素,使用get的方式提交数据
load(url, parameters, callback) , 一般可以用访问同域名下的文件.除了URL 其他参数都是可选的, parameters可以使用json的格式进行传递,对于中文也建议使用encodeUri()进行转义

$("#targetForm").serializeArray( )); 方便的讲一个表单转换成json后提交...同样中文问题需要解决

post() 方法,区别于load,使用post的提交方式,参数的顺序一致,在回调函数中,会传入返回的结果.
tip:如果返回的是一个json格式的字符串,可以使用eval进行转义,注意eval("var jsondate=("+strdate+")")

上述的Ajax功能只是简化版本的Ajax方法,如果需要提供异常处理,可以使用完整版的$.ajax方法,提供了大量可选的参数配置
$.ajax({
type: "GET",
url: "message.txt",
data: {data: 1},
success: callback
});

其他常见属性:
datatype来指定返回的数据类型,如Json,就节省了使用eval转化的步骤
error: err 用于设置错误监听的function,传入3个参数用于判断错误信息
timeout: 10,设置超时时间

对XML返回结果的解析,可以对返回的数据使用document.getElementsByTagName(..) //进行简单的选择

使用jQuery UI,除了原有的jQuery核心库外还需要
css
<link type="text/css" href="http://jqueryui.com/latest/themes/ base/ui.all.css" rel="stylesheet" />
js
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ ui.core.js"></script>
如果还保护使用其他的UI组件,也需要进行引入,如datepicker

百叶窗组件
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
$("#accordion").accordion( ); 进行填充

创建一个节点的方式
<div id="accordion">
<h3><a href="#">Section 1</a></h3> //节点标题
<div> //一个节点的内容区域
<p>This is the first section.</p> //内容
</div>
</div>

Dialog组件,使用的内容较多
<script type="text/javascript"src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript"src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
<script type="text/javascript"src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
调用方式
$("#dialog").dialog({
buttons: {"Ok": function( ) {
$(this).dialog("close"); } }
});
其中#dialog为一个选项被弹出的div,可以在内部设置所需的输入框

进度条组件
<script type="text/javascript"src="http://jqueryui.com/latest/ui/ui.progressbar.js"></script>

$("#progressbar").progressbar({value: 30 }); //将一个div填充为进度条,并且设置初始值

$("#progressbar").progressbar("value", 80); //调整进度条的值

tab组件
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

$(“#tabs").tabs( ); //将制定的div指定为div的容器
数据格式如下
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Item one</span></a></li>
<li><a href="#fragment-2"><span>Item two</span></a></li>
<li><a href="#fragment-3"><span>Item three</span></a></li>
</ul>
<div id="fragment-1">
<p>This is tab one.</p></div>
<div id="fragment-2">
<p>This is tab two.</p></div>
<div id="fragment-3">
<p>This is tab three.</p></div>
</div>

详细的可以查看相关的API