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()
  • 注意，调用操作类名方法传参时，不用写点号,直接写类名字符串

链式编程

• 链式编程通过.来连接，可以让对象一次性调用多个方法，这样的好处是可以节省代码行数，多行代码一行即可完成
• 但是链式编程有一个必须要注意的地方：该行代码执行后返回值是不是一个对象，只有返回的是对象才能使用链式编程，因为也只有对象才能调用方法。如果不是对象就会报错，也叫作断链