前端常用图标:阿里巴巴矢量图标库--------www.icong
css常识:不想让输入文本框拖拽设置:resize:none;就好
1$+++遍历数组
1 $.each(arr,function(index,value){console.log(index,value)});
index:当前遍历到的索引,value:遍历到的元素
注意:既可以遍历数组,又可以遍历伪数组
默认返回值:遍历谁就返回谁
2 $.map(arr, function (value, index) {console.log(index, value)});
默认返回值:是一个空数组
可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
2$+++去除字符串两端的空格
$.trim() 返回值为去除空格后的字符串
3$+++暂停/恢复ready执行
$.holdReady(true/false);
4$+++内容选择器
:empty 作用:找到既没有文本内容也没有子元素的指定元素
:parent 作用:找到有文本内容或有子元素的指定元素
:contains(text) 作用:找到包含指定文本内容的指定元素
:has(selector) 作用:找到包含指定子元素的指定元素
例: var $div = $("div:has('span')");
console.log($div);
5$+++属性和属性节点
1.attr(name|pro|key,val|fn)
作用: 获取或者设置属性节点的值
可以传递一个参数, 也可以传递两个参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数,
注意点:
如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增
2.removeAttr(name)
删除属性节点
注意点:
会删除所有找到元素指定的属性节点
1.prop方法
特点和attr方法一致
2.removeProp方法
特点和removeAttr方法一致
注意点:
prop方法不仅能够操作属性, 他还能操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
6$+++类相关的方法
1.addClass(class|fn)
作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可
2.removeClass([class|fn])
作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可
3.toggleClass(class|fn[,sw])
作用: 切换类
有就删除, 没有就添加
7$+++事件绑定方式
1.eventName(fn);
编码效率略高/ 部分事件jQuery没有实现,所以不能添加
2.on(eventName, fn);
编码效率略低/ 所有js事件都可以添加
注意点:
可以添加多个相同或者不同类型的事件,不会覆盖
8$+++事件的移除(解绑)
off方法如果不传递参数, 会移除所有的事件
$("button").off();
off方法如果传递一个参数, 会移除所有指定类型的事件
$("button").off("click");
off方法如果传递两个参数, 会移除所有指定类型的指定事件
$("button").off("click", test1);
9$+++事件冒泡
1.什么是事件冒泡?
事件从里向外,从下级传往上级的传递过程,点击儿子的事件父亲也会响应事件
2.如何阻止事件冒泡
在儿子的回调中加 return false; 或者 event.stopPropagation();
3.什么是默认行为?
4.如何阻止默认行为?
方法:在需要阻止的事件中添加return false; 或者 event.preventDefault();
10$++++自动触发事件
trigger() 注意点:1会触发事件冒泡,2会触发默认行为
triggeHandler() 注意点:不会触发事件冒泡,2不会触发默认行为
*自定义事件,必须满足两个条件:1事件必须通过on来绑定事件,2事件必须通过trigger()或triggerHandler()来触发
例:$(".son").on("myClick",function(){
alert("son");
})
11$+++事件委托
就是可以找一个在入口函数执行之前就有的元素,来监听你添加的事件。
通过delegate()来实现
列:$("ul").delegate("li","click",function(){
console.log($(this).html());
})
12$+++移入移出事件
1.mouseover / mousseout 子元素被移入移出也会触发父元素的事件
2.mouseenter / mouseleave 子元素被移入移出不会触发父元素的事件+++推荐使用
3.hover() 就是用2来实现的
13$+++显示隐藏动画
显示:.show(time,fn) *time动画时长,fn动画执行完毕之后调用
隐藏:.hidden(time,fn)
动画切换:.toggle(time,fn)
***展开收起动画
展开:slideDown(time,fn)
收起:slideUp(time,fn)
切换:slideToggle(time,fn)
14$+++网页滚动
scroll()
scrollTop()
15$+++淡入淡出
淡入:fadeIn()
淡出:fadeOut()
切换:fadeTaggle()
淡入到:fadeTo(time,opacity,fn)
16$+++动画停止继续
1.立即停止当前的,继续执行后续的动画:$("div").stop(false,false) / $("div").stop(false)
2.立即停止当前的和后续的所有动画:$("div").stop(true) / $("div").stop(true,false)
3.立即完成当前的,继续执行后续动画:$("div").stop(false,true)
4.立即完成当前的,并且停止后续所有的动画:$("div").stop(true,true)
17$+++节点的操作
一.添加节点:
1添加到指定元素内部
append()----将元素添加到指定元素内部的最后面
*appendTo()
prepend()-------将元素添加到指定元素内部的最前面
*prependTo()
2.添加到指定元素外部
after()------将元素添加到指定元素外部的最前面
before()------将元素添加到指定元素外部的最后面
二.删除节点:
1.remove([expr])------删除指定元素,全都删除
2.empty()----------删除指定元素的内容和子元素,指定元素自身不会被删除
3.detach([expr])-----和empty()效果一样
三.替换节点:
1.old.replaceWith([new])-----替换所有匹配元素为指定元素
2.new.replaceAll([old])--------作用同上,只是参数位置不一样
四.复制节点:
1.浅复制:clone(false)-----只会复制元素,不会复制元素的事件
2.深复制:clone(true)------不但会复制元素,还会复制元素的事件