<script> $('#datatable').DataTable({ language: { "sProcessing": "處理中...", "sLengthMenu": "顯示 _MENU_ 項結果", "sZeroRecords": "沒有匹配結果", "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項", "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項", "sInfoFiltered": "(由 _MAX_ 項結果過濾)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中數據為空", "sLoadingRecords": "載入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首頁", "sPrevious": "上頁", "sNext": "下頁", "sLast": "末頁" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } } }); }); </script>
<script>
$('#datatable').DataTable({
"columnDefs": [
{
render: function (data, type, full, meta) {
return "<div style='white-space:nowrap;float:right'>" + data + "</div>";
},
targets: [2,3,4,5,6]
},
],
});
</script>
三、修改表格數據后，靜態刷新表格數據不跳轉
dataTable.ajax.reload(null, false);
// 重載所有接口數據，返回到第一頁 dataTable.ajax.reload();
ajax.reload( callback, resetPaging )
里面有二個參數：
callback ：當服務器返回數據并重繪完畢時執行此回調方法，回調方法返回的是服務器返回的數據
resetPaging： 重置（默認或者設置為true）或者保持分頁信息（設置為false）
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用漂亮的前端表格直觀顯示數據
表格顯示
設置一個table
-
<table id="table_id" class="display">
-
<thead>
-
<tr>
-
<th>Column 1</th>
-
<th>Column 2</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<td>Row 1 Data 1</td>
-
<td>Row 1 Data 2</td>
-
</tr>
-
<tr>
-
<td>Row 2 Data 1</td>
-
<td>Row 2 Data 2</td>
-
</tr>
-
</tbody>
-
</table>
這個是JqueryTable必要的靜態資源
-
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
-
-
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
如果你使用了js， 那么還需要引入jquery.js
-
$(document).ready( function () {
-
$('#table_id').DataTable();
-
} );
-
<table id="tbl_grantedCoach" class="table table-striped table-bordered nowrap" style="table-layout:fixed; text-align: center;">
-
<thead>
-
<tr>
-
<th width="10%">用戶名</th>
-
<th width="10%">姓名</th>
-
<th width="8%">性別</th>
-
<th width="10%">手機號</th>
-
<th width="5%">工作年限</th>
-
<th width="12%">教員類型</th>
-
<th width="15%">角色</th>
-
<th width="10%">備注</th>
-
<th width="12%">操作</th>
-
</tr>
-
</thead>
-
</table>
ajax 發送請求， 接受表格數據，再填寫進去
-
initGrantedCoachGrid:function(){
-
selectedUserId =[];
-
if(grantedCoachGrid){
-
grantedCoachGrid.ajax.url(
-
"course/getGrantedCoachByFolder?json&folderId="
-
+ selectNodeId + "").load();
-
} else {
-
grantedCoachGrid = $('#tbl_grantedCoach')
-
.DataTable(
-
{
-
"lengthMenu" : [ [ 10, 20, 30 ],
-
[ 10, 20, 30 ] // change per page
-
// values here
-
],
-
"ordering":false,
-
"retrieve":true ,
-
"bDestory" :true,
-
"pageLength": 10,
-
"bAutoWidth" : false,
-
"ajax" : {
-
"url" : "course/getGrantedCoachByFolder?json&folderId="
-
+ selectNodeId + "",
-
"type" : "get",
-
"cache" : false,
-
"contentType" : "application/json; charset=utf-8",
-
"dataSrc" : ""
-
},
-
"rowCallback" : function(row, data) {
-
selectedUserId.push(data.userId);
-
},
-
-
"aoColumnDefs" : [ {
-
sDefaultContent : '',
-
aTargets : [ '_all' ]
-
} ],
-
// 填入列數據
-
"columns" : [
-
-
{
-
"data" : "loginName"
-
},
-
{
-
"data" : "userFullName"
-
},
-
-
{
-
"data" : "gender",
-
"mRender" : function(data,
-
type, full) {
-
if (data == "M") {
-
return "男";
-
} else if (data == "F") {
-
return "女";
-
}
-
}
-
},
-
{
-
"data" : "mobilePhone"
-
},
-
{
-
"data" : "workYear"
-
},
-
{ "data": "coachType" , "mRender":function(data,type,full){
-
if(data=="0")
-
{
-
data="理論培訓";
-
}else if(data=="1"){
-
data="實習培訓";
-
}else{
-
data="理論培訓+實習培訓";
-
}
-
return data;
-
}},
-
-
{
-
"data" :function( row, type, val, meta ){
-
-
return row.userRoles[0].roleName;
-
-
}
-
},
-
{
-
"data" : "remark"
-
},
-
{
-
"data" : null,
-
"mRender" : function(data,
-
type, full) {
-
return "";
-
}
-
}
-
-
],
-
"oLanguage" : {
-
"sProcessing" : "正在加載中......",
-
"sLengthMenu" : "每頁顯示_MENU_條記錄",
-
"sZeroRecords" : "對不起，查詢不到相關數據！",
-
"sEmptyTable" : "無數據存在！",
-
"sInfo" : "當前顯示_START_到_END_條，共_TOTAL_條記錄",
-
"sInfoFiltered" : "數據表中共為 _MAX_ 條記錄",
-
"sSearch" : "",
-
"oPaginate" : {
-
"sFirst" : "首頁",
-
"sPrevious" : "上一頁",
-
"sNext" : "下一頁",
-
"sLast" : "末頁"
-
}
-
}, // 多語言配置
-
"stateSave" : true
-
// save the state of a table
-
});
-
}
-
-
}
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1-原生JS
設置屬性 .setAttribute("屬性","值") 獲取屬性 .getAttribute("屬性")
2-jquery
設置屬性 .attr("屬性","值") 獲取屬性 .attr("屬性")
下面通過一個例子介紹一下，如何獲取和設置元素的屬性；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>獲取元素屬性</title> <style> * { margin:0; padding:0; list-style:none; } </style> </head> <body> <div id="mayouchen"> <div style="background:red;height:20px">元素屬性獲取</div> <div class="test1"> <p id="demo">點擊按鈕來設置按鈕的 type,id,class 屬性。</p> <input value="OK" class="mayouchen"> <button onclick="mayouchen1()">獲取元素屬性</button> </div> <div style="background:green;height:20px">自定義屬性獲取</div> <div class="test2"> <div id="tree" data-leaves="47" data-plant-height="2.4m">我是被獲取的元素</div> <button onclick="mayouchen2()">獲取自定義元素屬性</button> </div> </div> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { }); function mayouchen1() { document.getElementsByTagName("INPUT")[0].setAttribute("type", "button"); document.getElementsByTagName("INPUT")[0].setAttribute("class", "mayouchen"); document.getElementsByTagName("INPUT")[0].setAttribute("id", "test1"); document.getElementsByTagName("INPUT")[0].getAttribute("id"); document.getElementsByTagName("INPUT")[0].getAttribute("class"); console.log("id=====" + document.getElementsByTagName("INPUT")[0].getAttribute("id")); console.log("class=====" + document.getElementsByTagName("INPUT")[0].getAttribute("class")); } function mayouchen2() { var tree = document.getElementById("tree"); //getAttribute()取值屬性 console.log("data-leaves======" + tree.getAttribute("data-leaves")); console.log("data-plant-height===============" + tree.getAttribute("data-plant-height")); //setAttribute()賦值屬性 tree.setAttribute("data-come", "49"); //data-前綴屬性可以在JS中通過dataset取值，更加方便 console.log("通過dataset獲得data-leaves====" + tree.dataset.leaves); console.log("通過dataset獲得data-plant-height====" + tree.dataset.plantHeight); //注意在這里連字符的訪問時，屬性要寫成駝峰形式 } </script> </body> </html>
上面有兩個test, test1是測試元素常見屬性，test2是測試元素自定義屬性
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
網頁使用iframe嵌入網頁時，有時候需要動態處理src的值，而不是寫死的，所以我們需要知道如何給iframe src賦值，通常是使用js或jquery來實現。本文介紹js和jquery給iframe src賦值的3種方法。
這是最常用的js給iframe src賦值的方法，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src賦值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <iframe frameborder="1" id="barframe" ></iframe> </body> </html> <script type="text/javascript"> document.getElementById("barframe").src = "http://localhost/EXAMPLE/iframe/example.html"; </script>
通過js創建一個iframe元素，然后再給該元素src賦值，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src賦值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> </body> </html> <script type="text/javascript"> var myIframe = document.createElement('iframe'); myIframe.src = 'http://localhost/EXAMPLE/iframe/example.html'; document.body.appendChild(myIframe); </script>
最后一句 document.body.appendChild(myIframe); 是表示在 body 里添加剛定義的 myIframe 這個控件。
我們也可以把該iframe添加到某一個div容器里，寫法如下：document.getElementById("div1").appendChild(myIframe); ， div1是該div容器的id 。
上面兩個方法都是用js來實現的，其實我們也可以用jquery來實現，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src賦值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://www.webkaka.com/script/jquery-1.4.2.min.js" type="text/javascript"></script> <script> $(document).ready(function() { $('#barframe').attr('src', 'http://localhost/EXAMPLE/iframe/example.html'); }); </script> </head> <body> <iframe frameborder="1" id="barframe"></iframe> </body> </html>
特別注意，上述jquery代碼不能缺少 $(document).ready(); ，否則iframe src賦值失敗，除非把jquery的代碼放在 <iframe ... 的html代碼后面。此外，還需要在 <head></head> 里引用 jquery.js 文件
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
<script type="text/javascript">
function delElement(obj){
obj.parentNode.removeChild(obj);
}
</script>
<ul>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
</ul>
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>
<!-- 3.0 -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<ul id="listproject" class="list-group">
<script type="text/javascript">
var JSarray = new Array();
JSarray[0] = "array0";
JSarray[1] = "array1";
JSarray[2] = "array2";
JSarray[3] = "array3";
JSarray[4] = "array4";
for(var i = 0;i<5;i++){
$("#listproject").append("<li id=li"+i+">"+JSarray[i]+"</li>"); //在ul標簽上動態添加li標簽
$("#li"+i).attr("class",'list-group-item'); //為li標簽添加class屬性
}
$('li').on('click',function(){ //綁定事件
alert("事件綁定成功！");
});
</script>
</body>
</html>
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1、用JavaScript + html + css 實現，選項卡操作；
2、分析：
A、用 html + css 實現布局(盒子的布置，空間的分配等)；
B、用 JavaScript 中的 DOM 操作，實現點擊不同選項顯示不同標題欄的功能；
1、運行軟件VScode，親測可實現；
2、運行代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; font-family: '微軟雅黑'; font-size: 14px; } #container { width: 398px; margin: 100px auto; } #container a { display: block; width: 98px; height: 42px; line-height: 42px; text-align: center; float: left; border-top: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; color: #333333; text-decoration: none; } #container a:hover { /* 鼠標放在 a 的標簽上，其文字將顯示為：紅色； */ color: #ff4400; } .content { width: 355px; height: 140px; text-align: center; border-right: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; padding: 30px 0 0 40px; display: none; } .clear { clear: left; } #container a.on { /* 對a標簽中的類名為：on 的標簽進行操作； */ background: #ff4400; color: #fff; } </style> </head> <body> <div id="container"> <a href="#" class="on" >充話費</a> <!-- 類為：on 的 a 標簽； --> <a href="#" >充流量</a> <a href="#" >充固話</a> <a href="#" style="border-right: 1px solid #ff4400;">充寬帶</a> <!-- style 操作目的：使得顯示的盒子最右邊有邊框； --> <div class="clear"></div> <div class="content" style="display: block;"> <!-- style 操作目的：使第一個圖片在初始狀態時，能顯示出來； --> <img src="images/1.png" width="355px"/> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/2.png" width="355px" /> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/3.png" width="355px" /> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/4.png" width="355px" /> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> </div> <script> var as = document.getElementsByTagName('a'); //通過 DOM 操作，拿到標簽為 a 的所有的元素(是個集合)； var divs = document.getElementsByClassName('content');//通過 DOM 操作，拿到類為 content 的所有的元素(是個集合)； for(var i=0; i<as.length; i++) { as[i].index = i; //給拿到的每個元素對象添加索引屬性； (由于通過 DOM 操作拿到的元素是對象，因此可以添加屬性值)； as[i].onclick = function() { //給 as集合 綁定單擊事件； for(var j=0; j<as.length; j++) { as[j].className = ''; //將 as集合 的所有元素的類名全部取消； (此時用的思想為：排他思想；) divs[j].style.display = 'none'; //將 divs集合 的所有元素全設置成不顯示狀態； } this.className = 'on'; //僅將被單擊的元素的類名設置為：on，以便執行在 css 中的相關操作； divs[this.index].style.display = 'block'; //并將被單擊的元素的相關圖片設置為：block狀態；(即：顯示出來；) } } </script> </body> </html>
3、結果展示：
A、默認的顯示結果：
B、點擊 ‘充流量’ 后的顯示結果：
C、點擊 ‘充固話’ 后的顯示結果：
D、點擊 ‘充寬帶’ 后的顯示結果：
4、可能存在的問題：
A 、如果自己也加載了圖片信息，仍然不能顯示該結果，可以直接下載我傳上去的文檔(可能解釋的更詳細)，可以直接在 VScode 等其他軟件上加載運行；
地址為：
https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501
哪里有不對或不合適的地方，還請大佬們多多指點和交流！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
代碼
<el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="標題1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="標題2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form>
原因：
因為form-item綁定驗證事件是在mounted中進行的，規則變化后沒有進行重新綁定驗證事件，v-if渲染組件節點diff后被復用了，所以驗證也就自然失效了
參考回答：v-if案例解析（element-ui form-item 結合 v-if 動態生成rule規則\表單元素，表單無法驗證問題剖析 ）
感興趣的小伙伴可以學習一下
解決方案：
el-form-item添加一個key屬性區分
<el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="標題1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item key="1" label="標題2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form>
如果v-if渲染的目標是整個表單，則在form標簽寫入key
el-form-item中寫rules
<el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="標題1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="標題2" prop="requestData" :rules="{ required: true, message: 'xxx不能為空', trigger: 'blur' }"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form>
:rules="{ required: true, message: ‘xxx不能為空’, trigger: ‘blur’ }"
這里需要注意JavaScript中的單引號''與雙引號""的使用規范
還有很多方法可以解決這個問題，這里只記錄我用過的其中兩個方法。有其他解決方法的同學歡迎留言討論！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
JS中的對象是屬性和行為的結合體，其中屬性是對象的靜態特征，行為又稱方法，是對象的動態特征。
JavaScript中的對象主要分為三大類：
定義非空對象
// 非空對象： var 對象名 = { 屬性名： 值, ... 方法名: function([參數]){ 方法體語句; } ... }
var p1 = { color: '黑色',//給對象添加屬性 weight: '188g',//屬性之間用逗號隔開 screenSize: 6.5, call: function(name){//給對象添加方法 console.log("打出電話："+name); }, sendMassage: function(msg){ console.log("發出的信息是："+msg); }, playVideo: function(){ console.log("播放視頻"); }, playMusic: function(){ console.log("播放音樂"); } } console.log("手機顏色:"+p1['color']);//也可以使用 對象['屬性']來輸出屬性值 console.log("手機重量:"+p1.weight); console.log("屏幕尺寸:"+p1.screenSize); p1.call("張三");//調用對象的發方法 p1["sendMassage"]("helo"); p1.playVideo(); p1.playMusic(); console.log(p1);
使用new Object()創建對象
var p = new Object(); // 創建一個空對象p
p2.name = '劉備'; p2.sex = '男'; p2.age = 32; p2.sayHello = function(){ console.log('Hello'); } p2.sayHello();//調用對象的方法
可以使用構造函數來創建對象：
語法： new 構造函數名( )
function Student(name,sex,age){ this.name = name;//這里的this指向的是構造函數新創建的對象 this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓別："+this.sex) console.log("年齡："+this.age) } } var s1 = new Student('喬峰','男',28);//s1為構造函數創建的新對象 即實例 s1.show(); var s2 = new Student('段譽','男',23); s2.show();
注意："構造函數"可以有參數，也可以沒有參數，如果沒有參數小括號可以省略
遍歷對象的屬性和方法：使用for…in循環
for(var 變量名 in 對象名){ 循環語句 }
function Student(name,sex,age){ this.name = name; this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓別："+this.sex) console.log("年齡："+this.age) } } // s2是要遍歷的對象 var s2 = new Student('段譽','男',23); for(var k in s2){ console.log(k);//依次輸出 name sex age show() console.log(s2[k]);//依次輸出 段譽 男 23 }
in運算符
判斷成員(屬性)在對象中是否存在，存在返回true;不存在返回false。
JavaScript提供了很多常用的內置對象，包括數學對象Math、日期對象Date、數組對象Array以及字符串對象String等。
Math對象：用來對數字進行與數學相關的運算，不需要實例化對象，可以直接使用其靜態屬性和靜態方法.
Math對象:不需要實例化
Math.PI:算數常量PI Math.abs(x):返回x的絕對值
Math.max(args...):返回最大數
Math.min(args...):返回最小數
Math.pow(x,y):返回x的y次方
Math.sqrt(x):返回x的算術平方根
Math.random():返回0.0到1.0之間的隨機數
Math.round(x):返回最接近x的整數
Math.floor(x):返回一個小于等于x 并且與它最接近的整數
Math.ceil(x):返回一個大于等于x 并且與它最接近的整數
Date對象：需要使用new Date()實例化對象才能使用，創建一個對象 Date()是一個構造函數，可以給該構造函數傳遞參數生成一個日期對象。
// 1.創建一個Date對象 沒有參數 var date1 = new Date(); console.log(date1); // 2.傳入年 月 日 時 分 秒 創建一個指定日期時間的Date對象 // 月份是 0-11 var date2 = new Date(2021,4,22,10,17,55); console.log(date2); // 3.傳入一個日期和時間字符串創建一個Date對象 var date3 = new Date("2021-5-22 18:19:25"); console.log(date3); console.log(date3.getMonth())//4 console.log(date3.getTime())//表示Date對象距離1970年1月1日午夜之間的毫秒數 console.log(date1.toLocaleDateString())//2021/6/14 console.log(date1.toLocaleString())//2021/6/14 下午11:17:36 console.log(date1.getFullYear())//2021
數組：是一些類型相同的數據的集合，它和普通的對象功能類似，也是用來存儲一些值，數組是使用數字來作為索引操作內部的元素。
數組的創建
var arr=[]//創建一個空數組
var arr = new Array();//定義一個空數組
判斷一個對象是不是數組的兩種方法：
var arr = []; var obj = {}; console.log(Array.isArray(arr));//true console.log(Array.isArray(obj));//false console.log(arr instanceof Array);//trrue
關于數組的其他方法之前的文章要有詳細介紹，這里不多做解釋。
String對象:字符串對象，必須使用new String()來創建
字符串常用方法
- charAt(n) 返回n位置上的字符串 - concat(s1,s2,...) 連接多個字符串 - charCodeAt(n) 返回n位置上的ASCII碼 - split('分隔符') 將字符串按給定的分隔符 轉換成字符串數組 - substr(start,length) 從start開始提取length個字符構成一個新串 - substring(from,to) 提取from和to之間的字符串構成一個新串 - toLowerCase() 將串中的大寫字符轉換成小寫 不影響原字符串 返回一個新字符串 - toUpperCase() 將串中的所有小寫轉換成大寫 不影響原字符串 返回一個新字符串 - replace(str1,str2) 使用str2替換字符串中的str1 返回替換結果 不影響原字符串
// 輸入一個由字母組成的字符串,統計串中每個字母出現的次數 var str = 'abBSdXbdea'; var lower = new Array(26);// 存放26個小寫字母各自出現的次數 var upper = new Array(26);// 存放26個大寫字母各自出現的次數 // 初始化兩個數組 for(var i=0;i<lower.length;i++){ lower[i] = 0 upper[i] = 0 } for(var k=0;k<str.length;k++){ if(str.charAt(k)>='a' && str.charAt(k)<='z'){ lower[str.charCodeAt(k)-97]++ }else if(str.charAt(k)>='A' && str.charAt(k)<='Z'){ upper[str.charCodeAt(k)-65]++ } } console.log(lower); console.log(upper);
/* 輸入一個十進制整數和一個數制（2、8、16）將該十進制整數轉換成
對應的數值格式輸出
取余法：
m=15 k=8
m%k 將余數存放在數組中
*/ var m = parseInt(prompt('請輸入一個整數：')); var k = parseInt(prompt('請輸入一個數制(2~16)')); var result = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; var arr = new Array();//存放數制轉換的結果 var i = 0; while(m!=0){//對m進行數制轉換 將余數放在arr數組里 arr[i] = m%k; m = parseInt(m/k); i++; } var str = ''; if(k==8){ str = '0'; }else if(k==16){ str = '0x'; } for(var i=arr.length-1;i>=0;i--){ str += result[arr[i]]; } console.log('轉換的結果為：'+str);
值類型: 簡單的數據類型(字符串,數值型,布爾型,undefined,null)
引用類型: 復雜數據類型(對象) 變量中保存的是引用的地址
注意： 引用類型的特點是，變量中保存的僅僅是一個引用的地址，當對變量進行賦值時，并不是將對象復制了一份，而是將兩個變量指向了同一個對象的引用。
下面對內存中的棧和堆進行分析
棧(stack)：會自動分配內存空間，會自動釋放，簡單數據類型存放到棧里面。
堆(heap)：動態分配的內存，大小不定也不會自動釋放，復雜數據類型存放到堆里面。
由此可見存放在堆內存中的對象，變量實際保存的是一個指針，這個指針指向另一個位置，通過這個指針來尋找堆中存儲的對象的屬性和值，并且每個空間大小不一樣，要根據情況開進行特定的分配。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1.隨著互聯網的發展，頁面傳遞給后臺有太多需要驗證的東西，盡管后端的代碼是能夠實現對傳遞過來的數據進行校驗和判斷的，但是這樣的話無疑是加重了后臺程序的工作任務量，于是廣大互聯網工作人員迫切需要有一種新的辦法/語言能夠實現這樣的效果，于是js也就是在這樣的一個大的時代背景下誕生的
2.js最開始的時候是不叫js而是叫scrpit語言，他們也想將這個前景光明的明日之星賣給微軟，但是微軟沒有買下，在種種機緣巧合之后被Sun公司收購了，為了讓其與java語言走的近點 ，更是改名為JavaScript簡稱為js
在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成
1997年，在ECMA（歐洲計算機制造商協會）的協調下，由Netscape、Sun、微軟、Borland組成的工作組確定統一標準：ECMA-262。
1.弱類型語言：在書寫的時候不去做明確的數據類型的限定 例如 var a=3.14 var b=“998”
2.運行在瀏覽器端的解釋執行性語言(js—>node.js可以運行在服務器上)
3.基于對象的編程語言
4.跨平臺性：JavaScript是依賴于瀏覽器本身，與操作環境無關，只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確執行。從而實現了“編寫一次,走遍天下”的夢想。
5.動態性：JavaScript是動態的，它可以直接對用戶或客戶輸入做出響應，無須經過Web服務程序。它對用戶的反映響應，是采用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁（Home Page）中執行了某種操作所產生的動作，就稱為“事件”（Event）。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發生后，可能會引起相應的事件響應。
可以簡單的理解為：只要用戶發出動作，js就會產生響應
6.安全性：JavaScript是一種安全性語言，它不直接允許訪問本地的硬盤，并不能直接將數據存入到服務器上，不允許對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。
小結：js現在的用途
1）作用于瀏覽器端幫助提升用戶的體驗度
2 ) 可以用來編寫游戲腳本
3）可以被構建成各種組件(node.js,React.js，vue.js, Jquery)
<html> <head> <meta charset="UTF-8"> <title>JS</title> </head> <body> <script type="text/javascript"> alert("Hello World"); /*彈出對話框*/ </script> </body> </html>
小結：1.js在頁面內使用的時候必須要寫在<script>標簽內
2.js代碼書寫的時候不用分號標識一行編程語句的結束
3.在js代碼中xxx():此時表明這是一個函數
4.alert():以彈窗的形式將括號內的內容展示出來
JavaScript： 是一個腳本語言。它是一個輕量級，但功能強大的編程語言
1.數據類型：雖然JavaScript在書寫校驗上不去區分數據的類型，但是并不意味著是不區分數據類型，而是通過在瀏覽器中內置的JS解析器/引擎自動的去判斷的
---------------------------------------------------------------------------------------------------------
1.1數字：
var a=12 //整數
var b=2.3 //浮點數或者說是小數型
var c=-0.5
友情提示：1）在js中變量名必須以字母或下劃線（"_"）開頭
2）變量可以包含數字、從 A 至 Z 的大小寫字母
3）JavaScript 區分大小寫，即變量 myVar、 myVAR 和 myvar 是不同的變量
---------------------------------------------------------------------------------------------------------
1.2邏輯型或布爾型：
var a= true
var b=false
alert(a)
alert(b)
---------------------------------------------------------------------------------------------------------
1.3Undefined 和 null
Undefined： 用于存放 JavaScript 的 undefined 值，表示一個未聲明的變量，或已聲明但沒有賦值的變量，或一個并不存在的對象屬性
null:可以通過將變量的值設置為 null 來清空變量，其意思為空值
var a=""
var a=null
var a
alert(typeof(a))
---------------------------------------------------------------------------------------------------------
1.4字符串： 可以使用單引號或雙引號
var firstName=“biil”
var familyName=‘Gates’
alert(firstName+familyName)
---------------------------------------------------------------------------------------------------------
1.5日期：
var myDate=new Date()
alert(myDate)/默認是格里尼形式的日期格式/
提示：Date是js中的一個內置的類
new：為類Date在內存中創建一個內存空間，進而實現實例化
補充：關鍵字：就是具有特殊含義的詞
---------------------------------------------------------------------------------------------------------
1.6數組：是一種存放數據的容器，其一般可以存放多個，且需要知道其長度
var array=[40, 100, 1, 5, 25, 10]
alert(array[0])
---------------------------------------------------------------------------------------------------------
注釋：
單行注釋：//
多行注釋：/**/
擴展：注釋的作用：
1）統一規范
2）注解，幫助理解/閱讀代碼
3）扯淡
---------------------------------------------------------------------------------------------------------
連接字符和轉義字符：
連接字符：在js中場用+表示為連接字符
例如： var a=123
alert(‘變量a的值為：’+a)
轉義字符：具有特殊含義的字符
\n 換行符 alert(“這是第一局 \n 這是第二句”)
\t 制表符 alert(“這是第一局 \t 這是第二句”)
---------------------------------------------------------------------------------------------------------
2.運算符：
2.1算術運算符： +， -， *， /， %，++，--
++：自動加1 例如 var a=12
alert(a++)
++在前：先計算再輸出； ++在后：先輸出再計算
–：自動減1，例如 var h=6
alert(a–)
---------------------------------------------------------------------------------------------------------
2.2關系運算符： > ，>=， <，<=, !=, ==,===
---------------------------------------------------------------------------------------------------------
2.3邏輯運算符：
與 ：&& ：全真為真，只要有一個假則為假
或 ：|| ：全假為假，只要有一個為真則為真
非 ：！ ：取相反的
JavaScript 可以通過不同的方式來輸出數據：
1）使用 window.alert() 彈出警告框。
<html> <body> <h1>使用 window.alert() 彈出警告框</h1> <script> window.alert(5 + 6); </script> </body> </html>
2）使用 document.write() 方法將內容寫到 HTML 文檔中。
<html> <body> <h1>我的第一個 Web 頁面</h1> <script> document.write(123); </script> </body> </html>
3）使用 innerHTML 寫入到 HTML 元素。
<html> <body> <h1>使用 innerHTML 寫入到 HTML 元素</h1> <p id="demo">我的第一個段落</p> <script type="text/javascript"> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>
使用innerHTML方法，將前面定位到的選擇器中的標簽內容進行更改
4）使用 console.log() 寫入到瀏覽器的控制臺。
<!DOCTYPE html> <html> <body> <h1>使用 console.log() 寫入到瀏覽器的控制臺</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
console.log()會將想要輸出的數據寫到網頁的控制臺中顯示
1）順序語句：js默認是從上向下自動執行的
2）選擇語句：
2.1）二路分支：
if(條件)
{
//JavaScript代碼;
}
else
{
//JavaScript代碼;
}
2.2）多路決策：
switch (表達式)
{
case 常量1 :
JavaScript語句;
break;
case 常量2 :
JavaScript語句;
break;
…
default :
JavaScript語句;
}
小結：switch…case…default不僅有多路決策的特性，還有穿透性
或者：
if (time<10) { alert("早上好"); } else if (time>=10 && time<16) { alert("中午好"); } else { alert("晚上好!"); }
3）循環語句：
for循環語句：
for (var i=0;i<10;i++) { alert("當前i的值為:"+i) }
while循環語句：
var i =1 while (i>5) { alert("當前i的值為："+i) i++; }
do…while循環：
var i=5 do { alert("執行了") i++; } while (i<5);
備注：for：知道次數的循環
while：>=0次的循環
do…while：>=1次的循環
break：語句用于跳出循環。
continue：用于跳過循環中的一個迭代。
1.typeof 操作符：可以使用 typeof 操作符來查看 JavaScript 變量的數據類型。
2.將數字轉換為字符串
var a=123 //第一種方法，用String //var castResult=String(a) //第二種方法，用toString方法 var castResult2=a.toString() alert(typeof(castResult2))
3.將字符串轉換為數字
var a="123" //用Number轉換 var b=Number(a) //用parseInt方法將字符串強行轉換為數字 //var b=parseInt(a) alert(typeof(b)) alert(b+998)
1.match():匹配字符串可用正則表達式
2.search() 方法 用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，并返回子串的起始位置
var str = "abcderfha"; //返回查找到的下標位置 alert(str.search("er")) //返回 4 //查查找不到的時候返回-1 alert(str.search("zy"))//返回-1
3.replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
var str = "Hello World"; alert(str.replace("World","javascript"))//顯示結果為Hello javascript
語法： function 函數名( ){
}
實例一
<html> <head> <meta charset="UTF-8"> <title>JS函數</title> </head> <script type="text/javascript"> function sum(a,b){ alert(a+b) } </script> <body> <input type="button" value="求和" onclick="sum(3,4)" /> </body> </html>
定義一個求和函數，當點擊求和按鈕的時候將計算出傳入的兩個參數的和
ps：onclick單擊事件
var xx =function(x,y){
alert(x+y)
}(23,34);
或
(function( o ){
alert(o)
})(“你好”)
實例二：
<script type="text/javascript"> var fun=function(a,b){ alert(a+"\n"+b) } fun(12,45); </script> ------------------------- <script type="text/javascript"> (function( o ){ alert(o) })("你好") </script>
創建一個數組：三種方式
1：常規方式
<script type="text/javascript"> var myCars=new Array(); myCars[0]="nike" myCars[1]="李寧" myCars[2]="安踏" alert(myCars[1]) </script>
2：簡潔方式
<script type="text/javascript"> var myCars=new Array("nike","李寧","安踏"); alert(myCars[1]) </script>
3：字面方式
<script type="text/javascript"> var myCars=["nike","李寧","安踏"]; alert(myCars[1]) </script>
2：訪問數組：通過指定數組名以及索引號碼，你可以訪問某個特定的元素
例如：var name=myCars[0];
3:數組的方法和屬性
數組名.length ： 數組 中元素的數量
數組名.indexOf(“abc”)：“abc” 值在數組中的索引值
4：數組的排序
數組名.sort(); ：將數組按正序排序，但是是按照字符串的排序方式來排序，不管里面是數字還是什么都是按字符串的排序方式來排序
reverse（）：將一個數組中的元素的順序反轉，（即是將數組中的元素的頭變成尾，尾變成了頭，不是其他的）
擴展：將數組先用sort（）方法進行正序排序，在利用reverse（）方法反轉，即可達成降序的目的
字符串中常用的屬性和方法
str.length:獲取字符串的長度
str.match("")：內容匹配
str.replace（）：替換內容
var str="adsfadsf"; var n=str.replace("adsf","abcx"); var s=str.length;
1.對象：是屬性和/方法的組合
屬性：是對象所擁有的一組外觀特征，一般為名詞
方法：是對象可以執行的功能，一般為動詞
例如：對象：汽車
屬性：型號：法拉利 顏色：綠色
方法：前進、剎車、倒車
PS:三類已經存在的對象：
瀏覽器對象：BOM(已經存在于瀏覽器中的，到時候我們直接調用即可，例如Screen,History,Location,Navigator)
js腳本對象:數組，字符串，日期，Math等(JS語言中已經寫好的具有某一些功能的對象，例如Array,Number,Math…)
HTML文檔對象：DOM（已經存在于HTML中的，且已經寫好了，用的時候可以直接調用即可，例如Document）
例如：
<script type="text/javascript"> function Car(name,color) { this.name=name; this.color=color; this.type="轎車"; this.fun=function(){alert("100km/h");} } var car1=new Car("奧迪","藍色"); var car2=new Car("奔馳","綠色"); alert(car1.type); //轎車 car1.fun();//100km/h </script>
1.id選擇器：通過 id 查找 HTML 元素，如果找到該元素，則該方法將以對象的形式返回該元素。
document.getElementById("id1").value //獲取id為id1的標簽中的value值
2.name選擇器：通過name查找到HTML的元素，如果找到元素了，則會返回一個數組
var arr=document.getElementsByName("like") //將name為like的標簽全部存入arr數組中
3.通過標簽名找到 HTML 元素：
getElementsByTagName("p"); var habbies=document.getElementsByTagName("input")//其他的都與步驟2一樣
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>確認框</title> </head> <body> <p>點擊按鈕，顯示確認框。</p> <button onclick="myFun()">點擊</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=confirm("是否提交商品訂單");//彈出一個確定框，確定，返回true，取消返回false if(r==true){ x="提交成功，已確定" } else{ x="提交失敗，已取消" }、 //抓取掉id為demo的標簽，在屏幕顯示x內容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
點擊確定，會在屏幕顯示”提交成功，已確定“，點擊取消，會在屏幕顯示"提交失敗，已取消"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>確認框</title> </head> <body> <p>點擊按鈕，顯示輸入框。</p> <button onclick="myFun()">點擊</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=prompt("請輸入你的名字","Hello"); //彈出對話框，可輸入名字 //判斷如果輸入的不為空或者不是空字符串，則x被賦值 if(r!=null && r!=""){ x="早上好"+r+"今天又是新的開始，加油" } //抓取掉id為demo的標簽，在屏幕顯示x內容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
點擊確定以后則會將被賦值的x顯示在屏幕中
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn