1 取值
<input type="text" name="name" id="name" value="测试" >
var value=$("#name").val(); //取值
$("#name").val("测试 测试"); //设置值
2 操作内容
1）<span id="test"><font color="red">测试</font></span>
var rs=$("#test").test(); //取内容
$("#test").test(" 测试 测试 测试"); //设置内容
var rs=$("#test").html(); //取html内容
$("#test").html("<font color="red">测试</fong>"); //设置html内容
2）<select name="test" id="test" style="width:180px">
<option value="">全部</option>
<option value="test1">测试一</option>
<option value="test2">测试二</option>
var rs=$("#test").find("option:selected").text(); //取得被选中的内容
3) 设置下拉框根据条件默认选中（使用2)中的select）
var length=$("#test option").length;
for (var i=0;i<length;i++){
if ($("#test").get(0).options[i].value=="测试二"){
$("#test").get(0).options[i].selected=true; //将下拉框，内容为"测试二"的选项选中
break;
}
}
3 禁用启用文本框
<input type="text" name="name" id="name" value="测试" >
$("#name").attr({'disabled':'disabled'}); //禁用
$("#name").removeAttr("disabled"); //启用
4.1 复选框操作
<input type="checkbox" name="test" value="test1" >
<input type="checkbox" name="test" value="test2" >
<input type="checkbox" name="test" value="test3" >
var num=0; //统计被选中的个数
var ids=null; //统计被选中的值
$("input[name='test']:checkbox").each(function(){
if($(this).attr("checked")){
num+=1;
ids=ids+$(this).val()+",";
}
});
alert(num);
alert(ids);
4.2 单选按钮取值方法
<input type="radio" name="test" value="test1"/>
<input type="radio" name="test" value="test2"/>
<input type="radio" name="test" value="test3"/>
$("input[type=radio]").bind("click",function(){
var value = $("input[name='test'][type='radio'][checked]").val();
alert(value);
});
4.3 单选按钮默认选中
<input type="radio" name="test" value="test1"/>
<input type="radio" name="test" value="test2"/>
<input type="radio" name="test" value="test3"/>
$("input[name='test']:radio").each(function(){
if($(this).attr("value")=="test2"){
$(this).attr('checked','checked');
}
});
5 事件绑定
<input type="button" value="测试" id="test" />
$("#test").bind("click",function(){
alert("做我想做的");
});
//其中事件真对不同的元素有不同的事件，包括 blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,
mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error
6 ajax
var param="name=zhangshan,age=30"l
$.ajax({
url: '${ctx}/scoreMngAction.do?method=relScore',
type: 'POST',
dataType:'html',
timeout: 2000000,//超时时间设定
data:param,//参数设置
error: function(){alert('error:不能连接远程服务器');},//错误处理，隐藏进度条
success: function(data){
alert(data);
}
});
后台取值
String name=request.getParameter("name");
String age=request.getParameter("age");
后台返回值
PrintWriter out = response.getWriter();
out.print("操作成功!");
7 操作元素属性
<input type="text" name="test1" id="test" value="测试" />
$("#test").attr("name","test2"); //设置元素中name属性中的内容，将test1改为test2
alert($("#test").attr("name")); //取得元素name属性中的内容
8 表单提交
<form id="form1">
<input type="button" id='submit' value="提交"/>
</form>
$("#submit").bind("click",function(){
$("#form1").attr("action","xx.action");
$("#form1").attr("method","post");
$("#form1").submit();
});
9 填加和移除样式
<style type="text/css">
.focus {
border: 1px solid #f00;
background: #fcc;
}
</style>
<input id="username" type="text" />
<input id="pass" type="password" />
<textarea id="msg" rows="2" cols="20"></textarea>
<script type="text/javascript">
$(function(){
$(":input").focus(function(){ //文本框获得焦点时增加样式
$(this).addClass("focus");
}).blur(function(){ //文本框失去焦点时移除样式
$(this).removeClass("focus");
});
})
</script>
10 遍历指定无素
<input type="text" name="test1" id="test1" />
<input type="text" name="test2" id="test2" />
<input type="text" name="test3" id="test3" />
function disableText(){
$("input[type='text']").each(function(){ //遍历所有text元素
$(this).attr({'disabled':'disabled'}); //增加禁用属性
//$(this) 为当前所遍历到的元素对象
});
}
//$(":input").attr({'disabled':'disabled'}); 该方法可以默认禁用所有input元素
11 显示隐藏指定元素
<span id="test" style="display: none">测试</span>
$("#test").show(); //显示
$("#test").hide(); //隐藏
12 文本框获得焦点
<input type="text" id="test1" value="" />
$("#test1")[0].focus();
13 table取元素值
tr下取第一个td值
$(this).children().eq(0).text()
$("#tid [id=trid] td:eq(0)") table的id为tid,tr为trid中的第一列td，eq括号中为td的索引值，从0开始