標籤:屬性選取器 div asc html click 表示 char 樣本 name
<%@ 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中的選取器