首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 企业软件 > 行业软件 >

JQuery 学习札记(随笔)02

2012-06-29 
JQuery 学习笔记(随笔)02? ? ? ? ? ? 第二篇 ? ?jquery 选择器? ? ? JQuery选择器优势:1.方便2.有完善的处

JQuery 学习笔记(随笔)02

? ? ? ? ? ? 第二篇 ? ?jquery 选择器

? ? ? JQuery选择器优势:1.方便2.有完善的处理机制,当删除一些标签的时候也不会报错。

? ? ? 基本的选择器

(1)$("#id") id选择器

(2)$(".class") 类别选择器

(3)$("element") 根据给定的元素名匹配元素

(4)$("*") 匹配所有元素

(5)$("select1,select3,select3")......将每一个选择器匹配到的元素合并后一起返回

? ? ?ID选择器例子:

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript" src="工具/jquery-1.7.1.js"></script>

<script>

$(document).ready(function(){

$("#demo1").click(function(){

alert("谢谢!");

})

})

</script>

</head>

<body>

<p id="demo1">点击我</p>

</body>

</html>

? ???层次选择器:

? ? ? ? ?(1)$("div p")选取div元素里面所有的p元素(后代元素)

?(2)$("div>p")选取div下面的直接子元素

?(3)$("div + p")选取紧接着div后的p元素,之后被$("div").next("p")替代

? ? ? ? ?(4)$("div ~p")选取div 元素之后的所有p元素,之后被$("div").nextAll("p")替代

? ???(5)$("div").siblings("p")选取div所有的同辈p元素,无论前后位置

? ? 过滤选择器:过滤选择器都是以一个(:)开头

? ? ? ? ?(1)基本过滤选择器:

:first ? 选取第一个元素

? ? ? ? ? ? ? ? :last ? 选取最后一个元素

? ? ? ? ? ? ? ? :not(selector)去除所有与给定选择器匹配的元素

? ? ? ? ? ? ? ? :even 选取索引是偶数的所有元素,索引从0开始

:odd ?选取索引时基数的所有元素,索引从0开始

? ??:eq(index)选取索引等于index的所有元素(index从0开始)

:gt(index)选取索引大于index的所有元素(index从0开始)

? ? ? ? :lt(index)选取索引小于index的所有元素(index从0开始)

??:header选取所有的标题元素

:animated选取当前正在执行动画的所有元素

? ? ? ? ? (2)内容过滤选择器

? ? ? ? ? ? ? ? :contains(text) 选取含有文本为"text"的元素

:empty 选取不包含子元素或者文本的空元素

:has(selector) 选取含有选择器所匹配的元素的元素

:parent ?选取含有子元素或者文本的元素

? (3)可见性过滤选择器

? ? ? ? ? ? ? ? :hidden 选取所有不可见的元素

:visible 选取所有课件的元素

? ? ? ? ? (4)属性过滤选择器

[attribute] 选取拥有此属性的元素

? [attribute=value]选取属性的值为value 的元素

[attribute!=value]选取属性的值不为value的元素

[attribute^=value]选取属性值以value开头的元素

[attribute$=value]选取属性值以value 结束的元素

[attribute*=value]选取属性值含有的元素

[selector1][selector2][selectorN]没选择一次,缩小一次范围

? ?(5)子元素过滤选择器

:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素(index从1

:first-child 选取每个父元素的第一个子元素

:last-child 选取每个父元素的最后一个子元素

:only-child 匹配父元素下面唯一的子元素

? ??(6)表单对象属性过滤选择器

:enabled 选取所有可用元素

:disabled选取所有不可用元素

:checked 选取所有被选中的元素(单选 复选)

:selected选取所有被选中的选项元素(下拉列表)

? ? 表单选择器

:input ?选取所有的<input>、<textarea>、<select>和<button>元素

:text 选取所有的单行文本框

:password选取所有的密码框

:radio 选取所有的单选框

:checkbox选取所有的多选框

:submit选取所有的提交按钮

:image 选取所有的图像按钮

:reset 选取所有的重置按钮

:button 选取所有的按钮

:file 选取所有的上传域

:hidden 选取所有的不可见元素

? ? 特殊符号的处理:

?

之后。。。。正在完善

热点排行