首先导入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>