过滤器，绑定事件，动画
生活随笔
收集整理的這篇文章主要介紹了
过滤器，绑定事件，动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、基本過濾器
| 語法 | 描述 | 返回值 |
| :first | 選取第一個元素 | 單個元素 |
| :last | 選取最后一個元素 | 單個元素 |
| :not(selector) | 選取去除所有與給定選擇器匹配的元素 | 集合元素 |
| :even | 選取索引是偶數的所有元素(index 從0開始) | 集合元素 |
| :odd | 選取索引是奇數的所有元素(index 從0開始) | 單個元素 |
| :eq(index) | 選取索引等于index的元素 | 集合元素 |
| :gt | 選取索引大于index的元素 | 集合元素 |
| :lt | 選取索引小于index的元素 | 集合元素 |
| :header | 選取所有標題元素，如h1~h6 | 集合元素 |
| :focus | 選取當前獲取焦點的元素 | 集合元素? |
?
?
?
?
?
?
?
?
?
?
?
?
?
?
二、可見性過濾選擇器
| 選擇器 | 描述 | 返回值 |
| :visible | 選取所有可見的元素 | 集合元素 |
| :hidden | 選取所有隱藏的元素 | 集合元素 |
?
?
?
?
?
三、綁定事件與移除事件
為匹配的元素一次性綁定或移除一個或多個事件時，可以使用綁定事件方法bind()和移除事件方法unbind()
eg:實現光棒效果?
//綁定事件 bind unbind$(function () {$("li").bind("mouseover", function () {$(this).css("background","pink");}).bind("mouseout", function () {$(this).css("background", "");});//移除事件$("li").unbind("mouseover mouseout");})補充：也可使用on off、live ? die、delegate ?undelegate方案實現綁定 ?移除事件
四、jQuery中的動畫
1、簡單動畫
① 控制元素顯示與隱藏
show()、hide()
②改變元素透明度
fadeIn()、fadeOut()
③改變元素高度
slideUp()和slideDown()
eg:實現淡入淡出效果
<title></title><script src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(function () {$("#btnIn").click(function () {$("img").slideDown("slow");});$("#btnOut").click(function () {$("img").slideUp("slow");});})</script> </head> <body><img src="img/images/iocns.gif" /><input type="button" value="淡入" id="btnIn"/><input type="button" value="淡出" id="btnOut"/> </body>2、復雜動畫<animate>
<title></title><style type="text/css">div {height:20px;border:1px solid red;}</style><script src="js/jquery-1.11.1.js"></script><script src="js/jquery-migrate-1.2.0.js"></script><script type="text/javascript">$(function () {$("[type=button]").click(function () {$("div").animate({width: "70%",height: "300%",borderWidth: 10}).animate({fontSize:"50px"}, {queue:false,duration:5000})})})</script> </head> <body><div>我是div</div><input type="button" value="樣式"/> </body>?
標簽:?過濾器、綁定事件、動畫轉載于:https://www.cnblogs.com/WuXuanKun/p/5605451.html
總結
以上是生活随笔為你收集整理的过滤器，绑定事件，动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2016.04.29-2016.05.0
- 下一篇： AsyncHttpClien访问网络案例