jq冲刺

绝地灬酷狼 2021-12-16 02:43 243阅读 0赞

1、入口函数  
$(document).ready(function()\{

\})  
简便写法：  
$(()=>\{  
  
\})

js的入口函数window.onload()区别  
js的入口函数要比jq的要晚很多，window.onload事件必须等待网页全部加载完毕（包括图片等），然后再执行JS代码  
jq仅等待页面加载,只需要等待网页中的DOM结构加载完毕，就能执行JS代码

2、$('选择器')  
获取对象，返回伪数组，支持隐式遍历  
.text(\[string\])方法获取或设置对象内仅文本内容  
.html(\[string\])方法获取或设置对象内的文本和标签  
不存在兼容性问题  
js对象不能调用jq对象的方法  
jq对象也无法调用js对象的方法

3、js对象jq对象转换  
1)jqEle=$(js对象名)  
2)jsEle=jq对象.get(index)//index是指伪数组内的索引  
或 jq对象\[index\]

4、JQ选择器  
1)$('a>b')子代选择器  
2)$('a b')后代选择器  
3)$('ab')交集选择器  
4)$('a,b')并集选择器  
5)$("a:eq(index)") 选取第Index个a元素，index从0开始  
6)$("a:odd")/$("a:even") 选取奇偶

5、筛选选择器  
主要是方法，用jq元素来调用  
1).children(\[selector\]) 查找子代，若未给定selector，返回所有子代组成的数组  
2).find(selector) 查找后代，返回符合给定选择器要求的元素数组  
2).siblings(\[selector\]) 查找符合selector要求的兄弟元素，不包括本身。不传参时返回所有兄弟元素  
4).parent() 查找父级元素  
5).eq(index) 查找 等价于 $('a:eq(index)')，返回一个JQ对象  
6).prev() 返回上一个兄弟元素  
7).next() 返回下一个兄弟元素  
8).prevAll();//之前所有兄弟元素  
.nextAll();//之后所有兄弟元素

6、css操作  
1)获取元素样式属性值  
.css('property') 返回指定样式属性的值,无法链式调用  
2)设置元素样式属性值  
允许链式调用  
.css('property','value')  
.css(\{  
property1:value1,...  
\})

7、class操作  
.addClass(“类名”);//在原有类的基础上添加给定类  
同名属性值的问题与css的优先级有关  
.removeClass(“类名”);//移除指定类  
.hasClass(“类名”)；//返回布尔值，判断是否有指定类  
.toggleClass(“类名”)；//切换类，若有给定类，将该类从对象中删除，若没有，则加上该类

8、属性操作  
1）样式与属性的区别  
样式：在style内写的，用css操作  
属性：在标签里面写的，用attr方法操作  
2）设置单个属性  
.attr(“属性名”,“属性值”);  
3）获取属性  
.attr(“属性名”);

9、prop  
对于值为布尔类型的属性，不可以使用attr方法，应使用prop方法。它的用法与attr用法一样  
.prop('checked',true)  
.prop('disabled',true)

10、show/hide等动画函数  
1).show(speed,\[callback\])  
使元素显示，speed持续时间，callback回调函数  
如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。  
2)hide(speed,\[callback\])  
如果被选的元素已被显示，则隐藏该元素  
3).slideDown/.slideUp  
参数列表同上  
4)fadeIn/fadeOut/fadeToggle 同理

11、自定义动画函数  
1).animate(prop,speed,easing,callback)  
prop:对象，里面写属性键值对。必填。参数注意：width:800或width:“800px”;  
speed:动画的持续时间  
easing:动画的执行效果：“swing”:先快后慢再快（默认）  
“linear”:匀速  
callback:回调函数  
2)动画队列  
JQ会将所有动画效果保存到一个动画队列里  
优点：能让动画有序执行  
缺点：动画滞留  
.stop(\[stopAll\],\[gotoend\]);//停止当前正在执行的动画，通常放在各个动画之前  
参数值均为布尔类型：  
是否清除动画队列/是否跳转到最终效果

12、节点操作  
参数要用选择器时务必使用$()方法获取对象，不能直接写选择器  
1)创建节点：  
var $node=$('html标签及文本')  
2)添加节点  
父元素调用：  
.append($node)//追加到子元素末尾  
.prepend($node)//追加到子元素开头  
子元素调用  
$node.appendTo('被追加的父元素')  
$node.prependTo('被追加的父元素')  
兄弟元素调用  
.after($node) 追加到该兄弟元素之后  
.before($node) 追加到该兄弟元素之前  
3)删除/清空节点  
清空与删除节点  
$el.html("");//清空指定元素内的所有内容，容易发生内存泄露不推荐  
$el.empty();//推荐  
删除元素：  
$el.remove();//删除给定元素el,该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。  
4)克隆元素  
$el.clone();//克隆给定元素，不论传参数传true还是false或者是不传，都将进行深复制。不同的是传true会复制事件。传false不会复制事件

13、val()  
val方法用于设置和获取表单元素的值，如input/textarea  
设置与获取  
.val(“需要设置的字符串”)；  
.val();//获取字符串

14、元素尺寸  
1)设置/获取元素宽/高度  
.width(num) .height(num)  
2)其他的：  
width()方法获取的仅是元素width属性的值  
而innerWidth()获取的是元素padding+width的值  
outerWidth()默认获取的是元素padding+width+border的值  
若传参数true，则会将margin值也加上  
height同理  
3).scroll(callback)  
scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。  
.scrollTop()  
返回或设置匹配元素的滚动条的垂直位置  
.scrollLeft()  
返回或设置匹配元素的滚动条的水平位置  
4)  
.offset();//返回object对象，含元素相对于document的left和top属性值  
.position();//获取元素相对于有定位的父元素的位置

15、JQ事件机制  
1)事件的绑定方式在jq中有3种  
①bind：  
.bind(type,function()\{\})  
特点：隐式迭代大量元素时，消耗资源大  
不能为以后动态创建的元素绑定事件  
②fatherElement.delegate(child,type,function()\{\})  
基于委托事件的原理，child上发生的事件通过冒泡的原理由其父元素代为执行。  
事件会一层层从event target向上冒泡，直至到达你为其绑定事件的元素，如此例中的fatherElement。  
DOM树过深时，同样影响性能  
③on  
最原始的，最推荐的，12都是基于本方法：  
.on(type,\[委托者\],function)  
需要给动态添加的元素绑定时，用delegate()或者on()

1)注册事件  
注册简单事件（表示给调用元素绑定事件，仅能由自己触发，不支持动态绑定）：  
$(selector).on(“事件类型”,function(e)\{\});  
注册委托事件:  
$(selector).on(“事件类型”,后代selector,function(e)\{\});  
先执行现有的事件，再执行委托事件，最后才是父级冒泡事件  
2)事件处理函数  
e.screenX/Y  
e.pageX/Y  
e.clientX/Y  
定义与js一致  
3)  
e.preventDefault();//阻止默认行为  
e.stopPropagation();//阻止冒泡  
4).end()  
返回上一个this对象  
5)  
jq隐式迭代会对所有的dom对象设置相同的值，但如果我们需要给每一个对象设置不同的值，则需要自行进行迭代。或者使用each方法  
这个方法将遍历jq对象集合，为每个匹配的元素执行一个函数  
$(selector).each(function(index,element)\{\});  
参数1为当前元素在所有匹配元素中的索引号，参数2表示当前元素（dom对象）

转载于:https://www.cnblogs.com/Tanqurey/p/10636257.html