jQuery之选择器

1、基本选择器

#id:根据ID值匹配元素

Element:根据签名匹配元素

selector1,selector2:匹配所有指定的元素

.class:匹配使用了指定css类的元素

实例：

<div id="div1">div1</div>

<div>div2</div>

<div id="div3">div3</div>

<div class="d1">div4</div>

<a>a</a>

<input type='button' id='btnok' value="确定">

window.onload=function(){

document.getElementById('btnok').onclick=function(){

//匹配ID值为div1的元素

$('#div1').html('测试');

//相当于对象.innerHTML

$('div').html('测试');

//匹配了所有的div元素

$('#div1,#div3,a');

//匹配选择元素,混合匹配

$('.d1').html('测试');

//匹配所有使用了样式d1选择器的元素

};

};

2、层级选择器

ancetor descendant:匹配祖先元素的后代元素

parent > child:匹配父元素的子元素

prev + next:匹配紧挨着它的元素

prev~siblings:匹配平辈元素P(向后匹配)

<div id='div1'>

<form>

<p>段落一</p>

</form>

<p>段落二</p>

</div>

<p>段落三</p>

<p>段落四</p>

<input type='button' id='btnok' value="确定">

window.onload=function(){

document.getElementById('btnok').onclick=function(){

//$('div p').html('测试');

//祖先元素以及后代元素P的匹配

//$('div>p').html('测试');

//只有段落二变了也就是后代变了

//$('div+p').html('测试');

//匹配紧挨着它的元素也就是段落三

$('div~p').html('测试');

//匹配平辈元素P,也就是段落三和段落四(向后匹配)

};

};

3、简单选择器

:first 匹配第一个元素

:last 匹配最后一个元素

:even 匹配所有索引为偶数的元素 索引:从0开始

:odd 同上，奇数

:eq(index) 匹配指定索引的元素

:gt(index) 匹配索引大于指定值的元素

:lt(index) 同上，小于

:not(selector) 匹配除了指定选择器的所有元素

<table border=1 width=500 height=20>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

<input type='button' id='btnok' value="确定">

window.onload=function(){

document.getElementById('btnok').onclick=function(){

//$('td:first').html('测试');//匹配第一个td元素

//$('td:last').html('测试');//匹配最后一个td元素

//$('td:even').html('测试');//偶数个 从0开始

//$('td:odd').html('测试');//奇数个个 从1开始

//$('td:eq(3)').html('测试');//指定

//$('td:gt(2)').html('测试');//大于2的所有元素

//$('td:lt(2)').html('测试');//小于2的所有元素

$('td:not(td:eq(3))').html('测试');//这个里面要放选择器，匹配除了索引为3的元素

};

};

4.内容

:contains(text) 匹配包含指定内容的元素

:empty 匹配内容为空的元素

:has(selector) 匹配内容包含指定选择器的元素

:parent 匹配内容不为空的元素

<ul>

<li>三国</li>

<li><a></a></li>

<li>红楼</li>

<li>西游</li>

<li></li>

</ul>

<input type='button' id='btnok' value="确定">

window.onload = function() {

document.getElementById('btnok').onclick = function() {

//$("li:contains('国')").html('测试');//匹配内容中包含国的li

// $("li:empty").html('测试');//匹配内容为空的li

//$("li:has('a')").html('测试');//匹配内容中包含a选择器的所有li

//$("li:parent").html('测试');//匹配内容不为空的所有li元素

};

};

5、可见性

:hidden：匹配所有隐藏的元素

:visible:匹配所有显示的元素

display

none:隐藏

block:显示

window.onload = function() {

document.getElementById('btnok').onclick = function() {

//$('div:hidden').show();//show方法表示的是显示的意思,匹配所有隐藏的div元素

$('div:visible').hide();//匹配所有显示的div元素，显示隐藏的元素

};

};

<div style='display:none'>div1</div>

<div>div2</div>

<input type='button' id='btnok' value="确定">

6、属性

[attribute]：匹配具有指定属性的元素

[attribute=value]：匹配属性值等于指定值的元素

[attribute!=value] :匹配属性值不等于指定值的元素

[attribute^=value] :匹配属性值以指定值开头的元素

[attribute$=value] :匹配属性值以指定值结束的元素

[attribute*=value] :匹配属性值包含指定值的元素

[selector1][selector2][selectorN]：匹配符合这些条件的所有元素

window.onload = function() {

document.getElementById('btnok').onclick = function() {

//$("font[color]").html('测试');//匹配具有color属性的font元素

//$("font[color='#123456']").html('测试');//匹配color属性的值为#123456的font元素

//$("font[color!='#123456']").html('测试');//匹配color属性不为#123456的font元素

//$("font[color^='#1']").html('测试');//匹配color属性值以#1开头的元素

//$("font[color$='aa']").html('测试');//匹配以ee结尾的font元素

//$("font[color*='a'][size]").html('测试');//匹配color属性中包含a并且有size属性的元素

};

};

<font>元素一</font><br>

<font size='7' color="#123456">元素二</font><br>

<font size='7' color="#5423aa">元素三</font><br>

<font color="#eeeeee">元素四</font><br>

<font color="#ddddd">元素五</font><br>

<input type='button' id='btnok' value="确定">

7.子元素

:nth-child(index/even/odd)：匹配指定索引的元素(从1算起)

:first-child :匹配第一个子元素

:last-child :匹配最后一个子元素

:only-child :如果子元素是父元素唯一子元素，则匹配

这个与简单选择器雷同

8、表单

:input:匹配所有input元素（也能匹配select和textarea元素）

如果是 $(":input")，包括select、textarea

$("input"),匹配input

:text:匹配文本框元素

:password:匹配密码框元素

:radio:匹配单选元素

:checkbox:匹配复选元素

:submit 匹配提交元素

:reset匹配重置选素

:image匹配图像元素

:button匹配按钮元素

:file匹配文件筐元素

:hidden匹配隐藏域元素

<form>

<input type='text'><br>

<input type='file'><br>

<select>a</select><br>

<textarea>b</textarea><br>

<input type="hidden" value='小强'><br>

</form>

<input type='button' id='btnok' value="确定">

window.onload = function() {

document.getElementById('btnok').onclick = function() {

//$(':input').hide();//匹配页面中所有的表单元素

//$(':text').hide();//匹配文本框

//取得input标签中的隐藏域元素的值

alert($('input:hidden').val());

};

};

9.表单对象属性

:enabled:匹配激活状态的表单元素

:disabled:匹配禁用状态的表单元素

:checked:匹配被选中的表单元素checkbox,radio

:selected:匹配被选中的表单元素

练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

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

<title>表单</title>

<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>

<SCRIPT type="text/javascript">

window.onload = function() {

document.getElementById('btnok').onclick = function() {

var hang=$('#hang').val()-1;

var lie=$('#lie').val()-1;

var neirong=$('#neirong').val();

var str='table tr:eq('+ hang +')' + ' td:eq('+ lie +')';

$(str).html(neirong);

};

};

</SCRIPT>

</head>

<body>

<table border=1 width=600 height=150>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

行：<input type='text' id='hang'><br>

列:<input type='text' id='lie'><br>

内容:<input type='text' id='neirong'><br>

<input type='button' id='btnok' value="确定">

</body>

</html>