基本选择器

Posted on Posted in js
Tips: 本文创建于2014年7月4日,已超过 2 年,内容或图片可能已经失效!

jqurey

  1. 基本选择器
  2. 层次选择器
  3. 简单过滤选择器
  4. 内容过滤选择器
  5. 表单过滤选择器

基本选择器

[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
function f1(){
console.log($("#apple"));
$("#apple").css('color','red');
$(".pear").css('font-size','25px');
$("ul").css('background-color','lightblue');
//$("*").css('background-color','purple');
$("h2,#apple,#dog").css('color','blue');
}
</script>
<style type="text/css">
#apple{
width:200px;
height:150px;
background-color:pink;
}
.pear{
color:blue;
}
ul{
background-color:lightgreen;
}
#apple,#dog,h2{

}
</style>
</head>
<body>
<h2>基本选择器</h2>
<div id="apple">2014-07-04</div>
<div class="pear">jquery</div>
<ul>
<li id="yi">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
[/code]

层次选择器

1.sela selb
派生选择器
$("div span") 寻找div下的所有span元素节点
<div>
<span></span>
<p><span></span></p>
</div>

2.sela > selb
在给定sela节点下边匹配所有的selb子元素,不是所有,是子元素

3.sela + selb 匹配第一个兄弟元素
匹配所有紧跟在sela后边的(第一个)selb元素
$("div+p") 匹配下面第二行和第五行的p标签
<div><p></p></div>
<p></p>
<p></p>
<div></div>
<p></p>

3.sela ~ selb 匹配所有兄弟元素

简单过滤选择器

[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
function f1(){
/* $("li:first").css('background-color','pink'); //第一个
$("li:last").css('background-color','lightblue'); //第二个
$("li:even").css('color','red'); //索引值等于偶数,索引值从0开始
$("li:odd").css('color','blue'); //索引值等于奇数
$("li:eq(3)").css('font-size','50px'); //找到所引致等于equal条件值的元素
$("li:gt(2)").css('color','red'); //大于索引值的元素
$("li:lt(2)").css('color','red'); //小于索引值的元素 */
$("li:gt(3):lt(2)").css('color','blue'); // 取中间的部分,每次选,下标都是从0开始
$("li:not(#wu)").css('color','red'); // 选择不是wu选择器的元素
$(".bt:header").css('color','blue');//匹配h标签的元素
}
</script>

</head>
<body>
<h2 class="bt">简单过滤选择器</h2>
<div class="bt"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li id="wu">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
[/code]

内容过滤选择器

1.contains(text)
元素节点内部包含的信息必须存在"条件值"
$("div:contains('this')")
<div>this is Wednesday</div>
<div>tomorrow</div>

2.empty
直接匹配空元素
$("div:empty")
<div></div>

3.has(selector)
元素节点内部必须存在对应选择器的节点
$("div:has("#apple")")
<div><p id="apple"></p></div>
<div><p></p></div>

4.parent
匹配作为父元素存在的元素
内部有:文本节点、元素节点、空白文本节点
$("div:parent")
<div>goods</div> 选择这个
<div></div>

表单过滤选择器

[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){

//获得复选框被选中情况 :checked
console.log($(".hobby:checked"));

//获得单选按钮选中情况
console.log($(".sex:checked"));

//获得下拉列表选中情况
console.log($("option:selected"));
}
</script>

<style type="text/css">
</style>
</head>
<body>
<h2>表单过滤选择器</h2>
<input type="checkbox" class="hobby" value="篮球" disabled="disabled">篮球
<input type="checkbox" class="hobby" value="音乐">音乐
<input type="checkbox" class="hobby" value="上网">上网
<input type="checkbox" class="hobby" value="旅游">旅游
<br /><br />
<input type="radio" class="sex" name="sex" value="男">男
<input type="radio" class="sex" name="sex" value="女">女
<input type="radio" class="sex" name="sex" value="春哥">春哥
<br /><br />
<select multiple="multiple">
<option value=0>小学</option>
<option value=1>初中</option>
<option value=2>高中</option>
<option value=3>大学</option>
</select>

<input type="button" value="触发" onclick="f1()" disabled="disabled"/>

</body>
</html>
[/code]

» 转载请注明来源:若我若鱼 » 基本选择器

Leave a Reply

Your email address will not be published. Required fields are marked *

four × two =