首页 > 代码库 > jQuery中的选择器

jQuery中的选择器

2024-09-07 14:55:01   213人阅读

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
	
<!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>JQuery演示示例</title>
		
		<style type="text/css">
			div{
				width:300px;
				height:50px;
				background: yellow;
				margin:5px;
			}
		</style>
		
		<script type="text/javascript" src="http://www.mamicode.com/"></script>
		
		<script type="text/javascript">
			//※jQuery中的选择器，和CSS中的一样。如:
				//1. "#"为id选择器
                //2. "E"为元素选择器
                //3. "E E2"为包含选择器
                //4. "."为类选择
                //5. "input[name=‘age‘]"属性选择器
                //6. ":" 冒号选择器
                
                $( function(){
                    //1. "#"为id选择器
                	$("#btn1").click(function(){
                		
                		//2. "E"为元素选择器  --演示段3时必须把该段注掉,有冲突
                		 
                		/* $("div").html("今天天气真好!");
                		$("div:first").html("下雪了...");
                		$("div:eq(2)").html("下ooo了..."); */
					 
						//3. "E E2"为包含选择器
                		//$("div p").html("Hello World...");
						$("#aa ~ div").html("112233aaa");//这里表示的从id为aa的到后面的div的内容都设置成112233aa的内容;
						
						//4. "."为类选择 ---行云流水
						$(".xy").css("background","red").html("下课了...").css("border","1px solid green");
						
						//5. "input[name=‘age‘]"属性选择器
						var txt = $("input[name=‘name‘]").val();//选择具有"name"的<input>元素，并获取其中的值
						//alert(txt);
						$("input[name=‘name‘]").val("4556");//设置值
						
						//6. ":" 冒号选择器
						var len= $(":input").length;
						alert(len);
                	});
                	
                  }
                );
                
                
		</script>
		
	</head>
	<body>
		<input type="button" id="btn1" value="http://www.mamicode.com/演示jQuery选择器" /> <br/>
		<div id="aa">0000
			<p>p1111</p>
		</div>
		<div id="bb">bbb</div>
		<h3  class="xy">abc</h3>
		<p>p22222</p>
		<div id="cc">cccc</div>
		<h3>abc</h3>
		<div id="dd">ddd
		   <b>bold
		    	<p>p333</p>
		   </b>
		</div>
		<form action="">
			name:<input type="text" name="name"/> <br/>
			age:<input type="text" name="age"/> <br/>
			<div class="xy">xyz</div>
		</form>
	</body>
</html>

　　

jQuery中的选择器


联系
我们