初识jQuery

jQuery只是众多js框架中的其中一个！
设计理念 write less do more

jquery-1.8.3.js 开发版本 项目开发过程中 便于我们阅读 262kb
jquery-1.8.3.min.js 生产版本 项目已经上线 压缩版 92kb

首先去官网 jQuery.com 下载指定的版本！

$===jQuery

window.onload 和 $(document).ready(function(){}) 区别：
01.执行时机不同
window.onload必须是等待页面中所有元素加载完毕之后，才会执行！
$(document).ready(function(){})只需要html结构加载完成，页面中的视频，音频，图片还没有加载就会执行！
02.简写方式
window.onload 没有简写方式
$(document).ready(function(){}) 简写方式$(function(){})
03.页面书写的个数
window.onload 在整个页面中只有一个会产生效果
$(function(){}) 可以书写N个

 

jQuery的基本语法

$("选择器") ====》工厂函数

一个对象放在了工厂函数中就是 jQuery对象！
否则就是dom对象！

mouseover鼠标移入事件
mouseout 鼠标移出事件

hover 鼠标移入和移出事件

假如我们给父div设置了mouseover事件！mouseout事件！
那么无论我们的鼠标移动在它自身，或者是它的子元素上时，都会触发这个事件！

mouseenter事件！mousemove事件！
只有当鼠标移动到当前元素时，才会触发次事件！

js中的 innerHTML innerText
jQuery html text

区别：
01.赋值方式不同
innerHTML=""; innerText="";
html("") text("")

02.功能不同
html()和text()在没有传递值的时候，默认是获取响应元素的内容！

html()获取的是包含html标签的值！
text()获取的是包含的文本值！

链式操作
对一个对象进行多次操作，可以把操作结果返回个该对象之后再进行后续操作！
隐式迭代

如果使用css()来设置样式
单个属性设置("属性名","属性值")
多个属性设置({"属性名1":"属性值1","属性名2":"属性值2"})

动态添加类样式
js 中 有 className="类名称" 取消 className=""
jQuery addClass("类名称") 取消 removeClass("类名称")

 

toggleClass 一般都是结合click使用！
没有样式就增加
有就删除样式

jQuery对象 和 Dom对象 互换
为什么需要互换？
01.每个对象都有自己的一套方法，不能混用
02.jQuery对象在使用方法的时候存在js版本库的问题
Dom对象不存在这种情况！

Dom对象 转换成 jQuery对象 通过工厂函数！ $(dom对象)

jQuery对象 转换成 Dom对象 两种方式
1.jQuery对象[0]
2.jQuery对象.get(0)