JQuery以及一个简单的表单演示
(1)JQuery核心函数的介绍
(1)jQuery的简单使用的方法与函数
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery类库使用演示</title>
<!-- 引入jquery类库的路径pageContext.request.contextPath表示当前项目的路径 -->
<script type="text/javascript" src="${pageContext.request.contextPath/js/jquery.js} }" ></script>
</head>
<body>
<ul>
<li id="li1">aaaaa</li>
<li name=li2>bbbbbbbbb</li>
<li class="li3">ccccccc</li>
<li aaa="li4">dddddddddd</li>
<li >ffffffffff</li>
</ul>
<input type="button" id="btnTest" value="测试">
</body>
<script type="text/javascript">
/**
注意,在这了用了jQuery就不必再input中加上onclick事件了,如果在input中是这样写的:<input type="button" name="btnTest" value="测试">
,那么在下面的代码中的写法就是$("[name=btnTest]").click(代码);
注意:如果不是ID与class,其他属性都要用这种方式来写$("[属性名称=属性名称值]").click(代码);
**/
$("#btnTest").click(
function(){
//下面的代码是对ul中的li进行的遍历,取出值
/*
下面的代码也可以写成这样,单独对其中的某行进行取值,在这里用弹框进行输出
alert($("ul li:first").text());//表示取出第一个值
alert($("ul li:last").text());//表示取出最后一个值
*/
$("ul li").each(
function(i,v){
alert(i+":"+$(v).text());//在jQuery中获取标签的值用text()函数
}
);
}
);
/*
获取ID属性值用这种方法:$("#ID"),
下面这个代码在鼠标点到ID值为li1的那行数据时会被触发。
*/
$("#li1").click(
function(){
//取值:$("#li1").text()
alert($("#li1").text());
//更改值,改完后
$("#li1").text("这是更改后的值");
}
);
/*
获取class属性用:$(".class值")
*/
$(".li3").click(
function(){
alert($(".li3").text());
}
);
</script>
</html>
(2)实际表单中的使用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery类库使用演示</title>
<!-- 引入jquery类库的路径pageContext.request.contextPath表示当前项目的路径 -->
<script type="text/javascript" src="${pageContext.request.contextPath/js/jquery.js} }" ></script>
</head>
<body>
<form action="" name="form1" >
用户名称:<input type="text" id="username" value="张三" abc="ds" ><br>
<input type="button" id="btnGetValue" value="取值">
<input type="button" id="btnHidden" value="隐藏">
</form>
<input type="button" id="btnDisplay" value="显示">
</body>
<script type="text/javascript">
$("#btnGetValue").click(
function(){
//表单控件取值用val()实现。
var v=$("#username").val();
alert(v);
//表单控件设置值也用val设置
$("#username").val("李四");
//更改属性(除了ID与class之外的属性)值
$("#username").data("abc","qw");//将abc属性的值改为qw
//更改css属性,如将鼠标移动到的地方变为手的模样,不是箭头模样
$("#username").css("cursor","pointer");
//改变背景颜色
$("#username").css("background","red");
}
);
//可以将整个表单隐藏
$("#btnHidden").click(
function(){
$("form").hide();
}
);
//可以将整个表单显示
$("#btnDisplay").click(
function(){
$("form").show();
}
);
</script>
</html>
注意:以上代码也可以写成:
$("#id值").click(function(){具体代码});