jq冲刺

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对象）