jquery事件（简例）

<!-- 1. 怎样引入jquery 框架-->
<!-- 答：将Jquery引入到script 里面 <script src=js/jquery.min.js></script> -->
<!-- 2.引用就绪文档函数的三种方式 -->
<!--   ​$(document).ready(function(){
               
      }
 ​$().ready(function(){
                  //函数代码
      });
$(function(){

})
操作 1.鼠标移动上去mouseover和鼠标移走时背景颜色分别blue red

* 过滤选择器
* 用法 - 在选择器前增加":"
* 基本过滤选择器
* :first - 匹配第一个
* first()方法
* :last - 匹配最后一个
* last()方法
* toUpperCase 大小
* :even - 匹配索引值为偶数
* :odd - 匹配索引值为奇数
* :eq(index) - 匹配索引值为index的元素
* eq(index)方法
* :gt(index) - 匹配索引值大于index的元素
* :lt(index) - 匹配索引值小于index的元素
* :not(selector) - 与selecor选择器相反的元素
* :header - 匹配h1~h6标题元素
* 在实际开发中很少使用
* :animated - 匹配jQuery的动画效果
* 只能匹配jQuery实现的动画效果
* 子元素过滤选择器 - 在其前面增加空格
* :nth-child(index) - 匹配第index个子元素
* :first-child - 匹配第一个子元素
* :last-child - 匹配最后一个子元素
* :only-child - 匹配唯一一个子元素
* 内容过滤选择器
* :contains(文本) - 匹配包含指定文本内容的元素
* :empty - 匹配没有子元素也没有文本元素的空元素
* :parent - 匹配包含子元素或文本元素的元素
* :has(selector) - 匹配包含 selector的元素 的父元素
* 可见性过滤选择器
* :visible - 匹配可见的所有元素
* :hidden - 匹配不可见的所有元素
* 属性过滤选择器
* [attrName] - 匹配包含属性attrName的元素
* [attrName=value] - 匹配包含属性attrName等于value的元素
* [attrName!=value] - 匹配包含属性attrName不等于value的元素(包含没有attrName属性的元素)
* [attrName^=value] - 匹配包含属性attrName以value开始的元素
* [attrName$=value]
* [attrName*=value]
* [attrName1][attrName2] - 交集
* 表单对象属性过滤选择器
* :enabled - 可用输入框
* :disabled - 不可用输入框
* :checked - 被选中
* :selected - 被选中
-->

 

 

 

简例：

<h3>基本选择器.</h3>
<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="button1"/>
<input type="button" value="选择 class 为 mini 的所有元素." id="button2"/>
<input type="button" value="选择 元素名是 div 的所有元素." id="button3"/>
<input type="button" value="选择 所有的元素." id="button4"/>
<input type="button" value="选择 所有的span元素和id为two的元素." id="button5"/>
<input type="button" value="选择 class 为one的第一个元素，将它的背景颜色设为红色字体加粗." id="button6"/>
<input type="button" value="选择最最后一个元素" id="button7"/>
<input type="button" value="选择正在动的元素" id="button8"/>
<input type="button" value="选择第一个div元素." id="btn1"/>
<input type="button" value="选择最后一个div元素." id="btn2"/>
<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
<input type="button" value="选择索引值等于3的元素." id="btn6"/>
<input type="button" value="选择索引值大于3的元素." id="btn7"/>
<input type="button" value="选择索引值小于3的元素." id="btn8"/>
<input type="button" value="选择所有的标题元素." id="btn9"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>

<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>

<span id="mover">正在执行动画的span元素.</span>
<p>别点击我,不然我就消失给你看</p>
<p>说了别点击我,不然我就消失给你看</p>
<p>能不能别点击我,我真的就消失给你看</p>

样式:

div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}

div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}

div.hide {
display: none;
}

js代码：

$(function(){
//选择 id为 one 的元素.
$("#button1").click(function(){
$("#one").css("background","#E3AAE5");
})
//选择 class 为 mini 的所有元素
$("#button2").click(function(){
$(".mini").css("background","#81BFEF");
})
//选择 元素名是 div 的所有元素.
$("#button3").click(function(){
$("div").css("background","#91F0C9");
})
//选择 所有的元素
$("#button4").click(function(){
$("*").css("background","#DAC5F3");
})
//选择 所有的span元素和id为two的元素.
$("#button5").click(function(){
$("span").css("background","#FB98C6");
$("#two").css("background","#FB98C6");
})
//选择 class 为one的第一个元素，将它的背景颜色设为红色字体加粗
$("#button6").click(function(){
$(".one:first").css({"background":"#FA9595","font-weight":"bold"});
})
//选择最最后一个元素
$("#button7").click(function(){
$("*:last").css("background","#E6C8A2");
})
//<p>别点击我,不然我就消失给你看</p>
//<p>说了别点击我,不然我就消失给你看</p>
// <p>能不能别点击我,我真的就消失给你看</p>
$("p").click(function(){
$(this).hide();
})
//选择正在动的元素
$("#button8").click(function(){
$("#mover").toggle(3000,function(){
$(this).animate({left:"500px"},3000);
});
})
//选择第一个div元素.
$("#btn1").click(function(){
$("div:first").css("background","#F6CBDC");
})
//选择最后一个div元素
$("#btn2").click(function(){
$("div:last").css("background","#E6E8A9");
})
//选择class不为one的 所有div元素
$("#btn3").click(function(){
$('div:not(.one)').css("background","#ADD2E4");
})
//选择索引值为偶数 的div元素
$('#btn4').click(function(){
$("div:even").css("background","#bfa");
})
//选择索引值为奇数 的div元素
$("#btn5").click(function(){
$("div:odd").css("background","#EFDADA");
})
//选择索引值等于3的元素
$('#btn6').click(function(){
$("div:eq(3)").css("background","##4FD849");
})
//选择索引值大于3的元素
$("#btn7").click(function(){
$("div:gt(3)").css("background","#D78DDE");
})
//选择索引值小于3的元素
$("#btn8").click(function(){
$("div:lt(3)").css("background","#F6EC89");
})
//选择所有的标题元素
$('#btn9').click(function(){
$(":header").css("background","#F60EBB");
})
//选择当前正在执行动画的所有元素
$('#btn10').click(function(){
$(":animated").css("background","#E42626");
});
})