我爱编程

Jquery回看小记录

2018-06-07  本文已影响4人  仰望天空的人
引入个人库冲突解决:

将$引用的对象映射回原始的对象。相当于引入了两个$选择器的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 时中断调用
默认情况下,回调列表将像事件的回调列表中可以多次触发。

上一篇下一篇

猜你喜欢

热点阅读