jQuery学习基础理论（二）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="UTF-8"><title>JQuery选择器</title><script type="text/javascript" src="scripts/jquery-3.2.1.js"/>
</head>
<body>
<script type="text/javascript"><!--为id为tt的元素添加样式color=red-->$('#tt').css("color","red");if(document.getElementById("tt")){document.getElementById("tt").style.color="red";}/*$('#tt')获取的是一个对象，检验对象是否存在用下面的方法：*/if($('#tt').length > 0){//other code}if($('#tt')[0]){//other code}//获取网页中的所有p元素，并且添加onClick事件var items = document.getElementsByTagName("p");for(var i=0;i<items.length;i++){items[i].onclick = function () {//do something}}//使一个特定的表格隔行变色var item1 = document.getElementById("id");var tbody = item1.getElementsByTagName("tbody")[0];var trs = tbody.getElementsByTagName("tr");for(var i=0;i<trs.length;i++){if(i%2==0){trs[i].style.backgroundColor="red";}}//对多选框进行操作，输出选中的多选框的个数var btn = document.getElementById("btn");btn.onclick = function () {var arrays = new Array();var item2 = document.getElementsByName("check");for(var i=0;i<item2.length;i++){if(item2[i].checked){arrays.push(item2[i].value);}}alert("选中的个数是:" + arrays.length);}//获取表单内表单元素的个数$('#form :input').length;//获取表单内单行文本框的个数$('#form :text').length;</script>
</body>
</html>
<!--
CSS选择器
（1）标签选择器：以文档元素作为选择符
td {font-size: 14px;width: 120px;
}
（2）ID选择器：以文档元素的唯一标识符ID作为选择符
#id{font-size: 14px;width: 120px;
}
（3）类选择器：以文档元素的class作为选择符
.hj {font-size: 14px;
}
（4）群组选择器：多个选择符应用同样的样式规则
td,p,.hj{color: red;
}
（5）后代选择器：元素E的任意后代元素F
#links a{color: red;
}
（6）通配选择符：以文档元素的所有元素作为选择符
* {font-size: 14px;
}
=============================================================
JQuery选择器和CSS选择器的不同：
JQuery选择器找到元素后是添加行为；CSS选择器是找到元素后添加样式。
=============================================================
JQuery基本选择器
（1）#id 根据给定的id匹配一个元素   返回单个元素    $('#id');
（2）.class 根据给定的类名匹配元素  返回集合元素  $('.phone');
（3）element 根据给定的元素名匹配元素  返回集合元素  $('p')选取所有的<p>元素
（4）* 匹配所有的元素 返回集合元素 $("*")选取所有的元素
（5）selector1,selector2,...selectorN  将每一个选择器的匹配到的元素合并后一起返回 返回集合元素
JQuery层次选择器（通过DOM元素之间的层次关系来获取特定的元素）
（1）$('ancestor descendant') 选取ancestor元素里的所有descendant（后代）元素   返回集合元素  $('div span')选取<div>里的所有<span>元素
（2）$('parent>child') 选取parent元素下的child元素，与上面有区别，上面选的是后代元素     返回集合元素  $('div>span')选择div元素下元素名是<span>的子元素。
（3）$('prev+next')选取紧接在prev元素后的next元素  返回集合元素  $('.one+div')返回class为one的紧接着的div元素  等价于next()方法
（4）$('prev~siblings')选取prev元素之后的所有siblings元素  返回集合元素 $('#two~div')选择id=two的元素后面的所有<div>同辈元素  等价于nextAll()方法
JQuery过滤选择器（通过特定的过滤规则来筛选出所需要的DOM元素）
基本过滤选择器
:first 选取第1个元素，返回单个元素，$('div:first')选取所有<div>元素中第1个<div>元素
:last 选取最后1个元素，返回单个元素，$('div:last')选取所有<div>元素中最后1个元素
:not(selector) 去除所有与给定选择器匹配的元素，返回集合元素，$('input:not(.myClass)')选取class不是myClass的input元素
:even 选取索引是偶数的所有元素，索引从0开始 返回集合元素  $('input:even')选取索引是偶数的input元素
:odd 选取索引是奇数的所有元素，索引从0开始 返回集合元素 $('input:even')选取索引是奇数的input元素
:eq(index) 选取索引等于index的元素(index从0开始) 返回单个元素 $('input:eq(1)')选取索引等于1的input元素
:gt(index) 选取索引大于index的元素（index从0开始） 返回集合元素 $('input:get(1)')选取索引大于1的input元素（大于1，但是不包括1）
:lt(index) 选取索引小于index的元素（index从0开始） 返回集合元素 $('input:lt(1)')选取索引小于1的input元素（小于1，但是不包括1）
:header 选取所有的标题元素，例如h1,h2等等 返回集合元素 $(':header')选取网页中所有<h1>,<h2>...
:animated 选取当前正在执行动画的所有元素 返回集合元素 $('div:animated')选取正在执行动画的<div>元素
:focus 选取当前获取焦点的元素 返回集合元素 $(':focus')选取当前获取焦点的元素
内容过滤选择器
:contains(text) 选取含有文本内容为"text"的元素，返回集合元素，$('div:contains('我')')选取含有文本"我"的div元素
:empty 选取不包含子元素或者文本的空元素，返回集合元素，$('div:empty')选取不包含子元素（包含文本元素）的div空元素
:has(selector)选取含有选择器所匹配的元素的元素  集合元素$('div:has(p)')选取含有<p>元素的div元素
:parent选取含有子元素或者文本的元素，返回集合元素，$('div:parent')选取拥有子元素（包括文本元素）的div元素
可见性过滤选择器（根据元素的可见和不可见状态来选择相应的元素）
:hidden 选取所有不可见的元素  返回集合元素 $(':hidden')选取所有不可见的元素，包括<input type="hidden"/>,<div style="display:none;">
和<div style="visibility:hidden;">等元素，如果只选中input元素，可以使用$('input:hidden');
:visible 选取所有可见的元素 ，返回集合元素  $('div:visible')选取所有可见的div元素
属性过滤选择器(通过元素的属性来获取相应的元素)
[attribute] 选取拥有此属性的元素，返回集合元素,$('div[id]')选取拥有属性id的元素
[attribute=value],选取属性的值为value的元素，返回集合元素，$('div[title=test]')选取属性title为test的div元素
[attribute!=value],选取属性的值不等于value的元素，返回集合元素，$('div[title!=test]')选取属性title不等于test的div元素，没有属性title
的div元素也会被选取
[attribute^=value],选取属性值以value开始的元素，返回集合元素，$('div[title^=test]')选取属性title以test开始的div元素
[attribute$=value],选取属性值以value结束的元素，返回集合元素，$('div[title$=test]')选取属性title以test结束的div元素
[attribute*=value],选取属性的值含有value的元素，返回集合元素，$('div[title*=test]')选取属性title中含有test的div元素
[attribute|=value],选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素,$('div[title|='en']')选取属性
title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素。
[attribute~=value],选取属性用空格分隔的值中包含一个给定值的元素，返回集合元素，$('div[title~='uk']')选取属性title用空格分隔的值中包含字符uk的元素
[attribute1][attribute2][attributeN]，用属性选择器合并成一个符合属性选择器，满足多个条件，每选择一次，缩小一次范围。返回集合元素，$('div[id][title$='test']')
选取拥有属性idm并且属性title以test结束的div元素。
子元素过滤选择器
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素（index从1开始），返回集合元素，:eq(index)只匹配一个元素，:nth-child将每一个父元素匹配
子元素，且:nth-child(index)的index是从1开始的，但是:eq(index)是从0开始；
even:选取每个父元素下的索引值是偶数的元素；
odd：选取每个父元素下的索引是奇数的元素；
2表示能选取每个父元素下的索引值等于2的元素；
3n表示能选取每个父元素下的索引值是3的倍数的元素，n从1开始
3n+1表示能选取每个父元素下的索引值是3n+1的倍数的元素，n从1开始
:first-child，选取每个父元素的第1个子元素，返回集合元素，:first只是返回单个元素，:first-child选择符将为每个父元素匹配第1个子元素。
$('ul li:first-child')选择每个ul后面第一个li元素
:last-child,选取每个父元素的最后一个子元素，返回集合元素，同样，:last只返回单个元素，:last-child选择符将为每个父元素匹配最后一个子元素。
$('ul li:last-child')选择每个ul最后一个li元素。
:only-child,如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配。返回集合元素，$('ul li:only-child')
在ul中选取是唯一子元素的li元素。
表单对象属性过滤选择器（对所选择的表单元素进行过滤）
:enabled,选取所有可用的元素，返回集合元素，$('#form1 :enabled')选取id为form1的表单内的所有可用元素
:disabled,选取所有不可用的元素，返回集合元素，$('#form1 :disabled')选取id为form1的表单内的所有不可用元素
:checked,选取所有被选中的元素（单选框，复选框），返回集合元素，$('input:checked')选取所有被选中的input元素
:selected,选取所有被选中的选项元素（下拉列表），返回集合元素，$('select option:selected')选取所有被选中的选项元素
表单选择器
:input 选取所有的input textarea select button元素，返回集合元素
:text 选取所有的单行文本框，返回集合元素
:password 选取所有的密码框，返回集合元素
:radio 选取所有的单选框，返回集合元素
:checkbox 选取所有的多选框，返回集合元素
:submit 选取所有的提交按钮，返回集合元素
:image 选取所有的图像按钮，返回集合元素
:reset 选取所有的重置按钮，返回集合元素
:button 选取所有的按钮，返回集合元素
:file 选取所有的上传域，返回集合元素
:hidden 选取所有不可见元素，返回集合元素
选择器中的一些注意事项
（1）选择器中含有"."   "#"  "("  "]"等特殊字符，需要对其进行转义//对特殊字符进行转义<div id="id#b"></div> ========$('#id\\#b')<div id="id[1]"></div>========$('#id\\[1\\]');
（2）属性选择器的@符号
jquery1.3.1版本以上就可以不再属性前面添加@符号
（3）选择器中空格多一个少一个也会得到不同的结果。
-->

jQuery学习基础理论（二）相关推荐

jQuery学习（二）—jQuery对象的获取
jQuery学习(二)-jQuery对象的获取
jQuery学习之二---jq核心
还是那句话,我在这边只选择一些我已经看懂的,不能传播错误信息不是吗,哈哈,然后就是我个人觉得比较重要的,OK,下面开始学习,加油啊,一起加油! jQuery核心函数 1.jquery([selecto ...
jquery 学习之二属性---文本值
text() 取得所有匹配元素的内容. 结果是由所有匹配元素包含的文本内容组合起来的文本.这个方法对HTML和XML文档都有效. Get the text contents of all matche ...
jQuery学习教程二十: jQuery 遍历 - 后代
后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() f ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
jQuery学习（十二）—jQuery中对象的查找方法总结
jQuery学习(十二)-jQuery中对象的查找方法总结一.find方法作用:在元素1中查找元素2,类似于选择器中的后代选择器格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...
jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo(" ...
jQuery学习笔记系列（二）
day02 - jQuery 学习目标: 能够操作 jQuery 属性能够操作 jQuery 元素能够操作 jQuery 元素尺寸.位置 1.1. jQuery 属性操作 jQuery 常用属 ...

jQuery学习基础理论（二）

jQuery学习基础理论（二）相关推荐

最新文章

热门文章