@guoxs
2015-07-30T15:47:21.000000Z
字数 3926
阅读 3454
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>
选项元素。