引入
<script language="javascript" src="js/jquery-1.11.2.js"></script>这样就可以使用我们的jQuery了
选择器
基本选择器
id(#)
class(.)
元素选择器（div等）
复合选择器
祖先 后代
父亲>儿子
相邻兄的
$(form+input)
相隔兄的
$(form ~ input)
注册事件
<!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>jquery练习一</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js" ></script>
<script type="text/javascript">
$(function() {
$("#btn").on("click",function(){
//区分绑定的属性，和是否被选中
console.debug($("input[name='hobbies']:checked").length);
})
//alert($("input:checked").length);
$("p").on("click",function(){
//选择当前被选择的谁点击谁触发
$(this).hide();
})
$("tr:even").css("background-color","aquamarine");
$("tr:odd").css("background-color","royalblue");
});
</script>
</head>
<body>
篮球
<input type="checkbox" name="hobbies" value="篮球"/> 足球
<input type="checkbox" name="hobbies" value="足球"/> 羽毛球
<input type="checkbox" name="hobbies" value="羽毛球"/>
<input value="点击获取选中个数" type="button" id="btn" />
<br />点击p标签隐藏
<br />
<p>p1</p>
<p>p2</p>
<p>p3</p>
<br />给不同的行添加颜色<br/>
<table border="1" width="200px">
<tr>
<td>item1</td>
</tr>
<tr>
<td>item2</td>
</tr>
<tr>
<td>item3</td>
</tr>
<tr>
<td>item4</td>
</tr>
<tr>
<td>item5</td>
</tr>
</table>
</body>
</html>
<!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>select</title>
<script language="javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").on("click",function(){
//追加到后面
$("#select1 option:checked").appendTo($("#select2"));
})
$("#btn2").on("click",function(){
//把所有的东西转移到
$("#select1 option").appendTo($("#select2"));
})
$("#btn3").on("click",function(){
//把所有的东西转移到
$("#select2 option:checked").appendTo($("#select1"));
})
$("#btn4").on("click",function(){
//把所有的东西转移到
$("#select2 option").appendTo($("#select1"));
})
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<select id="select1" style="width:100px" size="10" multiple="multiple">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
<option value="选项9">选项9</option>
</select>
</td>
<td align="center">
<input type="button" id="btn1" value="-->"/><br/>
<input type="button" id="btn2" value="==>"/><br/>
<input type="button" id="btn3" value="<--"/><br/>
<input type="button" id="btn4" value="<=="/>
</td>
<td>
<select id="select2" style="width:100px" size="10" multiple="multiple"></select>
</td>
</tr>
</table>
</body>
</html>
<!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>checkbox</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
$("#checkAll").on("click",function(){
$("input[name='hobbies']").prop("checked",true);
});
$("#checkNotAll").on("click",function(){
$("input[name='hobbies']:checked").prop("checked",false);
});
$("#checkUnAll").on("click",function(){
$.each($("input[name='hobbies']"), function(i,e) {
e.checked=!e.checked;
});
});
});
function checkChange(src){
if(src.checked){
$("input[name='hobbies']").prop("checked",true);
}else{
$("input[name='hobbies']:checked").prop("checked",false);
}
}
</script>
</head>
<body>
请选择你的爱好:<br/>
<div>
<input type="checkbox" name="hobbies"/>打篮球
<input type="checkbox" name="hobbies"/>踢足球
<input type="checkbox" name="hobbies"/>上网
</div>
<div>
<input type="checkbox" onchange="checkChange(this)"/>全选/全不选<br/>
<input type="button" id="checkAll" value="全选"/>
<input type="button" id="checkNotAll" value="全不选"/>
<input type="button" id="checkUnAll" value="反选"/>
</div>
</body>
</html>
<!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">
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
// 使单选下拉框‘2号’选中
$("#btn1").on("click",function(){
$("#select").val("2号");
});
$("#btn2").on("click",function(){
$("#selectMultiple").val(["2号","5号"]);
});
$("#btn3").on("click",function(){
$("input[name=checkbox]").val(["复选2","复选4"]);
});
$("#btn4").on("click",function(){
$("input[name='radio']").get(1).checked = true;
});
$("#btn5").on("click",function(){
$.each(($("body *:checked")),function(i,e){
$("e").val();
})
});
});
</script>
<title>练习5</title>
</head>
<body>
<input id="btn1" type="button" value="使单选下拉框‘2号’选中"/><br/>
<input id="btn2" type="button" value="使多选下拉框‘2号’和‘5号’选中"/><br/>
<input id="btn3" type="button" value="使复选框‘2号’和‘4号’选中"/><br/>
<input id="btn4" type="button" value="使单选框‘单选2’选中"/><br/>
<input id="btn5" type="button" value="打印已被选中的值"/><br/>
<form name="userForm">
单选下拉框<select id="select" name="select">
<option value="1号">1号</option>
<option value="2号">2号</option>
<option value="3号">3号</option>
<option value="4号">4号</option>
<option value="5号">5号</option>
<option value="6号">6号</option>
</select>
多选下拉框<select id="selectMultiple" multiple="multiple" size="6" name="selectMultiple">
<option value="1号">01号</option>
<option value="2号">02号</option>
<option value="3号">03号</option>
<option value="4号">04号</option>
<option value="5号">05号</option>
<option value="6号">06号</option>
</select>
<br/>
复选框<input value="复选1" type="checkbox" name="checkbox"/>复选1
<input value="复选2" type="checkbox" name="checkbox"/>复选2
<input value="复选3" type="checkbox" name="checkbox"/>复选3
<input value="复选4" type="checkbox" name="checkbox"/>复选4
<input value="复选5" type="checkbox" name="checkbox"/>复选5
<br/>
单选框<input value="单选1" type="radio" name="radio"/>单选1
<input value="单选2" type="radio" name="radio"/>单选2
<input value="单选3" type="radio" name="radio"/>单选3
<input value="单选4" type="radio" name="radio"/>单选4
</form>
</body>
</html>
<!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>用户新增</title>
<script language="javascript" src="../js/jquery-3.2.1.js"></script>
<script language="javascript">
$(function(){
//提交
$("#btn_submit").click(function(){
//先获取数据
var username=$("input[name='username']").val();
var email=$("input[name='email']").val();
var tel=$("input[name='tel']").val();
var delbtn='<input type="button" value="删除" onclick="del(this)"/>';
var tr="<tr><td>"+username+"</td><td>"+email+"</td><td>"+tel+"</td><td>"+delbtn+"</td></tr>";
$("#userTbody").append(tr);
});
//删除所有
$("#btn_removeAll").click(function(){
$("#userTbody").empty();
});
});
function del(args){
//找到父元素
var tr= $(args).parent().parent();
tr.remove();
}
</script>
</head>
<body>
<a href="http://www.itsource.cn">首页</a>
<form name="userForm">
<center>
用户录入<br/>
用户名:<input id="username" name="username" type="text"/>
E-mail:<input id="email" name="email" type="text"/>
电话:<input id="tel" name="tel" type="text"/>
<input type="button" value="提交" id="btn_submit"/>
<input type="button" value="删除所有" id="btn_removeAll"/>
</center>
</form>
<hr/>
<table border="1" align="center">
<thead>
<tr>
<th>用户名</th>
<th>E-mail</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="userTbody">
</tbody>
</table>
</body>
</html>
$("#id").on("click",funcation(){})
二级联动台
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script language="javascript" src="js/jquery-1.11.2.js"></script>
<script>
// 1.在加载页面的时候就先获取 省的数据
// 提交ajax 请求
//加载的时候获得数据
$(function(){
//Ajax的get请求$.get(url,data,funcation,"json")
$.get("cityServlet",function(data){
$.each(data,function(i,e){
var htmlstr = `<option id=${e.id}>${e.name}</option>`;
$("#prov").append(htmlstr);
});
},"json");
//当点击省份的时候获得绑定id获得数据
$("#prov").on("change",function(){
var data = $("#prov option:checked");
var id = data.prop("id");
if(id){
//Ajax的post请求$.get(url,data,funcation,"json")
$.post("cityServlet",{"pro":id},function(data){
//每次加载的时候都要清空数据
$("#city").html("");
$.each(data,function(i,e){
//获得每次的数据
var htmlstr = `<option id=${e.id}>${e.name}</option>`;
//追加到后面
$("#city").append(htmlstr);
});
},"json");
}
});
});
</script>
</head>
<body>
<h1>二级联动</h1>
<select id="prov">
<option>--- 请选择 ---</option>
</select> 省
<select id="city">
<option>--- 请选择 ---</option>
</select> 市
</body>
</html>