jQuery

jQuery

1、什么是jQuery?

1、轻量级工具库，类库，
2、写得少，干的多，非常方便的一种工具，为众多程序员使用

2、版本

1、第一版本：兼容性好，但是效率低下
2、第二版本：最低兼容到ie9
3、执行效率高，但是彻底放弃了ie浏览器，ie9以下的浏览器都无法兼容，并且添加了很多实用的方法

3、核心语法

jQuery(selector).action()
简单写法：
$(selector).action()

1、文档就绪函数

1、写法的不同

js写法：

window.onload=function(){}

jQ写法：

$(document).ready(function(){})

简化写法：

$(function(){})
    或
$(()=>{})

js和jQ的区别？

1、js当中的window.onload 需要等到网页当中的所有的元素都加载完毕之后才能加载
2、jq当中的文档就绪函数则只需要等到dom结构加载完毕即可。
3、js可以存在多个文档就绪函数，但是会产生覆盖，生效的只会是最后的文档就绪函数
4、jq则不会覆盖，执行顺序从上至下

举例：如果一个html网页中的图片失效或不存在，则js会一直加载，不会跳过当前执行的代码，也就是说，js的文档就绪函数，是等到所有标签以及内容加载完毕后，才显示网页
5、jQ则不同，只要打开网页，标签被加载出来后就表示加载完毕了，而失效的部分不会影响页面其他代码执行

2、选择器

$('li:first')  选中第一个
$('li:last') 选中最后一个

eq选择器

$('li:eq(index)') 选中索引值的元素
$('li:gt(index)') 选中大于索引值的元素
$('li:lt(index)') 选中小于索引值的元素

常用的鼠标事件

鼠标事件:

• click
• dblclick
• mouseenter
• mouseleave

键盘事件:

• keypress
• keydown
• keyup

表单事件:

• submit
• change
• focus
• blur

文档/窗口事件:

• load
• resize
• scroll
• unload

3、jQ中的效果

• 显示：$(selector).show(speed(fast,slow,time),callback)
• 隐藏：$(selector).hide(speed(fast,slow,time),callback)
• 相当于js中的display:block和display:none

1、淡入淡出

fadeIn(time,callback)  淡入
fadeOut(time,callback) 淡出
fadeToggle(time,callback) (上一个动作完成以后才执行)淡入淡出的取反操作
fadeTo()逐渐改变被选元素的目标值
fadeTo(2000,0.4)

2、滑动效果

slideDown 向下
slideUp 向上
slideToogle 取反

3、自定义动画

$(selector).animate({params},speed,callback)

4、停止动画效果

stop(stopAll,goToEnd)
stopAll： 值为true 或者false ，用来表示是否清除动画队列，默认值为false
goToEnd: 是否立即完成当前动画，默认值为false

5、获取元素的内容

* text()  设置或者返回元素的文本内容
* html()  设置或者返回元素的内容 
* val() 设置或者返回表单字段的值
* attr  用于获取和设置属性值  

6、向网页当中添加标签:

append() 在被选元素内部的结尾插入指定内容
prepend() 在被选元素内部的开头插入指定内容 
after() 在被选元素之后插入内容 
before() 在被选元素之前插入内容 

7、删除

remove() 传参数就删除参数符合的元素 不传参数就直接全部删除
empty() 从被选元素中删除子元素

7、css类的操作:

addClass() 向被选元素添加一个或者多个类 
removeClass() 从被选元素中删除一个或者多个类 
toggleClass() 对被选元素的类操作进行取反

8、Tip:jQuery中用于释放$符号

$.noconflict()用于避免js和jq混合使用时造成字符重复