示例 1 : 元素
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("div").addClass("pink");
});
});
</script>
<button id="b1">给所有的div元素增加背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div >
Hello JQuery
</div>
<div >
Hello JQuery
</div>
<div >
Hello JQuery
</div>
示例 2 : id
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d1").addClass("pink");
});
});
</script>
<button id="b1">给id=d1的div增加背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d1">
Hello JQuery
</div>
<div id="d2" >
Hello JQuery
</div>
<div id="d3">
Hello JQuery
</div>
示例 3 : 类
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$(".d").addClass("pink");
});
});
</script>
<button id="b1">给class='d'的div增加背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div class="d">
Hello JQuery
</div>
<div class="d" >
Hello JQuery
</div>
<div >
Hello JQuery
</div>
示例 4 : 层级
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("div#d3 span").addClass("pink");
});
});
</script>
<button id="b1">给id='d3'的div 下的 span 增加背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div class="d">
<span>Hello JQuery</span>
</div>
<div class="d" >
<span>Hello JQuery</span>
</div>
<div id="d3" >
<span>Hello JQuery</span>
</div>
试一下
示例 5 : 最先最后
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("div:first").addClass("pink");
});
$("#b2").click(function(){
$("div:last").addClass("pink");
});
});
</script>
<button id="b1">第一个增加背景色</button>
<button id="b2">最后一个增加背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div>
<span>Hello JQuery</span>
</div>
<div >
<span>Hello JQuery</span>
</div>
<div >
<span>Hello JQuery</span>
</div>
示例 6 : 奇偶
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("div:odd").toggleClass("pink");
});
$("#b2").click(function(){
$("div:even").toggleClass("green");
});
});
</script>
<button id="b1">切换奇数背景色</button>
<button id="b2">切换偶数背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
.green{
background-color:green;
}
</style>
<div>
<span>Hello JQuery 0</span>
</div>
<div>
<span>Hello JQuery 1</span>
</div>
<div >
<span>Hello JQuery 2</span>
</div>
<div >
<span>Hello JQuery 3</span>
</div>
<div >
<span>Hello JQuery 4</span>
</div>
</div>
<div >
<span>Hello JQuery 5</span>
</div>
<div >
<span>Hello JQuery 6</span>
</div>
示例 7 : 可见性
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("div:visible").hide();
});
$("#b2").click(function(){
$("div:hidden").show();
});
});
</script>
<button id="b1">隐藏可见的</button>
<button id="b2">显示不可见的</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div>
<span>Hello JQuery 1</span>
</div>
<div >
<span>Hello JQuery 2</span>
</div>
<div >
<span>Hello JQuery 3</span>
</div>
<div >
<span >Hello JQuery 4</span>
</div>
</div>
<div >
<span>Hello JQuery 5</span>
</div>
<div >
<span>Hello JQuery 6</span>
</div>
示例 8 : 属性
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("div[id]").toggleClass("border");
});
$("#b2").click(function(){
$("div[id='pink']").toggleClass("border");
});
$("#b3").click(function(){
$("div[id!='pink']").toggleClass("border");
});
$("#b4").click(function(){
$("div[id^='p']").toggleClass("border");
});
$("#b5").click(function(){
$("div[id$='k']").toggleClass("border");
});
$("#b6").click(function(){
$("div[id*='ee']").toggleClass("border");
});
});
</script>
<button id="b1">给有id属性的div切换边框</button>
<button id="b2">给id=pink的div切换边框</button>
<button id="b3">给有id!=pink属性的div切换边框</button>
<button id="b4">给有id以p开头的div切换边框</button>
<button id="b5">给有id以k结尾的div切换边框</button>
<button id="b6">给有id包含ee的div切换边框</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
.green{
background-color:green;
}
.border{
border: 1px blue solid;
}
button{
margin-top:10px;
display:block;
}
div{
margin:10px;
}
</style>
<div id="pink">
id=pink的div
</div>
<div id="green">
id=green的div
</div>
<div >
没有id的div
</div>
示例 9 : 表单对象
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$(".b").click(function(){
var value = $(this).val();
$("td[rowspan!=13] "+value).toggle(500);
});
});
</script>
<style>
table{
border-collapse:collapse;
table-layout:fixed;
width:80%;
}
table td{
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
padding-top: 5px;
}
div button{
display:block;
}
</style>
<table>
<tr>
<td rowspan="13" valign="top" width="150px">
<div >
<button value=":input" class="b">切换所有的:input</button>
<button value=":button" class="b">切换:button</button>
<button value=":radio" class="b">切换:radio</button>
<button value=":checkbox" class="b">切换:checkbox</button>
<button value=":text" class="b">切换:text</button>
<button value=":password" class="b">切换:password</button>
<button value=":file" class="b">切换:file</button>
<button value=":submit" class="b">切换:submit</button>
<button value=":image" class="b">切换:image</button>
<button value=":reset" class="b">切换:reset</button>
</div>
</td>
<td width="120px">说明</td>
<td width="120px">表单对象</td>
<td width="">示例</td>
</tr>
<tr>
<td >input按钮</td>
<td >:button</td>
<td><input type="button" value="input按钮"/></td>
</tr>
<tr>
<td>button按钮</td>
<td >:button</td>
<td><button>Button按钮</button></td>
</tr>
<tr>
<td>单选框</td>
<td >:radio</td>
<td><input type="radio" ></td>
</tr>
<tr>
<td>复选框</td>
<td >:checkbox</td>
<td><input type="checkbox" ></td>
</tr>
<tr>
<td>文本框</td>
<td >:text</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>文本域</td>
<td ></td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>密码框</td>
<td >:password</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>下拉框</td>
<td ></td>
<td><select><option>Option</option></select></td>
</tr>
<tr>
<td>文件上传</td>
<td >:file</td>
<td> <input type="file" /></td>
</tr>
<tr>
<td>提交按钮</td>
<td >:submit</td>
<td><input type="submit" /></td>
</tr>
<tr>
<td>图片型提交按钮</td>
<td >:image</td>
<td><input type="image" src="http://how2j.cn/example.gif" /></td>
</tr>
<tr>
<td>重置按钮</td>
<td >:reset</td>
<td><input type="reset" /></td>
</tr>
</table>
示例 10 : 表单对象属性
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$(".b").click(function(){
var value = $(this).val();
$("td[rowspan!=13] "+value).toggle(500);
});
$(".b2").click(function(){
var value = $(this).val();
var options = $("td[rowspan!=13] "+value);
alert("选中了"+options.length+"条记录!");
});
});
</script>
<style>
table{
border-collapse:collapse;
table-layout:fixed;
width:80%;
}
table td{
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
padding-top: 5px;
}
div button{
display:block;
}
.border{
border: 1px blue solid;
}
</style>
<table>
<tr>
<td rowspan="13" valign="top" width="120">
<div >
<button value=":enabled" class="b">切换:enabled</button>
<button value=":disabled" class="b">切换:disabled</button>
<button value=":checked" class="b">切换:checked</button>
<button value=":selected" class="b2">:selected数量</button>
</div>
</td>
<td width="120">说明</td>
<td width="120">表单对象属性</td>
<td width="100px">示例</td>
</tr>
<tr>
<td >enabled的按钮</td>
<td >:enabled</td>
<td><input type="button" enabled="enabled" value="enabled的按钮"/></td>
</tr>
<tr>
<td >disabled的按钮</td>
<td >:disabled</td>
<td><input type="button" disabled="disabled" value="disabled的按钮"/></td>
</tr>
<td >选中的复选框</td>
<td >:checked</td>
<td>
<input type="radio" checked="checked" ><br>
<input type="radio" ><br>
<input type="checkbox" ><br>
<input type="checkbox" checked="checked" >
</td>
<tr>
<td>选中的下拉列表</td>
<td >:selected</td>
<td>
<select size="3" multiple="multiple">
<option selected="selected">苍老师</option>
<option >高树玛利亚</option>
<option selected="selected">遥美</option>
</select>
</td>
</table>
<form>
</form>
试一下
示例 11 : 当前元素
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$(this).hide();
});
});
</script>
<button id="b1">点击隐藏</button>