这是我的代码(一个简单的jquery的测试):
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My first jquery test project</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
/*
$()jquery的选择器,创建一个jquery对象,click触发事件,调用js方法function
/
$(document).ready(function(){
$("a").click(function(){
alert("Hello World!");
});
/加CSS样式。。。未遂
选择方式#类似于css样式选择器!
这里的red为已经定义好的css样式类名
/
$("#orderUl li:even").addClass("red");
/鼠标覆盖触发事件*/
$("#orderUl li:last").hover(function(){
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
/*find寻找当前标签的子标签,each遍历所有选中的子标签触发事件
html()是为了获取每个li的html文本,而设置li的html文本是在本身html文本的基础上追加内容!
.html()是获取文本,而.html("xxxxxxxxxxxx")是为了赋值!!!
/
$("#firstUl").find("li").each(function(i){
$(this).html($(this).html()+"I don't understand! "+i);
});
/测试$(this).html的含义*/
$("#secondUl").find("li").eack(function(i){
$(this).html("这是何解?");
});
/*在没有jquery覆盖的dom对象上加call方法,不甚明白!!!???*/
$("button#Cr").click(function(){
alert("-------------");
$("#myform")[0].reset();
});
/*实在不知道什么原因,找个button测试下*/
$("button#testButton").click(function(){
alert("这是为什么呢?");
});
/*filter()和not()
键→值
*/
$("li").not("[ul]").css("border","1px solid black").css("color","blue");
$("a[@name]").background("green");
});
</script>
<script type="text/javascript">
function nan(){
alert("2222");
}
</script>
<style type="text/css">
.red{
background-color:red;
}
.green{
background-color:green;
}
</style>
</head>
<body style="text-align:center;">
<a href="#">弹出Hello World!</a>
<br/>
<a name="a1" href="#">弹出Hello World!</a>
<br/>
<a href="#">弹出Hello World!</a>
<br/>
<ul id="orderUl">
<li>背景颜色为红色!!!</li>
<li>背景颜色为红色!!!</li>
<li>背景颜色为红色!!!</li>
</ul>
<br/>
<ul id="firstUl">
<li></li>
<li></li>
<li></li>
</ul>
<br/>
<ul id="secondUl">
<li>
<ul>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
</ul>
</li>
<li>222222222222</li>
<li>222222222222</li>
</ul>
<br/>
<form id="myform" action="" method="post">
<table>
<tr>
<td>
<input type="text"/>
</td>
</tr>
<tr>
<td>
<input id="Cr" type="button" value="清 空" />
</td>
</tr>
</table>
</form>
<br/>
<input type="button" value="测 试" id="testButton" name="testButton"/>
</body>
</html>
为什么我的button不能触发事件,并且按个跟name属性获得对象的方法也不行啊,帮帮我。。。谢谢啦
问题补充
$("input[name='testButton']").bind('click',function(){alert("弹出来了!");});
$("input[name='testButton']").bind('click',function(){alert("弹出来了!");});
id在DOM文档中表示该元素的唯一标识符,如果一个元素有id一般情况下可直接使用id来定位元素
在jQuery中,使用id来找到元素的语法为
[code="Javascript"]
$("#testButton")
[/code]
jQuery会使用
[code="Javascript"]document.getElementById("testButton")[/code]
来从文档中找到id对应的元素,如果前边一定要加上标签名作为选择器的话,jQuery会首先通过[code="Javascript"]document.getElementByTagName("input")[/code]来找到所有标签名为tagname的元素,然后再从中找到id为“testButton”的元素,这样其实让jQuery多走了不必要的一步,会降低jQuery的查找效率,所以在使用id来选择元素时,最好不要再添加其他的选择器
楼主问[quote]我的好像还是不行,是不是前边某一行出问题了,就不向下走了啊?这个button#id的形式不对吗?[/quote]
这个问题其实很简单"button#id"中的button不是标签名,至少不是楼主页面中所写的标签名,楼主所写的是input标签,所以使用button来作为选择器时是找不到元素的,应该为“input#id”
$("button[name='testButton']").click(function(){
alert("弹出来了!");
});
[quote="chenkuntian"][quote="2008shucheng"]$("button[name='testButton']").click(function(){
alert("弹出来了!");
});[/quote]
我的好像还是不行,是不是前边某一行出问题了,就不向下走了啊?这个button#id的形式不对吗?[/quote]
[code="javascript"]
$("input[name='testButton']").bind('click',function(){alert("弹出来了!");});
[/code]
你的错误有2:
1、/*测试$(this).html的含义*/ 这个循环的时候each写成eack
2、$("button[name='testButton']")前面要加冒号
$(":button[name='testButton']")
[quote]我用这种方法可以了:$(标签名[@属性名]);为什么啊?是不是和浏览器版本有关?还是和jquery版本有关啊? [/quote]
jquery版本比较旧吧