jQuery相关知识

1.jQuery中$符号有何作用？

$作为jQuery的别名，如$(document).ready() 即是 jQuery(document).ready()

2.jQuery选择器有哪几种？

基本选择器：$("#id") —〉通过id获取元素

$(".class") —〉通过既定的类名获取元素

$("p") —〉通过名称匹配获取元素

$("span,#id,...").css() —〉多个选择合并返回

层次选择器：$("div span") —〉div中所有的span

$("div > span") —〉div下的子元素span

$(".red + div") —〉选择class为red的下一个div同辈元素

$(".red ~ div") —〉选择class为red的元素后面的所有div同辈元素

过滤选择器： 基本过滤选择器 { $("div:first") —〉第一个div ; $("div:last") —〉最后一个div ; $("input:not(.red)") —〉选择class不是red的input元素;

$("input:even") —〉index为偶数的input元素; $("input:odd") —〉index为奇数的input元素; $("input:eq(1)"), $("input:gt(1)"),

$("input:lt(1)") 皆是根据index（等于、大于、小于）来选择元素;  $(":header") —〉选取网页中所有 h1 h2 h3 ... ;

$(":focus") —〉获取当前获得焦点的元素 }

内容过滤选择器 { $("div:contains('ab')") —〉选取含有文本“ab”的div元素; $("div:empty") —〉选择不包含子元素的div空元素;

$("div:has(p)") —〉选择含有p元素的div元素; $("div:parent") —〉选取拥有子元素的div元素 }

可见性过滤选择器 { $("input:hidden") —〉选取所有隐藏的input元素; $("div:visible") —〉选取所有可见的div元素 }

属性过滤选择器 { $("div[title='test']") —〉选取title等于“test”的div元素; $("div[id]") —〉选取拥有属性id的元素;

$("div[id='id1'][title='test1']") —〉多条件复合选择 }

表单对象属性过滤 { 如 :selected; enabled; :disabled; :checked; }

3.body中onload()函数和jQuery中的$(document).ready()有什么不同？

onload()函数是在页面所有资源加载完毕后才开始调用的，只能使用一次；$(document).ready()是在页面加载完DOM后就调用，可以多次使用。

4.将页面所有元素的边框设置为2px宽的虚线？

$("*").css("border","2px dashed red");    //solid 为实线; dashed 为虚线

5.jQuery中delegate()函数有何作用？

如果你有一个父元素，需要给其下的子元素添加时间，就可以用到delegate(),代码如下：

$("u1").delegate("li","click",function(){

$(this).hide();

});

6.使用jQuery禁用浏览器的前进后退按钮？

$(document).ready(function(){

window.history.forward(1); // or window.history.forward(-1);

});

7.jQuery选择器和css选择器有何区别？

jQuery选择器支持css选择器，给对象添加样式和行为；css选择器只能添加样式。

8.jQuery实现table隔行变色？

HTML代码如下：

<table>

<tbody>

<tr class="parent" id="row_01"></tr>

<tr class="child_row_01"></tr>

<tr class="child_row_01"></tr>

<tr class="parent" id="row_02"></tr>

...

</tbody>

$(function(){

$("tr.parent").click(function(){

$(this)

.toggleClass("selected")     //删除或添加高亮

.siblings("child"+this.id).toggle(); //隐藏或显示子行

});

});

CSS样式控制隔行变色：

.line{

table{

tbody{

tr:nth-child(odd){background:red;}

tr:nth-child(even){background:blue;}

}

}

}