最先最后
代码
<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>
奇偶
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("div:odd").toggleClass("pink"); //toggleClass() 对设置或移除被选元素的一个或多个类进行切换
//$(selector:odd) 满足选择器条件的奇数元素
});
$("#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>
可见性
$(selector:hidden) 满足选择器条件的不可见的元素
$(selector:visible) 满足选择器条件的可见的元素 ;
注意:div:visible 和div :visible(有空格)是不同的意思
(1)div:visible 表示选中可见的div
(2)div :visible(有空格) 表示选中div下可见的元素
<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>
表单对象
<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); //toggle(500) 表示在显示与隐藏之间来回切换,生效时间是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>
当前元素
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$(this).hide();
});
});
</script>
<button id="b1">点击隐藏</button>
斑马线
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("tr:odd").css("background-color","#f8f8f8");
});
</script>
<style>
table{
border-collapse:collapse;
width:90%;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
<table id="t">
<tr >
<td>id</td>
<td>名称</td>
<td>血量</td>
<td>伤害</td>
</tr>
<tr >
<td>1</td>
<td>gareen</td>
<td>340</td>
<td>58</td>
</tr>
<tr >
<td>2</td>
<td>teemo</td>
<td>320</td>
<td>76</td>
</tr>
<tr >
<td>3</td>
<td>annie</td>
<td>380</td>
<td>38</td>
</tr>
<tr >
<td>4</td>
<td>deadbrother</td>
<td>400</td>
<td>90</td>
</tr>
</table>
喜欢的朋友可以关注我的个人公众号,后台回复java资料可免费领取资源。