jQuery中的选择器
Posted 折腾青春
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中的选择器相关的知识，希望对你有一定的参考价值。
<%@ 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="<c:url value=‘/js/jquery-3.1.0.js‘/>"></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="演示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中的选择器的主要内容，如果未能解决你的问题，请参考以下文章