JQuery详解.docxVIP

jquery入门什么是jQuery？jQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。主旨：以更少的代码、实现更多的功能2.jQuery 的功能和优势jQuery 作为JavaScript 封装的库，他的目的就是为了简化开发者使用JavaScript。主要功能有以下几点：1.像CSS 那样访问和操作DOM2.修改CSS 控制页面外观3.简化JavaScript 代码操作4.事件处理更加容易5.各种动画效果使用方便6.让Ajax 技术更加完美7.基于jQuery 大量插件8.自行扩展功能插件jQuery 最大的优势，就是特别的方便。比如模仿CSS 获取DOM，比原生的JavaScript要方便太多。并且在多个CSS 设置上的集中处理非常舒服，而最常用的CSS 功能又封装到单独的方法，感觉非常有心。最重要的是jQuery 的代码兼容性非常好，你不需要总是头疼着考虑不同浏览器的兼容问题。第二章核心基础1.代码风格在Jquery程序中，不管是页面元素的选择，还是内置功能的函数，都是以“$”来开头的，而这个“$”就是Jquery中最重要且独有的对象,我们称为:jQuery对象,所以我们在页面元素或执行功能函数的时候可以写成:$(function(){}) // 执行一个匿名函数$(“#box”);// 进行执行的ID元素进行选择该元素$(“#box”).css(“color”,”red”);执行功能函数而由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQuery(function(){});jQuery(“#’);jQuery(‘#box’).css(‘color’,’red’);注意:我们在执行功能函数的时候,发现.css()这个功能函数并不是直接被$或jQuery对象调用的,而是先获取元素后,返回某个对象在调用.css()这个功能函数.那么也就是说,返回的这个元素对象也是jQuery对象.即:$().css(‘color’,’red’);// 这样理论上是合法的,但实际上缺少元素而报错但值得一提的是,执行了.css这个功能函数后,最终返回的还是jQuery对象,那么也就是说,jQuery的代码模式是采用的连缀方式,可以不听调用功能函数.即:$(‘#box’).css(‘color’,’red’).css(‘font-size’,’50px’);//连缀方式调用功能函数jQuery中代码注释和JavaScript是保持一致的，有两种最常用的注释：单行使用“//...”，多行使用“/* ... */”。2.加载模式我们在之前的代码一直在使用$(function () {});这段代码进行首尾包裹，那么为什么必须要包裹这段代码呢？原因是我们jQuery库文件是在body元素之前加载的，我们必须等待所有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。在延迟等待加载，JavaScript提供了一个事件为load，方法如下：window.onload = function () {}; //JavaScript等待加载$(document).ready(function () {}); //jQuery等待加载Js提供的load和jquery提供的ready的区别:Window.onload()$(document).ready(function(){})执行时机必须要等待网页元素全部加载完毕(其中包括大图片等..),然后在执行它所包裹的代码!只需要等到html的dom结构加载完毕,即可执行它所包裹的代码.执行次数只能执行一次,如果有多个,那么只执行最后一次可以执行N次,每一次都不会被覆盖简写方案无$(function () {});在实际应用中，我们都很少直接去使用window.onload，因为他需要等待图片之类的大型元素加载完毕后才能执行JS代码。所以，最头疼的就是网速较慢的情况下，页面已经全面展开，图片还在缓慢加载，这时页面上任何的JS交互功能全部处在假死状态(全部不能用,如点击事件,超链接等…)。并且只能执行单次在多次开发和团队开发中会带来困难。3.对象互换jQuery 对象虽然是jQuery 库独有的对象，但它也是通过JavaScript 进行封装而来的。我们可以直接输出来得到它的信息。alert($); //jQuery 对象方法内部alert($()); //jQuery 对