jQuery学习之路---基础常用方法

前端常用图标:阿里巴巴矢量图标库--------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)------不但会复制元素,还会复制元素的事件

猜你喜欢

转载自blog.csdn.net/weixin_42805130/article/details/81706369