jquery的由来
- 因为各大浏览器兼容性问题，让跨浏览器编写程序变得非常麻烦，为了简化开发很多javascript框架库就出现了。框架库实际上就是一个js文件，里面包含了非常多封装好的代码和函数类，解决了绝大部分兼容性的问题。而jquery就是框架库中的一种，它以功能强大且开源免费著称。注意框架库只是一种辅助js开发的工具，并不能取代js
jquery的特点
- 写得少做得多、链式编程、隐式迭代。因为其库的特性，很多原生js需要考虑的问题（兼容性、能力检测等），都不用再做处理。并且其插件丰富，比如100多行代码才能实现的功能(轮播图、旋转木马等)，一个函数调用即可
三种顶级对象的区别
- DOM中的顶级对象是
document，它能调用的是文档页面中的属性和方法 - BOM中的顶级对象是
window，它能调用的是浏览器中的属性和方法 - jquery中的顶级对象是
jquey||$，它能调用的是jquery中的属性和方法
页面加载事件
- BOM中页面加载事件是
window.onload = function () {}; - jquery中页面加载事件写法有多种：
-
$(window).load( function () {} );当页面中所有内容都加载完毕后才执行，与window.onload作用相同 -
$(document).ready(function () {});当页面中基本的标签加载完毕后就执行 -
$( function () {} );当页面中基本的标签加载完毕后就执行，推荐使用这个 -
jquery( function ($) {});当页面中基本的标签加载完毕后就执行 -
(function($){})(jquery)加载到js文件就立即执行，不管其他是否加载完毕
-
- 一般较常用的是第三种页面加载的方法
- 另外可以发现，在jquery中不管是什么对象事件都变成了方法来调用
jquery的页面加载事件怎么判断页面基本标签是否加载完毕
- 原理是使用try把document.documentElement.scrollLeft方法包含起来,并使用catch捕获异常，如果有异常说明页面没有加载完毕，使用定时器一直调用这个方法。如果没有异常说明页面已经加载完毕，把事件中的匿名函数回调并执行
ready方法和load方法的区别
- 要知道它们的区别，首先得了解DOM的加载步骤;
解析HTML代码-加载外部脚本和脚本-解析并执行脚本代码-构造html的DOM模型-加载外部资源-页面加载完毕
- ready执行在DOM模型构造的阶段，这样确保就算有大量的媒体文件，js代码也能正常执行
- load执行在页面加载完毕阶段，所有如果当页面有大量媒体文件的话，就会出现页面结构已经显示，但脚本还没触发
jquery文件的引入问题
- jquery文件有正常版和压缩版两种，它们在使用时完全一样没有任何区别，区别在与大小不一样
- 一般在开发过程中建议使用正常版，因为没有压缩易于程序员自己阅读
- 而网站上线时为节省文件的加载时间，推荐使用压缩版体积更小
DOM对象和jquery对象的互转
- 在实际工作有可能会涉及到DOM对象和jquery对象的互转，那么为什么要互转呢？
- 因为DOM对象操作会比较复杂，如果能用jquery来代替，那么会方便很多，这时可以将其转换为jquery对象使用jquery的属性和方法操作
- 而jquery也不是全能的，可能在某些地方会有缺陷，想要解决这种缺陷就必须得把jquery对象转为DOM对象，然后使用原生js来解决
- DOM对象只能调用DOM的属性和方法，jquery对象只能调用jquery的对象和方法，所以才会出现转换
-
DOM对象转jquery对象-
$(DOM对象)使用$()把获取到的DOM对象包起来就可以转换为jquery对象
-
-
jquery对象转DOM对象，例如获取到id为btn的jquery的对象$("#btn").get(0)$("#btn")[0]- 通过上面两种方法都可以进行转换
- 通过转换就可以分别调用各自的属性和方法了
jquery选择器
- 与DOM方法来获取元素对象不同，jquery是通过选择器来获取元素对象（就是css的选择器），总结了较常用的选择器
- 基本选择器：
-
$("#id值")id选择器，通过id来获取单个元素 -
$("标签名")标签选择器，通过标签名来获取多个元素 -
$(".类名")类选择器，通过样式类名来获取多个同类名元素 -
$("*")通配符选择器，通过通配符获取页面中所有元素
-
- 层次选择器
-
$("li.class")交集选择器，获取设置了对应类名的某标签,前面的例子就是获取设置了class类名的li标签 -
$("标签名1,标签名2,标签名3")并集选择器，获取内部传入标签名的多个元素，参数支持传入类名 -
$("div p")后代选择器，例子中获取div中所有的p元素对象，参数支持传入类名 -
$("div>p")子选择器，例子中获取div中所有的直接子p元素对象，参数支持传入类名 -
$("div+p")第一子选择器，例子中获取div中的第一个直接子p元素对象，参数支持传入类名 -
$("div~p")兄弟选择器，例子中获取div所有兄弟关系的p元素对象，参数支持传入类名
-
- 索引选择器
-
$("ul>li:even")偶数索引选择器，例子中获取到li集合的所有偶数索引项 -
$("ul>li:odd")奇数索引选择器，例子中获取到li集合的所有奇数索引项 -
$("ul>li:eq(5)")索引选择器，例子中获取到li集合的索引为5的那一项，数字参数自定义 -
$("ul>li:gt(5)")索引大于选择器，例子中获取到li集合中索引大于5的所有项，数字参数自定义 -
$("ul>li:lt(5)")索引小于选择器，例子中获取到li集合中索引小于5的所有项，数字参数自定义
-
- 其他选择器
-
$("#se1>option:selected")属性选择器，例子中获取se1内部设置了selected=true的option选项 -
$("div : checkbox")类型选择器，例子中获取到div内部所有type为checkbox的标签元素
-
jquery操作样式
- jquery中直接设置样式肯定要用到css()方法，但是有几种写法：
-
元素.css(属性，值)以逗号分隔，设置多个样式是每行写一个 -
元素.css(属性，值).css(属性，值).css(属性，值)也是以逗号分隔，但设置多个样式时使用链式编程，点号连接 -
元素.css({属性：值，属性：值，属性：值})使用大括号以对象键值对的方式来设置，最推荐使用这种方法
-
- 操作样式类名：
- 给某元素添加样式类名使用
元素.addClass()，添加多个类名时，可以用链式编程来添加，也可以用空格分隔的方式来添加。例如：addClass("class1 class2")，这样就添加了两个类名，添加多个用空格分隔 - 给某元素移除样式类名使用
元素.removeClass(),移除一个类名直接参数传入。不写参数会自动移除全部类名。同时该方法也支持空格分隔的写法 - 判断元素是否应用了传入参数的类名，使用
元素.hasClass(),返回ture和false - 判断元素是否应用参数类名，并自动切换使用
元素.toggleClass() - 注意，调用操作类名方法传参时，不用写点号,直接写类名字符串
- 给某元素添加样式类名使用
链式编程
- 链式编程通过.来连接，可以让对象一次性调用多个方法，这样的好处是可以节省代码行数，多行代码一行即可完成
- 但是链式编程有一个必须要注意的地方：该行代码执行后返回值是不是一个对象，只有返回的是对象才能使用链式编程，因为也只有对象才能调用方法。如果不是对象就会报错，也叫作断链
