day45_jQuery讲义(上).docx

jQuery描述jQuery是一个优秀的Javascript库。它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器（jQuery 1.x和2.x一直在更新）。jQuery使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。轻量级强大的选择器出色的 DOM 操作的封装可靠的事件处理机制出色的浏览器兼容性链式操作方式可拓展性强…jQuery与DomjQuery与Dom对象区别jQuery对象就是使用jQuery()或$()包装了dom对象后的对象；其中符号$是jQuery的一个别名。如果不喜欢或者发生了冲突完全可以将$改成其它的；如：var j = jQuery.noConflict();//这样的话，以后就使用j表示jQuery了解：$符号通常是jQuery的标识符（别名），一般不改动；$ 定义为 选取 英文是selector的意思。如：$(#divID) 表示 选取 id为divID的元素；$(input) 表示 选取 所有input标签jQuery对象是jQuery 库中独有的；如果是一个jQuery对象那么它就可以使用jQuery库中的所有方法。需要注意的是：jQuery对象不能使用Dom对象中的任何方法。同样地；Dom对象也不能使用jQuery对象中的任何方法。约定：如果一个对象是jQuery对象；那么其对应的变量名前面加$，表明该对象是一个jQuery。(只是约定…between us)jQuery与Dom对象转换jQuery对象转为Dom对象；有时jQuery对象没有Dom对象中对应的方法的话，可以将jQuery对象转为Dom对象。可通过如下两种方式来取得Dom对象。方式一：jQuery是一个数组对象，可使用下标var $div = $(#divID);var divElement = $div[0];方式二：使用jQuery对象自带的get方法var $div = $(#divID);var divElement = $div.get(0);Dom对象转为jQuery对象；这个更简单；值需要将dom对象使用$()包裹起来就是一个jQuery对象。如：var $div = $(divElement);//将dom对象转为jQuery对象jQuery操作引入jQuery要使用jQueryjavascript库，只需要将jQuery 对应的“jquery-x.x.js”脚本文件引入到页面中即可。script type=text/javascript src=js/jquery-1.11.3.js/script常用基础方法初始事件在未使用jQuery之前；在页面中常常需要用到window.onload来初始化一些元素事件。引入jQuery之后，它也对应有类似方法:ready；当DOM载入就绪可以查询及操纵时绑定一个要执行的函数；该方法是对向window.onload事件注册事件的替代。两种写法：写法一：直写$(document).ready(function(){ // 在这里写你的代码...});写法二：$(document).ready() 的简写$(function() { // 你可以在这里继续使用$作为别名...});基本选择用法描述$(“#elementID”)#表示根据id查找；查找id为elementID的元素；建议的用法。所以一般推荐给标签设置ID。类似：document.getElementById(elementID) 但两者之间返回类型不同$(“.className”).表示根据class样式名称查找；查找样式名称为className的所有标签$(“input”)查找所有input标签基本取/设值用法描述$(“#elementID”).val()$(“#elementID”).val(“新值”)分别表示取值和设置值$(“#elementID”).html()$(“#elementID”).html(“新值”)分别表示获取标签内部的html文本内容和设置html文本内容。类似innerHTML$(“#elementID”).text()$(“#elementID”).text(“新值”)分别表