@guoxs
2015-07-30T15:47:21.000000Z
字数 3926
阅读 3447
jQuery
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
JavaScript代码：
var page_ps = document.getElementByTagName("p");for(var i = 0; i< page_pslength;i++){page_ps[i].innerHTML = "Hello world";}
对应的jQuery代码：
$("p").html("Hello imooc!");
jQuery更加的简洁方便，我们在处理DOM时不必关心功能的实现细节。 $()就是jQuery中的函数，它的功能是获得（）中指定的标签元素。如示例中$("p")会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素，也可能是函数。
在jQuery中 $()方法等价于jQuery()方法,前者比较常用，是后者的简写。一般只有在$()与其它语言冲突时才会使用jQuery()方法。
$("#my_id") //其中#my_id表示根据id选择器获取页面中指定的标签元素，且返回唯一一个元素。
$("#default").html($("#divtest").html()); //html()方法的功能是设置或获取元素中显示的内容
$("element")$("button").attr("disabled","true"); //将按钮灰度去掉
$(".class")
类似的有其他选择器：
$("*")$("form *").attr("disabled", "true"); // 将<form>元素包含下的全部表单型元素都设为不可用。
$("sele1,sele2,seleN")其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的各种类型选择器，如$("#id")、$(".class")、$("selector")选择器等。
在实际应用开发中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：
$("ance desc")
其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。
$("parent > child")
child参数获取的元素都是parent选择器的子元素，它们之间通过“>”符号来表示一种层次关系
通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素，格式如下：
$("prev + next")
其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。
prev 元素后面全部相邻的元素，它的调用格式如下：
$("prev ~ siblings")
其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。
获取一组相同标签元素中的第1个元素
$("li:first")
:first过滤选择器的功能是获取第一个元素，常常与其它选择器一起使用，获取指定的一组元素中的第一个元素。
如果想从一组标签元素数组中，灵活选择任意的一个标签元素，我们可以使用
:eq(index)
$("li:eq(3)") //取得第四个li
其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。
:contains('text')
选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。
<ol><li>强大的"jQuery"</li><li>"javascript"也很实用</li><li>"jQuery"前端必学</li><li>"java"是一种开发语言</li><li>前端利器——"jQuery"</li></ol><script type="text/javascript">$("li:contains('jQuery')").css("background", "green");</script>
:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。
:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。
<input id="hidstr" type="hidden" value="我已隐藏起来"/><div></div><script type="text/javascript">var $strHTML = $("input:hidden").val();$("div").html($strHTML);</script>
与:hidden过滤选择器相反，:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。
[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。
相反，[attribute!=value]属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素。
[attribute*=value]，它可以获取属性值中包含指定内容的全部元素。
使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。
相反有:last-child过滤器
:input表单选择器的功能是返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select>和<button>标记的表单元素，因此，它选择的表单元素是最广的。
$("#frmTest :input").addClass("bg_blue"); //将input背景变为蓝色，注意空格addClass()方法的功能是为元素添加指定的样式类别名称。
:text表单文本选择器可以获取表单中全部单行的文本输入框元素，单行的文本输入框就像一个不换行的字条工具，使用非常广泛。
:password选择器的功能是获取表单中全部的密码输入文本框元素。
:radio选择器可轻松获取表单中的全部单选按钮元素。
:checkbox选择器可以快速定位并获取表单中的复选框元素。
通常情况下，一个表单中只允许有一个“type”属性值为“submit”的提交按钮，使用:submit选择器可获取表单中的这个提交按钮元素。
jQuery(("#frmTest input:submit").addClass("bg_red");)
当一个<input>元素的“type”属性值设为“image”时，该元素就是一个图像域，使用:image选择器可以快速获取该类全部元素。例如，在表单中添加两种类型的图像元素，使用:image选择器获取其中的一种图像元素，并改变该元素的边框样式。
:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。
有一些元素存在选中状态，如复选框、单选按钮元素，选中时“checked”属性值为“checked”，调用:checked可以获取处于选中状态的全部元素
与:checked选择器相比，:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。