JQuery学习记录(二)
上一篇 /
下一篇 2010-02-04 08:07:42
/ 个人分类：读书笔记
6.自定义选择符
除了CSS和Xpath选择符之外，jQuery还添加了独有的完全不同的自定义选择符。自定义选择符的语法与CSS中的伪类选择符语法相同，即选择符以一个冒号：开头。如要从匹配的带有horizontal类的div集合中，选择第2个项，那么应该使用下面的代码：$('div.horizontal.eq(1)')。注意，因为javascript数组采用从0开始的编号方式，所以eq(1)取得的是集合中的第2个元素。而CSS则是从1开始的。因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素第1 个子元素的所有div。
交替地为表格行为添加样式的代码：
$(document).ready(function(){
$('tr.odd').addClass('odd');
$('tr.even').addClass('even');
})
要让突出显示提到"Henry"的表格单元，使用语句：$('tr.contains("Henry")').addClass('highlight');
DOM遍历方法的例子：a)$('th').parent().addClass('table-heading'); b)$('tr:not([th]:even').addClass('even'); c)$('td:contains("Henry")').next().addClass('highlight');
三.事件---扣动扳机
1.在页面加载后执行任务
$(document).ready()与window.onload事件的微妙差别：当一个文档完全下载到浏览器中时，会触发window.onload事件，这意味着页面上的全部元素对javascript都是可访问的。而$(document).ready()注册的事件处理程序，会在DOM完全就绪并可以使用时调用。所有元素对脚本 而言可访问，但不意味着所有关联的文件都已经下载完毕。如图片，其高度等属性无法得到。
2.基于一个页面执行多个脚本
通过Javascript(而不是指直接在HTML中添加处理程序属性)注册事件处理程序的传统机制是，把一个函数指定给DOM元素的对应属性。如<body nload="doStuff;"> 和 window.onload = doStuff;第二种方式优点在于能使行为更清晰地从标记中分离出来。问题：当定义了第2个函数doOtherStaff，用window.onload = doOtherStaff;时，这次指定的函数会取代刚才指定的第1 个函数。因为.onload属性一次只能保存对一个函数的引用，所以不能在现有的行为基础上再增加新行为。通过$(document).ready()机制可很好处理。每次调用这个方法都会向内部的行为队列中添加一个函数，当页面完成加载后，所有函数都将得到执行，且是按照注册它们的顺序依次执行。
3.简写方式：$(document).ready(function(){}); 可简写为$().ready(function(){});也可改写这$(funcion(){});但通常用较长的形式，因为能更清楚表示代码的含义。
4.实现简单的样式转换器，即当按下某个按钮时，整个body的样式变化:
$(document).ready(function(){
$('#buttonId1').bind('click',function(){
$('body').addClass('large');
})
$('#buttonId2').bind('click',function(){
$('body').addClass('narrow');
})
})
当有多个按钮进行多种样式变换时，为使得被选择的样式对应的按钮变样式来提示用户当前选择，可以使用
$(document).ready(function(){
$('#buttonId1').bind('click',function(){
$('body').removeClass('narrow').addClass('large');
$('#buttonId .button').removeClass('selected');//将以buttonId开头的button的样式去除selected
$('this').addClass('slected');
});
$('#buttonId2').bind('click',function(){
$('body').addClass('narrow').removeClass('large');
$('#buttonId .button').removeClass('selected');//将以buttonId开头的button的样式去除selected
$('this').addClass('slected');
});
})
上述代码中，有重复的地方，我们可以将其提取到一个单独的处理程序中
$(document).ready(function(){
$('#buttonId1').bind('click',function(){
$('body').removeClass('narrow').addClass('large');
});
$('#buttonId2').bind('click',function(){
$('body').addClass('narrow').removeClass('large');
});
$('#buttonId .button').bind('click,function(){
$('#buttonId .button').removeClass('selected');//将以buttonId开头的button的样式去除selected
$('this').addClass('slected');
}')
})
这一步优化利用了三种jQuery特性：1.通过.bind对一次调用的每个按钮都绑定了相同的单击事件处理程序，隐匿迭代机制发挥作用。2.行为队列机制让我们在同一单击事件上绑定两个函数，且第2 个函数不会覆盖第1 个函数。3.使用jQuery的连缀能力将每次添加和移除类的操作压缩到一行代码中。
进一步，removeClass('narrow')可以简化为removeClass()。因为不带参数表示删除所有样式。
还有些重复的代码，可以提取到通用的按钮单击处理程序中，如下：
$(document).ready(function(){
$('#buttonId').bind('click',function(){
$('body').removeClass();
$('#buttonId .button').removeClass('selected');
$(this).addClass('select');
});
$('#buttonId1').bind('click',function(){
$('body').addClass('large');
});
$('#buttonId2').bind('click',function(){
$('body').addClass('narrow');
});
})
更可以使用事件执行环境来简化
$(document).ready(function(){
$('#buttonId').bind('click',function(){ //可以使用事件简化方法改写为
$('#buttonId').click(function(){
if(this.id=='buttonId1'){
$('body').addClass('large');
}else if( this.id=='buttonId2'){
$('body').addClass('narrow');
}
$('#buttonId .button').removeClass('selected');
$(this).addClass('select');
})
5.复合事件。.toggle()和.hover()方法。
6.toggle()接受两个均为函数的参数，第1次在元素上单击会调用第1 个函数，第2次会触发第2个函数。这样就可以实现可折叠的样式转换器了（点击一下之后，所有按键隐藏，再点一下，都显示出来）
$(document).ready(function(){
$('#switcher h3').toggle(function(){
$('#switcher .button').addClass('hidden');
}),function(){
$('#switcher .button').removeClass('hidden');
});
})
7.;.hover接受两个函数参数，第1个为鼠标指针进入被选择的元素时进行，而第2个在指针离开该元素时触发。
待续.....
收藏
举报
TAG:
