设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 786|回复: 0

[其他] jQuery方法总结

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-9-4 08:32:11 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
jQuery 方法总结

width()   height()

扩展:
width()                                //width
innerWidth()                        //width + padding
outerWhidth()                        //width + padding + border
outerWhidth(true)                //windth + padding + border + margin




Dom 节点操作:

同级别操作:
.insertBefore                //把指定元素插入到备选元素前面   例如:$('span').insterBefore($('div’)); 就是把span插入到div前面,这里面span是要插入得内容
.insertAfter                //把指定元素插入到备选元素后面
.before                        //在备选元素前插入内容        例如:$('span’).before($('div’));   就是把div插入到span前面,这里面div是要插入得内容
.appendTo                //把指定元素插入到备选元素内部得后面
.prependTo                //把指定元素插入到备选元素内部得前面




remove()  detach() 删除元素:

remove()  会删除元素得所有内容包括行为。
detach()   跟remove方法一样,但会保留这个元素得所有操作行为(事件)。
注意: var oDiv = $('div').remove();    有返回值,就是这个删除得元素。




siblings()   nextAll()  prevAll() 兄弟节点:

siblings() 查找所有兄弟节点,接受一个参数用作筛选功能(过滤)。
nextAll()  同siblings一样,查找下面所有兄弟节点。
prevAll()  同siblings一样,查找上面所有兄弟节点。

nextUntil('h2')  Until截至得意思,向下找到截至兄弟节点,h2是参数。
prevUntil('h2')  向上找到截至兄弟节点,h2是参数。
parentsUntil()  父级截至。


.wrap()   .wrapAll()  包装()

.wrap()  方法把每个被选元素放置在指定的 HTML 内容或元素中。包装()
.wrapAll()  在指定的 HTML 内容或元素中放置所有被选的元素。整体包装()
.wrapInner() 方法使用指定的 HTML 内容或元素,来包裹每个被选元素中的所有内容 (inner HTML)。
.unwrap() 方法删除被选元素的父元素。





serialize()   serializeArray()   表单序列化:

serialize()            方法将表单内容序列化为字符串。
serializeArray()   方法通过序列化表单值来创建对象数组(名称和值)。方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。



$.each()函数:
$.each()函数不同于JQuery对象的each()方法,它是一个全局函数,不操作JQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。





mouseenter()   mouseleave() 鼠标移入移出

是mouseover 和 mouseout得升级版,修复了 在多层次结构中 重复触发得问题




.animate()  运动  
.stop()  停止运动
.finish() 停止运动并到指定得目标点
.delay(1000)  用于运动中延迟执行

$('#div’).animate({width:’100px’,height:'100px’},’300’,’linear’,function(){ });
四个参数 依次是 运动得值和属性、运动时间、运动形式(匀速或者变速)、回调函数(运动完执行)
$(‘div').stop(true);  参数true 阻止所有运动(阻止后续运动)   无参数只组织当前运动
$(‘div').stop(true,true); 2个true  可以立即停止到指定得目标点。
$(‘div').finish();  会立即停止到所有指定得目标点。

stop(true,true)和 .finish() 得区别是:  finish会计算到最后,stop()只计算到当前运动中得目标点。

注意 delay 目测只有在$(‘div’).animeta({windt:'100px’}).delay(1000).animeta({height:’100px;’}) 中使用(也就是在一个效果队列或者说动画队列中使用),用delay并不能完全取代 setTimeout 或者 setInterval();





.on得 一些扩展

将数据传递到处理程序
function greet(shuju) { alert("Hello "+shuju.data.name); }
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);

注意如果 不通过{name:'karl'} 传递值,需要参数补全,$("button").on("click", null,"Karl", greet);  这里null是选择器。
推荐直接传键值对以免错误。

同一元素委托多个事件得写法:
$(".m-test-tree ").on({
    'mouseover': function() {
        $(this).addClass("libg");
    },'mouseout': function() {
        $(this).removeClass("libg");
    }
}, '.aline');

.on 和 .off 配合 绑定和移除绑定 拓展:命名空间
$("form").on("click.validator", "button", validate);
$("form").on("keypress.validator", "input[type='text']", validate);
$("form").off(".validator");
此处直接清楚命名空间为 .validator 得所有事件


$("form").on("click.123", "button", validate);
$("form").on("click.234", "button", otherFn);
$("form").off("click.123");
此处删除 click.123得事件 click.234依然可用.







$符号下得方法(工具方法):

不仅可以给JQ用还可以给原生JS用

$.type(something);                          判断类型

$.trim(str);                                          去掉前后空格

$.inArray();                  类似于indexOf 他是找数组中得位置        
参数:第一个参数是要找得内容、第二个参数是数组。
例子:var arr=[a,b,sd,d,dd,e];  alert( $.inArray(‘b’,arr) );  //1

$.proxy()                   改变this指向;
参数:第一个参数是函数 第二个参数是要修改this指向哪 后面参数是传参
例子:function show(){ alert(this) } $.proxy(show,document);   //obj.Document this指向document了

传参:$.proxy(show,document,参数1,参数2);
执行:$.proxy(show,document,参数1,参数2)();

$.noConflict()                防止冲突      var luciy = $.noConflict();

$.makeArray()                数组转换  







ajax()

$.ajax(function(){
    url: 地址,
    data:{
        参数1:值,
        参数2:值
    },
    type:’GET’,                        //请求方式默认GET  注意大写
    cache:’true'                //缓存 默认true 设置false浏览器不在缓存,
    dataType:                         //xml,json,script,html 不通知 jq会预处理,
    success:function(){},          //成功执行
    error:function(){},                            //失败执行
          timeout:3000                                          //超时
})

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-4 14:07

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表