初识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)

原文地址:https://www.cnblogs.com/wodebokezhijian/p/7809169.html