Jquery基础（二）
##一、Window.onload和$(function)的区别：
##1，首先我们来看下Window.onload的用法：
window.onload=function () {
$("#btn").click(function () {
alert("爱你！");
});
}
function f() {
alert("lala");
}
function f1() {
alert("sisi");
}
window.onload=f;
window.onload=f1;
window.onload为id为btn绑定事件之后，只能定义一次，如果定义多次，只会执行最后一次
##2，$(function)绑定事件：
$(function () {
$("#btn").click(function () {
alert("吃饭了？");
});
});
$(function () {
$("#d1").css("background-color","red");
$("#d2").css("background-color","pink");
});
##结论：通过上面两个例子，可以看到$(function)不管定义了几次，都会执行
##二、基本选择器：
要求：请根据下面input表单中的要求进行操作：
<body>
<input type="button" value="save" class="mini" name="ok" />
<input type="button" value="change id值为one的 元素背景为red" id="b1" />
<input type="button" value="change元素为div所有元素 背景red" id="b2"/>
<input type="button" value="change class 值为mini 背景为red" id="b3"/>
<input type="button" value="change 所有span元素和 id为two元素为红色" id="b4"/>
<h1>坚持是一种品质 自信源于努力</h1>
<h2>坚持的可贵之处可以培养我们更多的优秀的品质</h2>
<div id="one">
id为one的div
</div>
<div id="two" class="mini">
id为two 是mini
</div >
<div class="one">
class是one
<div class="mini">class是mini</div>
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是one
<div class="mini01">class是mini01</div>
<div class="mini">class是 mini</div>
</div>
<span class="spanone">class为spanone的span元素</span>
<span class="mini">class为mini的span元素</span>
</body>
##1.1 标签选择器
语法：$("标签名")
##1.2 id选择器
语法：$("#id值")
##1.3 类选择器
$(".class的属性值")
##1.4 并集选择器
$("选择器1,选择器2,.....")
style属性：
<style>
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #999ccc;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: roman;
}
div .mini{
width: 50px;
height: 50px;
background: #cc66ff;
border:#000 1px solid;
font-size: 12px;
font-family: roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #cc66ff;
border:#000 1px solid;
font-size: 12px;
font-family: roman;
}
</style>
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("#one").css("background-color","red");
});
$("#b2").click(function () {
$("div").css("background-color","pink");
});
$("#b3").click(function () {
$(".mini").css("background-color","blue");
});
$("#b4").click(function () {
$("span,#two").css("background-color","yellow");
});
});
</script>
##三、过滤选择器：
## 1， 首元素选择器
：first 获得选择元素的第一个元素
## 2， 尾元素选择器
:last
## 3， 非元素选择器
not(selectot) 不包含指定元素的选择器
## 4， 偶数选择器
even 从0 开始计算
## 5， 奇数选择器
odd从0 开始计算
## 6， 等于索引选择器
eq（index）
## 7， 大于索引选择器
gt(index)
## 8， 小于索引选择器
lt（index）
## 9， 标题选择器
header 获得标题(h1-h6) 固定写法
<script type="text/javascript">
// 程序入口
$(function () {
//第一个元素
$("#b1").click(function () {
$("div:first").css("background-color","red");
});
//最后一个
$("#b2").click(function () {
$("div:last").css("background-color","pink");
});
//id不为one
$("#b3").click(function () {
$("div:not(.one)").css("background-color","blue");
});
//偶数even
$("#b4").click(function () {
$("div:even").css("background-color","black");
});
//奇数odd
$("#b5").click(function () {
$("div:odd").css("background-color","yellow");
});
//大于gt（）
$("#b6").click(function () {
$("div:gt(3)").css("background-color","#5b5b5b");
});
//等于eq（）
$("#b7").click(function () {
$("div:eq(3)").css("background-color","#ff22c8");
});
//小于lt（）
$("#b8").click(function () {
$("div:lt(3)").css("background-color","#2fff3a");
})
//所有标签
$("#b9").click(function () {
$(":header").css("background-color","red");
});
});
</script>
##四、表单过滤选择器
## 1， 可用元素选择器
：enabled
## 2， 不可用元素选择器
:disabled
## 3， 选中的选择器
：checked
## 4， 获得下拉框的选择器
：selected
<script>
$(function(){
$("#b1").click(function(){
$("input[type='text']:enabled").val("宝宝");
});
$("#b2").click(function(){
$("input[type='text']:disabled").val("宝宝");
});
$("#b3").click(function(){
alert($("input[type='checkbox']:checked").length);
});
$("#b4").click(function(){
alert($("#edu > option:selected").length);
});
});
</script>