首页 > 代码库 > jQuery相关知识
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()有什么不同?
onl oad()函数是在页面所有资源加载完毕后才开始调用的,只能使用一次;$(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;}
}
}
}
jQuery相关知识