Web前端JQuery面试题（二）

<script type="text/javascript">
 $(document).ready(function(){
  // 程序段
 })
</script>

window.onload=function(){
 // 程序段
}

前者效率高
$(function(){
 // 程序段
})

var txt = document.getElementById("text").value;

var txt = $("#text").val();
$("#text").toggleClass("txtClick").html("点击后切换样式");

#id 根据给定的id进行匹配一个元素
element 根据给定的元素名进行匹配所有元素
.class 根据给定的类匹配该类的所有元素
* 匹配所有元素
selector1,selector2 匹配给定的元素，合并一起

ancestor descendant 根据祖先元素匹配所有后代的元素
祖先和后代的关系
parent > child 根据父元素匹配所有的子元素
父子的关系
prev + next 根据prev元素匹配后面的所有相邻元素
于.next()相同，prev元素后的下一个元素
prev ~ siblings 匹配prev元素后的所有兄弟元素
于.nextAll()相同，prev元素后的所有相邻元素，获取元素后面的全部相邻元素
.siblings()方法，获取前后所有相邻的元素

:animated 获取执行正在动画效果的元素
:header 获取所有标题类型的元素
:lt(index) 获取小于给定索引值的元素
:gt(index) 获取大于给定索引值的元素
:eq(index) 获取给定的索引值的元素，从0开始
:odd 获取奇数的元素
:even 获取偶数的元素
:not(selector) 获取除给定选择器外的所有元素
first() 或 :first 获取第一个元素
last() 或 :last 获取最后一个元素

:contains(text) 获取包含给定文本的元素
:empty 获取所有不包含子元素或文本的空元素
如：<div></div>
:has(selector) 获取含所选择器的所有元素
:parent 获取含有子元素或文本的元素
如：<div>dashu</div>, <div><p></p></div>

:hidden 获取所有不可见元素
:visible 获取所有的可见元素

[attribute]
获取给定属性的元素
[attribute = value] 
匹配给定的属性是某个特定值的元素
[attribute != value] 
匹配所有不含有特定的属性
[attribute ^= value]
匹配给定的属性以某值开始的元素
[attribute $= value]
匹配给定的属性以某值结尾的元素
[attribute *= value]
匹配有包含某些值的特定元素
[selector1][selector2]
同时满足多个条件使用

:nth-child 
从1开始的，匹配每个父元素下第n个元素
$("ul li:nth-child(2)"); 获取2 3 4。。

:first-child
匹配每个父元素下的第一个子元素

:last-child
匹配每个父元素下的最后一个子元素

:only-child
匹配父元素中只有唯一的子元素，如果父元素中有多个子元素，就不会被匹配

:enabled
匹配所有可用元素
:disabled
匹配所有不可用元素
:checked
匹配所有选中元素
:selected
匹配所有选中option元素

:input
会获取所有input,textarea,select,button
:text
匹配所有单行文本元框
:password
匹配所有密码框
:radio
匹配所有单选按钮
:checkbox
匹配所有复选框
:submit
匹配所有提交按钮
:image
匹配所有图像
:reset
匹配所有重置按钮
:button
匹配所有按钮
:file
匹配所有文本域

var $p = $("<p>dashucoding</p>");

$("span").appentTo($("div"));

$(this).clone().appendTo("span"); 和 $(this).clone(true).apendTo("span");

$("span").replaceWith("<p>dashu</p>");

$("<p>dashu</p>").replaceAll("#text");

wrap(html), wrapInner(html);

包裹外部元素
包裹元素内部的文本

<p><span>da</span></p>

$("p").wrap("<b></b>");
<b><p><span>da</span></p></b>

$("span").wrapInner("<i></i>");
<p><span><i>da</i></span></p>