与其花时间杂耍JavaScript高级复杂的技巧,不如充分利用现有的CSS,XHTML及普通的JavaScript的知识,去直接操作页面元素,实现更快的开发。
完成某一项任务,JavaScript需要10行代码,而Jqery只需要一行就可以了。
反例:
<button type="button" οnclick="docoument.getElementById('xyz').style.color='red';"
Click Me
</button>
就像在HTML文档中应该把样式从结构中分离出来一样,处于完全相同的理由,把行为从结构中分析出来,会带来同样甚至更多的好处。
行为与结构相分离被称为:“不唐突的JavaScript”
不唐突的JavaScript,连同大量jQuery实战经验一起,认为任何潜入在HTML页面<body>里的JavaScript表达式或语句,不管是作为HTML元素的特性(比如onclick),还是嵌入在页面<body>的脚本块里,都是不正确的。
正例:
<script type="text/javascript">
window.οnlοad=function(){
documment.getElementById('testButton').οnclick=makeItRed;
};
function makeItRed(){
document.getElementByIdx_x('xyz').style.color='red';
}
</script>
<btton type="button" id="testButton">Click Me</button>
jQuery基本原理:
在其核心,jQuery重点放在从HTML页面里获取元素并对其进行操作。
jQuery包装器:
如:$()函数返回特别的JavaScript对象,它包含着与选择器相匹配的DOM元素的数组。
该数组拥有大量的预定义的有用的方法,能够作用于该组元素。
示例:
$("div.notLongForThisWOrld").fadeOut();
这类方法的显著特征是:当完成了一个操作时,它们返回相同的一组元素,提供给下一个操作。
$("div.notLongForThisWOrld").fadeOut().addClass("removed")......可以无限延续。
需要注意的是,因为每个函数都作用在与最初的选择器相匹配的全部元素之上,所以没有必要循环遍历元素数组。
如:下面两个片段产生一致的结果:
$("div.fillMeIn").html("aaa");
和
var emements=$("div.fillMeIn");
for(i=0;i<emements.length;i++)
elements[i].innerHTML="aaa";