首页 > 代码库 > jquery学习记录

jquery学习记录

2024-07-31 03:09:41   208人阅读

<style></style>

append的用法

//$(document).append是用来向元素内部的结尾处追加内容或标签的方法
// 如果是追加一个字符串来添加元素的话,就是追加元素,
// 如果追加的是现有元素的话,等同于移动
// 新增元素
 var obj="<div>我是一个字符串</div>" ;
 $ ("body"). append(obj );
//移动元素
 var obj=$(".div1" )[0];
 $ ("body"). append(obj );
on和live的用法区别
.on
$(父级元素).on("event","需要绑定这个事件的元素",function(){});
使用on的时候也可以像bind那样使用，当然，也无法绑定未来生成的元素
$("doc").bind("event",function(){}); = $("doc").on("event",function(){});
.on的参数 events,[selector],[data],fn
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
这种用法就是bind的用法
 
.live
$("需要绑定事件的元素").live("事件",function(){})
jquery1.9移除了toggle()事件,只剩下了toggle()方法;
如需使用,则需要使用此插件:
;(function ($ ) {
 $.fn.extend({
 toggle : function ( fn) {
 // Save reference to arguments for access in closure
 var args = arguments,
 guid = fn.guid||jQuery.guid++ ,
 i = 0,
 toggler = function (event) {
 // Figure out which function to execute
 var lastToggle = (jQuery._data(this,"lastToggle" + fn.guid) || 0 ) % i;
 jQuery._data(this ,"lastToggle" + fn.guid, lastToggle + 1);

 // Make sure that clicks stop
 event.preventDefault();

 // and execute the function
 return args[lastToggle].apply(this,arguments) || false;
};

 // link all the functions, so any of them can unbind this click handler
 toggler.guid = guid;
 while (i < args.length) {
 args[ i++].guid = guid ;
}

 return this.click(toggler);
}
});
})(jQuery);
$.fn.extend和$.extend的用法以及区别
$.fn.extend为jQuery类添加类方法，可以理解为添加静态方法。
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。
以下写法是符合AMD规范的写法,以后添加的插件都要符合AMD规范
$.fn.extend:
;(function (factory ) {
 if (typeof define === "function" && define. amd) {
 // AMD模式
 define (["jquery"], factory);
} else {
 // 全局模式
 factory (jQuery);
}
}(function ($) {
 $.fn.maxHeight= function () {
var max = 0 ;

 this.each( function () {
 max = Math.max(max ,$( this).height());
});

 return max;
};
}));
//调用方法
//这里是添加了jQuery对象方法,可以对jQuery的实例对象使用
var hei = $(".btn").maxHeight();
console.log( hei);
$.extend:
;( function (factory ) {
 if (typeof define === "function" && define. amd) {
 // AMD模式
 define (["jquery"], factory);
} else {
 // 全局模式
 factory (jQuery);
}
}(function ($) {
 $.extend({
 _pomin:function (a,b) {
 return a < b ? a : b
 },
 _pomax:function (a,b) {
 return a > b ? a : b
 }
})
}));
//调用方法
//jQuery在调用的时候可以根据的你的参数写成其它的,比如$
//这里是添加了jQuery静态方法,注意不要和jQuery现有方法重名
jQuery._pomin( -5, 10);
jQuery._pomax( -55, -70);
jquery Hammer用法
 
<!doctype html>
<html>
<head>
<title >hammer jq</ title>
<script type="text/javascript" src=http://www.mamicode.com/"jquery-2.1.1.min.js"></script >
<script type="text/javascript" src=http://www.mamicode.com/"hammer.min.js" ></script>
<script type="text/javascript" src=http://www.mamicode.com/"jquery.hammer.js"></script >
<script type="text/javascript">
 $ (function(){
 $ (".ham").hammer().bind("tap", function(){
 alert( "tap");
});
})
 </ script>
</head >
<body style="width :300px ;height: 300px; ">
<div class="ham" style="width :50px ;height: 50px; background:#0ff ;"></ div>
</body >
</html >
jquery.hammer.zip
35.9 KB
.wrap和.wrapAll
//wrap是给每个匹配的元素包裹元素
//wrapAll是给匹配的元素的最上级包裹元素
//给body的每一个子元素包裹一层id=mask的div
$("body").children().wrap("<div id=\"mask\"></div>");
//给body加一个id=mask的div,使其包裹div下所有的元素
 $("body").children().wrapAll("<div id=\"mask\"></div>");
//这里是可以用find()的,用children()是为了少选择一些元素,减少一些不必要的遍历
jquery attr和prop
jquery1.6引入了prop;
对于prop和attr的使用情况有些不清楚,特记录:
对于dom元素自有属性使用prop来操作,对于自定义属性使用attr来操作,
attr操作复选框元素的选中属性时,如果使用attr,第一次选中是正常的,
第二次选中虽然选中了,但是没有打勾的样式,使用prop正常;
prop使用prop可以设置自定义属性,但是第一次获取自定义属性的时候返回值为undefined;
prop不可以操作onclick 而使用attr是可以的 所以以上所述不是很合理 //遇到了再继续研究
 

以下是官方建议attr(),prop()的使用：

Attribute/Property.attr().prop()
accesskey√ 
align√ 
async√√
autofocus√√
checked√√
class√ 
contenteditable√ 
draggable√ 
href√ 
id√ 
label√ 
location ( i.e. window.location )√√
multiple√√
readOnly√√
rel√ 
selected√√
src√ 
tabindex√ 
title√ 
type√ 
width ( if needed over .width() )√ 
jquery keydown
通过监视键盘的按键来执行一些事件,比如,回车键登陆这个就很常见;
$(window).keydown(function(e){//这个是用来回车键登陆的
var code=e.keyCode;
if(code==13){
alert("clickEnter")
}else{
//按了按键但不是回车键
}
});
这次绑定的是window对象,当然也可以绑定其他事件;通常,可以绑定事件的
只能是文本域,因为必须获取焦点才可以响应keydown事件,如果非要给div加
这个事件的话也是可以的,给div加一个tabindex="1"即可,不过不建议这样做,
因为会出现很难看的边框,当然边框还是可以去掉的outline:none,即可;
绑定keydown的时候,还是建议绑定过需要执行事件的文本域比较合适;
jquery hover mouseover+mouseout mouseenter+mouseleave
hover=mouseenter+mouseleave
mouseenter 只有鼠标进入被选元素才会触发;
mouseover 当鼠标进入被选元素以及被选元素的子元素是都会触发;
通常会使用mouseenter+mouseleave来做鼠标移动事件;

 

jquery学习记录


联系
我们