、范圍滑塊選擇 ion.rangeSlider
ion.rangeSlider是一種簡單、靈活、范圍內選擇方便的滑塊選擇器。
它支持事件和公共方法,具有靈活的設置,可以用CSS來完全改變
跨瀏覽器支持(Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+)
支持主流的設備(iPhone, iPad, Nexus等)
主頁:https://github.com/IonDen/ion.rangeSlider
2、范圍選擇滑塊 Powerange
Powerange是一個范圍滑塊控件,首先它很容易定制,它完全都是由CSS和JavaScript組成。其次它包含許多功能,包括改變顏色和整體風格,水平和垂直的風格,自定義之間切換,最大值和初始值,自定義步驟的時間間隔,顯示十進制值,顯示而不是最小/最大號的圖標。
跨瀏覽器支持:谷歌瀏覽器14+,Mozilla Firefox瀏覽器6.0以上版本,歌劇11.6+,Safari 5以上版本,IE 9+
主頁:http://abpetkov.github.io/powerange/
3、按鈕切換開關 Switchery
Switchery是一個簡單的組件,它可以幫助你把你的默認的HTML復選框,只需要幾個簡單的步驟就設置為iOS 風格切換方式。您可以輕松地使用CSS自定義開關,使他們完美匹配您的設計。
支持所有主流瀏覽器(Chrome, Firefox, Opera, Safari, IE8+)
主頁:http://abpetkov.github.io/switchery/
4、彈窗插件 Sweet Alert
Sweet Alert 是一個替代傳統的 JavaScript Alert 的漂亮提示效果。SweetAlert 自動居中對齊在頁面中央,不管您使用的是臺式電腦,手機或平板電腦看起來效果都很棒。另外提供了豐富的自定義配置選擇,可以靈活控制。
主頁:http://t4t5.github.io/sweetalert/
5、通知插件 Toastr
toastr 是一個實現了類似 Android 的 Toast 提示的 jQuery 插件。
主頁:https://github.com/CodeSeven/toastr
6、頁面加載動畫SpinKit
spinkit使用CSS3的特性實現多種動畫效果,元素移動、放大縮小、翻轉、進度條加載效果等等,使用了很多CSS3新的特性。
主頁:https://github.com/tobiasahlin/SpinKit
演示網址:http://tobiasahlin.com/spinkit/
7、交互式圖表HighCharts
Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在您的web網站或是web應用程序添加有交互性的圖表。目前HighCharts支持的圖表類型有:直線圖、曲線圖、區域圖、區域曲線圖、柱狀圖、餅狀圖和散狀點圖等。它的顯示速度很快,看起來很雅致,并且界面漂亮。它含有大量的配置選項和可擴展性。一個組件系統可讓您未使用的功能壓縮到一個10kB的文件大小。它還具有良好的兼容性和可訪問性,當用戶在Javascrip 失效的情況下,或是使用早期版本的瀏覽器,瀏覽器仍然會重定向到圖片本身或事先指定的HTML頁。
主頁:http://www.highcharts.com/
8、焦點圖SuperSlide
SuperSlide 致力于解決網站大部分特效展示問題,使網站代碼規范整潔,方便維護更新。
網站上常用的“焦點圖/幻燈片”“Tab標簽切換”“圖片滾動”“無縫滾動”等只需要一個SuperSlide即可解決!
從此無需網上苦苦尋覓特效,無需加載n個插件,無需害怕代碼沖突,你需要的只是一個SuperSlide!
還可以多個SuperSlide組合創造更多效果哦~(兼容包括ie6的絕大部分瀏覽器)
下面這個圖上使用了5種以上相應的效果,只引用了一次插件
主頁:http://www.superslide2.com/
PS:官網介紹包括的擴展效果,是用SuperSlide制作的,有些特殊的效果會加少量js,如果你熟練掌握SuperSlide,你也可以制作一模一樣的效果,甚至更好。對于剛剛接觸的朋友,如果真的不想自己研究,請留下郵箱,我抽時間會一一發送。
9、jquery.cookie
一個簡單的,輕量級的jQuery插件用于讀取,寫入和刪除的cookie。
主頁:https://github.com/carhartl/jquery-cookie
10、Custombox
Custombox是基于 CSS3 過渡功能實現的 jQuery 模式窗口插件。有許多效果,如淡入,滑動,模糊,翻轉,旋轉等等。截圖不能突出效果,強烈推薦看看演示。
主頁:https://github.com/dixso/custombox
演示地址:http://dixso.github.io/custombox/
這次就介紹這10款吧,其實我認為,所有插件、控件都是讓我們在開發過程中盡可能縮短時間的工具,“工欲善其事,必先利其器”,可能真正的“牛人”都是自己需要什么寫什么,但是大多數開發者可能還達不到那種境界,亦或者不愿意浪費那個時間和精力,所以,收集自己會使用或者常用的工具,何樂而不為呢。謝謝支持,下次繼續。
同于服務器端腳本語言,例如php與ASP,Javascript是客戶端腳本語言,也就是說JavaScript是在用戶的瀏覽器上運行,不需要服務器的支持而可以獨立運行。所以在早期程序員比較青睞于JavaScript以減少對服務器的負擔,而與此同時也帶來另一個問題:安全性。而隨著服務器的強壯,雖然程序員更喜歡運行于服務端的腳本以保證安全,但JavaScript仍然以其跨平臺、容易上手等優勢大行其道。
Web前端教程
需求分析
商品分類界面中,當我們點擊全選框的時候,我們希望選中所有的商品,當我們取消掉的時候,我們希望不選中所有的商品
技術分析
checked="checked"選擇復選框
事件:onclick點擊事件
getElementsByTagName:返回包含帶有指定標簽名稱的所有元素的節點列表(集合/節點數組)。
getElementsByName:返回包含帶有指定類名的所有元素的節點列表。
步驟分析
全選和全部選步驟分析:
1.確定事件:onclick單機事件
2.事件觸發函數:checkAll()
3.函數要去做一些事情:
獲得當前第一個checkbox的狀態
獲得所有分類項的checkbox
修改每一個checkbox的狀態
代碼實現
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<!--
1.確定事件:文檔加載完成onload
2.事件要觸發函數:init()
3.函數:操作頁面的元素
要操作表格中每一行
動態的修改行的背景顏色
-->
<script>
functioninit(){
//得到表格
vartab=document.getElementById("tab");
//得到表格中每一行
varrows=tab.rows;
//便利所有的行,然后根據奇數偶數
for(vari=1;i<rows.length;i++){
varrow=rows[i];//得到其中的某一行
if(i%2==0){
row.bgColor="yellow";
}else{
row.bgColor="red"
}
}
}
/*
全選和全部選步驟分析:
1.確定事件:onclick單機事件
2.事件觸發函數:checkAll()
3.函數要去做一些事情:
獲得當前第一個checkbox的狀態
獲得所有分類項的checkbox
修改每一個checkbox的狀態
*/
functioncheckAll(){
// 獲得當前第一個checkbox的狀態
varcheck1=document.getElementById("check1");
//得到當前checked狀態
varchecked=check1.checked;
// 獲得所有分類項的checkbox
// varchecks=document.getElementsByTagName("input");
varchecks=document.getElementsByName("checkone");
// alert(checks.length);
for(vari=0;i<checks.length;i++){
// 修改每一個checkbox的狀態
varcheckone=checks[i];
checkone.checked=checked;
}
}
</script>
</head>
<bodyonload="init()">
<tableborder="1px"width="600px"id="tab">
<tr>
<td>
<inputtype="checkbox"onclick="checkAll()"id="check1"/>
</td>
<td>分類ID</td>
<td>分類名稱</td>
<td>分類商品</td>
<td>分類描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>1</td>
<td>手機數碼</td>
<td>華為,小米,尼康</td>
<td>黑馬數碼產品質量最好</td>
<td>
<ahref="#">修改</a>|<ahref="#">刪除</a>
</td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>2</td>
<td>成人用品</td>
<td>充氣的</td>
<td>這里面的充氣電動硅膠的</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>3</td>
<td>電腦辦公</td>
<td>聯想,小米</td>
<td>筆記本特賣</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>4</td>
<td>饞嘴零食</td>
<td>辣椒,麻花,黃瓜</td>
<td>年貨</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>5</td>
<td>床上用品</td>
<td>床單,被套,四件套</td>
<td>都是套子</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
</table>
</body>
</html>
JavaScript是一種腳本語言,其源代碼在發往客戶端運行之前不需經過編譯,而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。解釋語言的弱點是安全性較差,而且在JavaScript中,如果一條運行不了,那么下面的語言也無法運行。而且由于每次重新加載都會重新解譯,加載后,有些代碼會延遲至運行時才解譯,甚至會多次解譯,所以速度較慢。
以上是酷仔今日整理的“前端教程:使用JavaScript完成復選框的全選和全不選”一文,希望為正在學習Web前端的同學提供參考。
果您覺得該文章對您有幫助,讓更多人受用,請關注“鍵盤碼農”,轉發該文章。謝謝您的支持!
今天跟大家寫了一份js的聯動全選的源碼,代碼少,清晰易懂。
效果是這樣的:
點擊全選下面的就會被全部全選,或者下面的被一一選擇,全選按鈕也會被選中。運用復選框來實現的聯動全選的功能。
點擊上面的復選框就會被全選
Javascript:聯動全選
當下放的復選框沒有被全選,最上面的全選按鈕未被選中
復選框聯動全選js代碼實現:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function ()
{
var oBtn1=document.getElementById('btn1');
var oBox=document.getElementById('box');
var oInputs=oBox.getElementsByTagName('input');
oBtn1.onclick=function ()
{
if (oBtn1.checked==true) {
for (var i=0; i < oInputs.length; i++) {
oInputs[i].checked=true;
}
} else {
for (var i=0; i < oInputs.length; i++) {
oInputs[i].checked=false;
}
}
}
//點擊每一個input框
for (var i=0; i < oInputs.length; i++) {
oInputs[i].onclick=function ()
{
var n=0;
for (var i=0; i < oInputs.length; i++) {
if (oInputs[i].checked==true) {
n++;
}
}
if (n==oInputs.length) {
oBtn1.checked=true;
} else {
oBtn1.checked=false;
}
}
}
}
</script>
</head>
<body>
<h1>全選/全不選</h1>
<input type="checkbox" id="btn1">
<div id="box">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
</div>
</body>
</html>
相對比較簡單,對于初學者應該有很好的幫助!請關注鍵盤碼農。后期繼續更新,如有什么看法請在下方評論。第一時間為您解答哦!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。