锋利的jquery

第1章1.简述jQuery的实质及其优势。

jQuery是一个轻量级javascript库轻量级（Lightweight），强大的选择器，出色的DOM操作封装，可靠的事件处理机制，完善的Ajax ，出色的浏览器兼容性，不污染顶级变量，链式操作方式，隐式迭代，行为层与结构层分离，丰富的插件支持，完善的文档，开源2.写jQuery程序前需要做什么准备工作？jQuery的压缩版的非压缩版分别适用于什么场合？完整，无压缩版，可供学习、开发。

压缩后的版本，主要用于项目的发布。

3.简述$(document).ready()与window.onload的相同点和不同点。

在DOM中，浏览器加载文档完毕，会发生onload事件。

$(document).ready(function(){ })相当于window.onload事件，但有区别：（1）执行时机：window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行。

$(document).ready() 是在DOM完全就绪时就可以被调用，并不意味着这些元素关系的文件都已经下载完毕。

（2）多次使用：$(document).ready()事件可以在同一个页面注册多个（3）简写方式：可以缩写成$(function(){ }) 或$().ready(function(){ })4.什么是jQuery对象和DOM对象？二者如何转换？将DOM对象转换为JQuery对象的方法：$(DOM对象)；将JQuery对象转换为DOM对象的方法：var domobj = jqobj[0]或者var domobj=jqobj.get(0) 第2章1.jQuery中的选择器分为哪几类？其中过滤选择器分为哪几小类？2.写出每个层次选择器的符号及其含义。

1.$(“ancestor descendant”)：选取祖先元素中所有的后代元素：$("body div")：选取body元素下所有的div元素2.$(“parent > child”)：选取父元素下的子元素。

$(“body > div”)：选取body元素下所有的div子元素3. $(“prev + next”)：匹配紧接在prev 元素后的next 元素$("#div_b1 span + input").css("background-color","red");4. $(“prev ~ siblings”)：匹配prev 元素之后的所有兄弟元素$("#div_c1 span ~ input").css("background-color","red");$(‘#one+div’)等价于$(‘#one’).next(‘div’)$(‘#one~div’)等价于$(‘#one’).nextAll(‘div’)$(‘#one’).siblings(‘div’)：指其前、后所有的div兄弟3.写出每个基本过滤选择器的符号及其含义。

1. #ID选择器：根据给定的ID匹配一个元素$(“#one”)选取id为one的元素2. .class选择器：根据class名选择匹配的元素$(".mini")选取class为mini的元素3.标签选择器：根据标签名选择元素$("div")选取所有div元素4.*选择器：选择所有的元素$("*")选取所有的元素5.selector1,selector2,selector3...selectorN ：返回指定选择器的元素$("span,#two")选取所有的span标签元素和id=two的元素。

4.写出每个内容过滤选择器的符号及其含义。

1. :contains(text)选取包含文本text的元素$('div:contains(di)')：选取含有文本"di"的div元素.2. :has(selector)选取含有选择器所匹配的元素的元素$('div:has(.mini)')选取含有class为mini元素的div元素.3. :empty选取不包含元素或文本的元素$('div:empty')：选取不包含任何内容的div。

4. :parent选取包含元素或文本的元素$('div:parent')：选取包含内容的div5.写出每个子元素过滤选择器的符号及其含义。

1. :nth-child(index/even/odd)选取每个父节点下第index个子元素、偶数元素或奇数元素。

$('div.one :nth-child(2)')：选取每个class=one的div父元素下的第2个子元素2. :first-child选取每个父节点下第1个子元素。

$('div.one :first-child')：每个class=one的div父元素下的第1个子元素3. :last-child选取每个父节点下最后一个子元素。

4. :only-child选取每个父节点下独生子元素。

第3章：attr和prop区别：对于HTML元素本身就带有的固有属性，在处理时，使用prop或attr方法。

对于自己自定义的DOM属性，在处理时，使用attr方法。

区别：对于只有两种状态的值，prop获取的是true或false；attr获取的是字符串。

DOM 组成DOM Core定义了一套标准的针对任何结构化文档的接口。

HTML-DOM定义了所有HTML 元素的对象和属性，以及访问它们的方法。

XML-DOM定义了所有XML 元素的对象和属性，以及访问它们的方法。

DOM是什么通过JavaScript，可以重构整个HTML 文档。

可以添加、移除、改变或重排页面上的项目。

如果要改变页面的某个元素，JavaScript 就需要获得对HTML 文档中所有元素进行访问的接口。

DOM(DOM-Document Object Model)是W3C国际组织的一套Web标准。

它定义了访问HTML等文档对象的一套属性、方法和事件。

DOM是操作HTML与XML文件的一组API。

DOM具有平台、语言无关性。

它是建立网页与脚本语言或程序语言沟通的桥梁.DOM级别：DOM Level 1/2/3jQuery中的DOM操作查找节点创建节点插入节点删除节点复制节点替换节点包裹节点属性操作样式操作设置和获取HTML、文本和值遍历节点CSS-DOM操作样式的优先级（1）内联>ID选择器>伪类=属性选择器=类选择器>元素选择器=伪元素>通用选择器(*)>继承的样式权重：内联样式1000>id选择器100>class选择器10>标签选择器1（2）计算方法a.用a表示选择器中ID选择器出现的次数b.用b表示类选择器，属性选择器和伪类选择器出现的总次数。

c.用c表示标签选择器、伪元素选择器出现的总次数d.忽略通用选择器e.然后计算a*100+b*10+c的大小，这就是优先级了。

CSS-DOM技术简单来说就是读取和设置style对象的属性。

style属性很有用，但是最大的不足是无法通过它来提取到通过外部css设置的样式信息，然而在jQuery中，却不会受到这样的限制。

遍历节点一）往下找1.children([selector])：取得匹配元素的子元素集合var $body = $("body").children();2.find(selector)：取得匹配元素后代元素中满足条件的元素$('li.item-ii').find('li').css('background-color', 'red');二）左右找3.next([selector])：取得匹配元素后面紧邻的同辈元素var $p1 = $("p").next();4.prev([selector])：取得匹配元素前面紧邻的同辈元素5.siblings([selector])：取得匹配元素的所有的同辈元素6.nextAll([selector])：取得匹配元素后面所有的同辈元素7.prevAll([selector])：取得匹配元素前面所有的同辈元素三）往上找8.parent([selector])：取得匹配元素的父元素9.parents([selector])：取得匹配元素的祖先元素10.closest(selector)：从当前元素开始沿DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。

（值为当前元素或其祖先元素中的最近的一个）第4章：1.写出bind()、one()和on()方法各自的格式并简述它们在功能上的区别。

bind()为每一个匹配元素的特定事件绑定一个事件处理器函数.one()用法和功能与bind相似，特点：所绑定的事件只被执行一次。

on()方法在被选元素或子元素上添加一个或多个事件处理程序。

使用on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

2.什么是事件冒泡？如何阻止事件冒泡？当页面上发生一个事件时，每个层次上的DOM元素都有机会处理这个事件。

即当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到更一般的元素。

阻止冒泡：event.stopPropagation()阻止默认行为：event.preventDefault()return false同时阻止上述两个内容3.写出事件对象的type、target、pageX、pageY和which属性的功能。

type如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型。

target获取事件触发者pageX/Y：鼠标相对于页面原点的水平/垂直坐标which对于键盘事件, 返回触发事件的键的数字编码。

对于keypress，返回按键的Ascii码；对于keydown和keyup，返回键码。

对于鼠标事件, 返回鼠标按键号(1左,2中,3右)。

click只识别左键。

4.在动画中，同一对象的多个属性的变化如何让其同时执行？如何让其顺序执行?(1)当在一个animate方法中应用多个属性时，多个属性的变化同时发生。

（2）当顺序书写多个动画方法时，动画按照顺序发生。

特例：使用queue:false不进行排队。

5.不同对象的动画默认是同时执行还是顺序执行？如何改变?(1)默认情况下，动画都是同时发生的；（2）当以回调的形式应用动画方式时，动画是按照回调顺序发生的。