Jquery回看小记录

引入个人库冲突解决:

将$引用的对象映射回原始的对象。相当于引入了两个$选择器的js
jQuery.noConflict(); // 使用 jQuery
jQuery(“div p”).hide(); // 使用其他库的 $()
$(“content”).style.display = ‘none’;

核心: 【完结】
选择器 : 【完结】

如果选择器中包含特殊字符,可以用两个斜杠转义。 一个符号加两个 两个符号加四个
$(“div:contains(‘John’)”) 内容包含john的元素 $(“input[name!=’newsletter’]”).attr(“checked”, true);
$(“td:empty”) 查找空元素

属性 : 【完结】

prop(“属性”,”值”:也可以是函数”); 和attr用法一样 值返回true和false 属性后面的函数
$(“input[type=’checkbox’]”).prop({ disabled: true }); 禁用页面上所有的复选框
$(“li”).parent().is(‘ul’) 判断li的父元素是否是ul 返回false和true if($(“.top-nav a”).eq(0).is(“.active”))判断类名加点
下拉框不折叠 全部显示

筛选 : 【完结】

if ( $(this).hasClass(“protected”) ) 判断是否包含这个类
$(“div”).css(“background”, “#c8ebcc”).filter(“.middle”).css(“border-color”, “red”); 过滤器 选中类名为**的元素
jQuery 代码:
$(“p”).slice(0, 2).css(“color”,”red”); 选中元素的下标 从什么开始到什么结束包括结束元素
$(“p”).wrapInner(““); 在每个 p 元素的内容上包围 b 元素:
$(“li:first”).closest([“ul”, “body”]); 查找祖先元素 和parents类似
$(“h1”).add(“p”).add(“span”).css(“background-color”,”yellow”); 给选中的元素设置相同的样式
map() 遍历出来是jquery对象,通过get方法转换为dom对象
$(“ul”).has(“li”).addClass(“full”); 给包含有li子元素的ul加一个类名
find()与(“p span”)相同。
$(“#term-1”).nextUntil(term3, “dd”).css(“color”, “yellow”);
$(“p”).offsetParent().css(“background-color”,”red”); 设置距离自己最近的父元素 必须是定位的属性的父元素
$(‘li.item-a’).parentsUntil(‘.level-1’).css(‘background-color’, ‘red’);
查找指定元素的所有父元素 parentsUntil(‘.level-1’)代表找到哪里停止 但不包括他本身
$(‘#term-2’).prevUntil(‘dt’).css(‘background-color’, ‘red’); 指定元素的同辈元素 代表找到哪里停止 但不包括他本身
$( “li.third-item” ).nextAll().addBack().css( “background-color”, “red” ); 包括他自己在内 都变成红色
$(“p”).contents().not(“[nodeType=1]”).wrap(““);
$(“p”).find(“span”).end().css(“border”, “2px red solid”)把P的边框设置了。 意思还是设置p元素 毛用没有这个 返回的意思 必须和find一起使用

文档处理 : 【完结】

$(p).wrap(”“); 给元素外层包一层标签
unwrap() 删除指定元素的父元素
wrapAll() 用一个div包裹所有匹配的段落
$(“p”).wrapInner(““); 给元素内部包含一层标签
$(“p”).replaceWith(“Paragraph. “); 替换当前标签
$(“Paragraph. “).replaceAll(“p”); 和上面差不多
$(“p”).empty(); 删除元素的所有子节点
$(“p”).remove(); 删除所有匹配的元素 $(“p”).detach(); 和前面一样 但会保留它的数据和方法
$(“b”).clone(); 克隆自己 属性方法写在括号里
prepend 插入到元素里内容的前面,prependTo 相反

css : 【完结】

$.cssHook
scrollTop scrollLeft 将滚动条设置到指定的位置
change(); 当元素内容发生改变时触发,只有当离开时才触发 自己写个函数边写边触发的那种
error 一个函数,如果图片未加载 然后进行什么样式
offset 值不写单位 outerHeight(true) 不写参数获取元素高度 写了true加上外边距内边距啥的 margin padding

事件 : 【完结】

$(“body”).on(“click”,”p”,function() 这样写后面添加进去的就有事件了 off删除on的绑定事件
bind 同时绑定多个事件 采用css({})方法
slideToggle() 点一下隐藏 点一下出来
one 语法和bind一样 只会触发一次事件
trigger 点击事件的时候选中文本域
triggerHandler 和上面的不一样 触发时不会选中文本
$( “#target” ).contextmenu(function() 鼠标右键单击事件 左键是click
var userObj = { name: “CodePlayer”, age: 18 }; // 为所有p元素绑定click事件,并传入附加数据(user)
$(“p”).on( “click”, userObj, function(event){
alert( event.data.name ); // CodePlayer 必须是对象或数组
} );
$(“p”).bind(“click”, {foo: “bar”}, handler); 点击的时候把foo的值弹出来 首先写一个handler的函数 ————–$(“p”).unbind( “click” ) 与bind相反 删除绑定的事件
live 和on方法类似 1.7版本移除 和他相反的die方法也移除
delegate live方法的代替 undelegate删除绑定的事件 {先写元素,后写事件}
toggle 两次点击事件 相当于hover 可以写个回调函数
fousein 可以检测子元素获取焦点 然后写事件处理程序 fouseout 和这个相反
keydown 键盘按下 switch(event.keyCode) 键盘码 keypress 它发生在当前获得焦点的元素上{计算在输入域中的按键次数} keyup 抬起事件
mousedown 移入元素 并按下 mousemove 移动 mouseup 离开
select 当文本框内容被选中时 触发的事件 就是要复制时那种状态
submit 提交事件 可以return false;阻止
unload 不管用 关闭时没提示 【onunload事件IE中有效,其他无效 {onbeforeunload}事件,所有浏览器有效 缺点刷新时会提示】
window.location.href=”about:blank”; window.close(); 点击元素关闭窗口
change $(“option:checked”) 对选中的option操作
$(‘.play-list ul’).empty(); 移除元素内的所有内容和子节点
off 移除事件
$( document ).bind(“click”, function( e ) { 事件委托
$( e.target ).closest(“li”).toggleClass(“hilight”);
});
isnan函数 检测是否为数值

效果 : 【完结】

$(“p”).slideDown(); 以滑动的方式显示隐藏的元素 $(“p”).slideUp(“slow”); 相反 都有回调函数 $(“p”).slideToggle(“slow”);
$(“p”).fadeIn(“slow”); $(“p”).fadeTo(“slow”, 0.66); 这俩一样 出现 $(“p”).fadeOut(“slow”); 隐藏 $(“p”).fadeToggle(“slow”,”linear”);
$(“#box”).stop(); 停止正在执行动画的元素 $(‘#foo’).slideUp(300).delay(800).fadeIn(400); 中间的函数 用来延迟动画的执行
.finish()方法和.stop(true, true)很相似,.stop(true, true)将清除队列, $(“div”).finish();停止动画
jQuery.fx.off = true; 将页面上所有有动效的元素停止动画 意思就是本来有过度效果 设置true后就没了 false就有了
jQuery.fx.interval = 1000; 意思是过度的时间速度 相当于speed每秒变化多少
————————————————————————————————————————
工具 :调试浏览器是否支持用到
过滤数组中小于 0 的元素。
$.grep( [0,1,2], function(n,i){
return n > 0;
});
排除数组中大于 0 的元素,使用第三个参数进行排除。
$.grep( [0,1,2], function(n,i){
return n > 0;
}, true);
array,callback,[invert]Array,Function,BooleanV1.0array:待过滤数组。
callback:此函数将处理数组每个元素。第一个参数为当前元素,第二个参数而元素索引值。此函数应返回一个布尔值。另外,此函数可设置为一个字符串,当设置为字符串时,
将视为“lambda-form”(缩写形式?),其中 a 代表数组元素,i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”。
invert:如果 “invert” 为 false 或为设置,则函数返回数组中由过滤函数返回 true 的元素,当”invert” 为 true,则返回过滤函数中返回 false 的元素集。
得到所有li的元素数组 把jQuery集合中所有DOM元素恢复成一个数组。 alert($(‘li’).toArray());
$.fn.jquery .jquery 属性是通过 jQuery 原型赋值的,通过使用它的别名 $.fn 进行引用。

事件对象 :

$(document).bind(‘mousedown’,function(e){ mouseup 去除move事件就行了 去除down事件就没效果了
e.preventDefault();
$(document).bind(“mousemove”,function(e){
$(“#log”).text(“X: ” + e.pageX + “, Y: ” + e.pageY);
});
$(document).bind(“mouseup”,function(){
$(document).off(“mousemove”);
})

});
event.type 返回事件类型
event.which 将 event.keyCode 和 event.charCode 标准化了。
$(‘#whichkey’).bind(‘keydown’,function(e){ 返回按下的键盘码
$(‘#log’).html(e.type + ‘: ‘ + e.which );
});
event.keyCode; 键盘码

延迟对象 :
回调函数 :

var callbacks = $.Callbacks(); 回调列表中添加一个回调或回调的集合 callbacks.disable(); 禁止回调
callbacks.empty(); 从列表中删除所有的回调. callbacks.fire( ‘hello again’ ); 这个参数或参数列表传回给回调列表。
callbacks.fired() 使用callbacks.fired() 确定,如果列表中的回调至少有一次被呼叫 呼叫过true 没有false
callbacks.fireWith( window, [‘foo’,’bar’]); 相当于两个参数
console.log( callbacks.has( foo ) ); // true 意思就是这个函数被调用了没有
callbacks.lock(); 锁定 后面的参数就修改不了了 callbacks.locked() 检测这个函数传参是否已被锁定 是true 否false
callbacks.remove( foo ); 删除回调函数 在它后面传的参数都不行
var callbacks = $.Callbacks( “once” );
once: 确保这个回调列表只执行一次(像一个递延 Deferred).
memory: 保持以前的值和将添加到这个列表的后面的最新的值立即执行调用任何回调 (像一个递延 Deferred)
unique: 确保一次只能添加一个回调(所以有没有在列表中的重复).
stopOnFalse: 当一个回调返回false 时中断调用
默认情况下,回调列表将像事件的回调列表中可以多次触发。

  • jq源码链式调用实现 写在原型对象中 通过return this;完成链式
  • 再会!
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,122评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,070评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,491评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,636评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,676评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,541评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,292评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,211评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,655评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,684评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,295评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2 355

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,335评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,174评论 0 1
  • 一:认识jquery jquery是javascript的类库,具有轻量级,完善的文档,丰富的插件支持,完善的Aj...
    xuguibin阅读 1,711评论 1 7
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 1,045评论 0 2
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 720评论 0 9