jQuery的那些事儿

jQuery概述

j-JavaScript+Query就是查询js的库，把js中的DOM操作做了封装，实现快速查询使用其中的功能。

优化了DOM操作、事件处理、动画设计和Ajax交互

学习jQuery的本质：学习调用函数方法

优点：轻量级、兼容、链式编程、隐式迭代、对事件、样式、动画支持，大大简化了DOM操作，支持插件扩展开发

jQuery基本使用

1.入口函数等待DOM加载完毕再去执行JS代码

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

$(function(){
    ...
})

jQuery的顶级对象$，可以使用$将元素包装成jQuery对象

$是jQuery的别称，但是一般都是使用$

2.jQuery对象和DOM对象

原生js获取的对象就是DOM对象

var ... = document.getelementbyid('...');

jQuery获取的元素就是jQuery对象

$('div')

jQuery对象的本质就是利用$对DOM对象包装后产生的对象（伪数组形式存储）

3.jQuery对象和DOM对象的相互转换

DOM对象转换成jQuery对象

$(DOM对象)

jQuery对象转换成DOM对象

$('div')[index] index是索引号

$('div').get(index)

4.jQuery样式操作

参数只写属性名，则是返回属性值

$(this).css("color")

参数是属性名，属性值，逗号分开，是设置一组样式，必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("color","red")

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开,属性可不加引号

$(this).css({"color":"white","font-size":"20px"})

添加类 $("div").addClass("current")；

移除类 $("div").removeClass("current")

切换类 $("div").toggleClass("current")

5.类操作和className区别

原生JS中className会覆盖元素里面原先的类名

jQuery里面类操作只是对指定类进行操作，不影响原先的类名

jQuery效果

显示隐藏 show([speed,easing,fn]) hide() toggle()

滑动 slideDown() slideUp() slideToggle()

淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo()

自定义动画 animate()

事件切换 hover(function(){鼠标经过},function(){鼠标离开}) 如果只有一个函数，经过和离开都会触发函数

jQuery常用API

jQuery的基本选择器

**$("选择器") ** 里面的选择器直接就是CSS的选择器，加上引号即可

jQuery的隐式迭代

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，不用我们再去循环