JQuery学习笔记-选择器-
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery学习笔记-选择器-相关的知识，希望对你有一定的参考价值。
选择器的简单使用
<%-- Created by IntelliJ IDEA. User: cxspace Date: 16-8-25 Time: 下午2:29 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>jquery选择器</title> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <style type="text/css"> .myClass{ font-size: 30px; color: aqua; } </style> </head> <body> <div id="div1ID">div1</div> <div id="div2ID">div2</div> <span class="myClass">span</span> <p>段落</p> <script type="text/javascript"> //1)查找ID未"div1ID"的元素个数 //alert($("#div1ID").size()); //2)查找DIV元素的个数 // alert($("div").length); //3)查找所有样式是"myClass"的元素的个数 // alert($(".myClass").size()); //4)查找div,span,p元素的个数 //alert(($("div,span,p").size())); //5)查找所有ID为div1ID,CLASS为myClass,p元素的个数 //alert($("#div1ID,.myClass,p").size()); </script> </body> </html>
<%--
Created by IntelliJ IDEA.
User: cxspace
Date: 16-8-25
Time: 下午2:29
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>jquery选择器</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.myClass{
font-size: 30px;
color: aqua;
}
</style>
</head>
<body>
<input type="radio" value="1"/>
<input type="radio" value="2"/>
<input type="radio" value="3"/>
<form>
<input type="text" value="a"/>
<table>
<tr>
<td>
<input type="checkbox" value="b"/>
</td>
</tr>
</table>
</form>
<input type="radio" value="c"/>
<input type="radio" value="d"/>
<input type="radio" value="e"/>
<script type="text/javascript">
//1)找到form内所有的input元素个数
// alert($("form input").size());
//2)找到form里面所有的子级元素个数
// alert($("form>input").size());
//3)找到form同级第一个input元素的value的值
//alert($("form+input").val());
//4)找到所有与表单form同级input元素的个数
alert($("form~input").size());
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<title>选择器</title>
</head>
<body>
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
<li>list item5</li>
</ul>
<input type="checkbox" checked/>
<input type="checkbox" checked/>
<input type="checkbox" />
<table border="1">
<tr><td>line1[0]</td></tr>
<tr><td>line2[1]</td></tr>
<tr><td>line3[2]</td></tr>
<tr><td>line4[3]</td></tr>
<tr><td>line5[4]</td></tr>
<tr><td>line6[5]</td></tr>
</table>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<script type="text/javascript">
//1） 查找ul中第一个li元素的内容
//html()要用于html/jsp,不能用在xml
//text()既能用于html/jsp,且能用于xml
// alert($("ul li:first").text());
//2)查找ul中组后一个元素的内容
//alert($("ul li:last").text());
//3)查找表格的索引号为1、3、5...奇数行的个数
//alert($("table tr:odd").size());
//4)查找表格的索引号为2、4、6...偶数行个数
//alert($("table tr:even").size());
//5)查找表格中第二行的内容
//html():强调的是标签中的内容,即便标签中的子标签,也会显示出来
//text():强调的是标签中的文本内容,即使是标签中的子标签,也只会显示出标签中文本的内容
//alert($("table tr:eq(1)").text());
//6)查找表格中索引值大于0的行的数量
//alert($("table tr:gt(0)").size());
//7)查找索引值小于3的行的个数
//alert($("table tr:lt(3)").size());
//8)给页面内所有标题加上红色背景色,且文字加黄色
// $(":header").css("background-color","red").css("color","#ffff33");
//9)查找所有[未]选中的input为checkbox的元素个数
alert($(":checkbox:not(:checked)").size());
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
.myClass{
font-size: 44px;
color:blue;
}
</style>
</head>
<body>
<div><p>John Resig</p></div>
<div><p>George Martin</p></div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<div></div>
<p></p>
<p></p>
<script type="text/javascript">
//1)查找所有包含文本"John"的div元素的个数
//alert($("div:contains(‘John‘)").size());
//2)查找所有p元素为空的元素个数
//alert($("p:empty").size());
//3)给所有包含p元素的div元素添加一个myClass样式
// $("div:has(p)").addClass("myClass");
//4)查找多有含有子元素或者文本的p元素个数,即p为父元素
alert($("p:parent").size());
</script>
</body>
</html>
以上是关于JQuery学习笔记-选择器-的主要内容，如果未能解决你的问题，请参考以下文章