JQuery 选择器
目录
1 JQuery对象转DOM对象
2 JQuery选择器
a 基本 b 层级 c 内容
几种选择类型:
$("p")基础选择
$("div:contains('aaa')") 根据内容进行过滤用冒号
$("input[type="text"]") 根据属性进行过滤用中括号
$("div #div1") 多条件并且关系的过滤用空格
$("div,#div1") 多条件或者关系的过滤用逗号
一、JQuery对象转DOM对象
JQueryobj.get(0),JQueryobj[0];
<body> <p id="test">This is another paragraph.</p> </body> <script type="text/javascript"> var a1= $("#test").get(0);var a2= $("#test")[0]; var b=document.getElementById("test"); alert(a1==b); alert(a2==b); //true,true </script>
二、JQuery选择器
基本选择器
假设id="test",class="test",操作的标签是p;
按Id选择 $('#test')
按class选择 $('.test')
按node选择 $('p')
全部选择 $('*')
多项选择 $('#test,.test,p')--常用
按name选择器没找到 可以使用这个$('[name=test]') --常用
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<p id="test">id=test</p>
<p class="test" background="black">class=test</p>
<p name="test">name=test</p>
<button type="button" id="button1">Click me</button>
</body>
<script type="text/javascript">
$('#button1').click(
function() {
$('#test').html("id=test---->change text");//select by id
$('.test').css({"color":"blue","font-family": "Fantasy"});//select by class
$('p').css({"color":"blue"});//select all p node
$('*').css({"color":"red"});//select all node
$('#test,.test,p').css({"color":"black"}); //select muti selector choose
}
);
</script>
</html>
另外基础的过滤选择方法还有(双引号)
1 选择第一个div $("div:first")
2 选择第一个div $("div:last")
3 选择class不等于div1的div $("div:not(.div1)")---常用
4 选择div索引为偶数的 $("div:even")
5 选择父节点的兄弟节点中的第N个$(this).parent().siblings("td").eq(2)---常用
<%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>My JSP 'index.jsp' starting page</title> </head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body> <div>div</div> <div>div</div> <div>div</div> <div id="div1" > <table border="1"> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <tr> <td>1</td> <td>2</td> <td>3</td> <td><input type="button" id="button2" value="click me"></td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td><input type="button" id="button3" value="click me"></td> </tr> </table> <input type="button" id="button1" value="click me"> </div> </body> <script type="text/javascript"> $('#button1').click(function() { alert("选择第一个div"); $("div:first").css({"background":"yellow"}); alert("选择最后div"); $("div:last").css({"background":"yellow"}); alert("选择偶数div"); $("div:odd").css({"background":"green"}); alert("选择奇数div"); $("div:even").css({"background":"blue"}); alert("选择id不等于div1"); $("div:not('#div1')").css({"background":"red"}); }); $('#button2,#button3').click(function() { alert($(this).parent().siblings("td").eq(2).html()); }); </script> </html>
层级选择器
下层选择 （子节点）
选择div下一层所有的p节点 $('div>p')
选择div下一层id=test的节点 $('div>#test')---常用
选择div下一层class=test的节点 $('div>.test')
选择div下一层后面name=test的节点 $('div>[name=test]')---常用
选择id=div1下一层后面所有的p节点 $('#div1>p') --常用
选择div下所有层级的p节点 $('div p')
同一层选择 （兄弟节点）
选择id=test后面第一个p兄弟节点 $('#test + p')
选择id=test后面所有p兄弟节点 $('#test ~ p')
选择class=test的所有p兄弟节点 $('.test').siblings("p")---常用
内容选择器
按内容查找等于 $("div:contains('3')") --常用
按内容查找不等于 $("div:not(:contains('3'))") --常用
<%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>My JSP 'index.jsp' starting page</title> </head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body> <div>div</div> <div>div</div> <div>div</div> <div id="div1" > <table border="1"> <th>一</th> <th>二</th> <th>三</th> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> <input type="button" id="button1" value="click me"> </div> </body> <script type="text/javascript"> $('#button1').click(function() { alert("包含3的div"); $("div:contains('3')").css("background","red"); alert("不包含3的div"); $("div:not(:contains('3'))").css("background","blue"); }); </script> </html>
