首先導入js文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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>Insert title here</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> // 調用jquery //相當於Window.load()當窗口加載完畢之后觸發 //alert("hello jquery"); $(function () { //alert("hello jquery"); //選擇器 //id選擇器 $("#bt1").click ( function() { alert("id 點擊了按鈕"); } ); //標簽選擇器 //屬性過濾器 $("input:button").click ( function() { alert("通過標簽選擇器 選中了按鈕"); } ); //類選擇器 $(".cl").click ( function() { alert("通過標簽選擇器 選中了按鈕"); } ); //使用DOM方式獲取jQuery元素 var bt_3 = document.getElementById("bt3"); var $jbt_3=$("#bt3"); $jbt_3.click( function(){ alert("將DOM對象轉為jQuery對象"); } ); //將jQuery對象轉為DOM對象 //1.獲得jQuery對象 var $jbt_1=$("#bt1"); alert("$jbt_1集合長度="+$jbt_1.length); //2.將jQuery對象轉為DOM對象 var bt_1=$jbt_1[0];//var bt_1=$jbt_1.get(0); //使用DOM方式獲得文本內容 alert("DOM按鈕的內容="+bt_1.value); //button按鈕 var $jbt_4=$("button");//使用標簽選擇器 alert("$jbt_4集合長度="+$jbt_4.length); var bt_4=$jbt_4[0]; //使用DOM方式獲得文本內容 alert("DOM button按鈕的內容="+bt_4.firstChild.nodeValue); //使用jQuery方式獲得文本內容 $jbt_4.click( function() { alert("button 的 文本="+$(this).text()) } ); } ) </script> </head> <body> 調用jquery <br> <input type="button" id="bt1" value="按鈕1"> <br> <input type="button" id="bt2" value="按鈕2"> <br> <input type="text" class="cl" > <br> <input type="button" id="bt3" value="按鈕3"> <br> <button id="bt4">按鈕4</button> <br> <button id="bt5">按鈕5</button> </body> </html>