jQuery学习笔记

**

选择器

**

<script src="jquery.min.js"></script>
<script>
$(function(){
$("#b").click(function(){
$("div").addClass("pink");
});
});
</script>
<style>
.pink{
background-color:pink;
}
</style>
<button id="b">添加背景色</button>
<div>
Hello JQuery<br/>
Hello JQuery<br/>
Hello JQuery
</div>

属性

$(selector[attribute]) 满足选择器条件的有某属性的元素
$(selector[attribute=value]) 满足选择器条件的属性等于value的元素
$(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素
$(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
$(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素
$(selector[attribute*=value]) 满足选择器条件的属性包含value的元素

<script src="jquery.min.js"></script>
<script>
$(function(){
$("#d1").click(function(){
$("div[id]").toggleClass("border");
});
$("#d2").click(function(){
$("div[id=pink]").toggleClass("border");
});
$("#d3").click(function(){
$("div[id!=pink]").toggleClass("border");//包含无id
});
$("#d4").click(function(){
$("div[id^=p]").toggleClass("border");
});
$("#d5").click(function(){
$("div[id$=k]").toggleClass("border");
});
$("#d6").click(function(){
$("div[id*=ee]").toggleClass("border");
});
});
</script>
<style>
.border{
border:1px solid blue;
}
</style>
<button id="d1">给有id属性的div切换边框</button>
<button id="d2">给id=pink的div切换边框</button>
<button id="d3">给有id!=pink的属性的div切换边框</button>
<button id="d4">给有id以p开头的div切换边框</button>
<button id="d5">给有id以k结尾的div切换边框</button>
<button id="d6">给有id包含ee的div切换边框</button>

<div id="pink">id=pink的div</div>
<div id="green">id=green的div</div>
<div>没有id的div</div>

用jQuery写表格斑马线

<script src="jquery.min.js"></script>
<script>
$(function(){
$("td").addClass("bline");
$("table").addClass("collapse");
$("tr:odd").addClass("back");
});

</script>
<style>
.bline{
border-bottom:1px solid lightsmoke;
}
.collapse{
border-collapse:collapse;
}
.back{
background-color:gray;
}
</style>
<table width="80%" >
<tr align="center">
<td width="20%">id</td>
<td width="20%">名称</td>
<td width="20%">血量</td>
<td width="20%">伤害</td>
</tr>
<tr align="center">
<td>1</td>
<td>gareen</td>
<td>340</td>
<td>58</td>
</tr>
<tr align="center">
<td>2</td>
<td>teemo</td>
<td>320</td>
<td>76</td>
</tr>
<tr align="center">
<td>3</td>
<td>annie</td>
<td>380</td>
<td>38</td>
</tr>
<tr align="center">
<td>4</td>
<td>deadbrother</td>
<td>400</td>
<td>90</td>
</tr>
</table>