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事件

单个事件注册
事件处理on()绑定事件,off()解绑
element.on(events,[selector],fn)

$("div").on({
            mouseenter: function () {
                $(this).css("background", "pink");
            },
            click: function () {
                $(this).css("background", "skyblue");
            },
            mouseleave: function () {
                $(this).css("background", "blue");
            }
})

jQuery效果

显示隐藏 show([speed,easing,fn]) hide() toggle()
滑动 slideDown() slideUp() slideToggle()
淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo()
自定义动画 animate()
事件切换 hover(function(){鼠标经过},function(){鼠标离开}) 如果只有一个函数，经过和离开都会触发函数

jQuery常用API

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

jQuery的隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，不用我们再去循环