整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Hutool是Hu + tool的自造詞，前者致敬我的“前任公司”，后者為工具之意，諧音“糊涂”，寓意追求“萬事都作糊涂觀，無所謂失，無所謂得”的境界。
Hutool是一個Java工具包，也只是一個工具包，它幫助我們簡化每一行代碼，減少每一個方法，讓Java語言也可以“甜甜的”。Hutool最初是我項目中“util”包的一個整理，后來慢慢積累并加入更多非業務相關功能，并廣泛學習其它開源項目精髓，經過自己整理修改，最終形成豐富的開源工具集。（抄自作者簡介）
一個Java基礎工具類，對文件、流、加密解密、轉碼、正則、線程、XML等JDK方法進行封裝，組成各種Util工具類，同時提供以下組件：
這兩天使用Hutool把Halo里面的一些代碼給替換掉了，不得不說，用起來十分順心，下面簡單介紹一下我用到的一些Hutool的工具類。
主要是在登錄的時候還有修改密碼的時候用到的，因為數據庫里面的密碼是md5加密處理的，所以登錄的時候需要先加密之后再到數據庫進行查詢，使用Hutool的話，只需要調用SecureUtil中的md5方法就可以了。
user = userService.userLoginByName(loginName,SecureUtil.md5(loginPwd));這個工具類就比較厲害了，不過我在Halo當中用得最多的還是HtmlUtil.encode，可以將一些字符轉化為安全字符，防止xss注入和SQL注入，比如下面的評論提交。
comment.setCommentAuthor(HtmlUtil.encode(comment.getCommentAuthor()));這就是防止有小壞蛋故意寫一些可執行的js代碼，然后提交評論，在后臺面板就會執行這一段代碼，比較危險，使用encode方法就可以將<script>標簽給轉化成<script>，這樣轉化之后，js代碼就不會執行了。
另外，HtmlUtil還提供了以下方法，有興趣的可以去試一下。
這個工具就更厲害了，完全不需要類似quartz這樣的框架來做定時任務，而且CronUtil也不需要任何其他依賴，只需要在resources下建一個配置文件，然后在程序啟動的時候將定時任務開啟就行了，如Halo的定時備份功能（每天凌晨1點備份一次）。
cron.setting:
cc.ryanc.halo.web.controller.admin.BackupController.backupResources = 0 0 1 * * ?
cc.ryanc.halo.web.controller.admin.BackupController.backupDatabase = 0 0 1 * * ?
cc.ryanc.halo.web.controller.admin.BackupController.backupPosts = 0 0 1 * * ?@Override
public void onApplicationEvent(ContextRefreshedEvent event){
this.loadActiveTheme();
this.loadOptions();
this.loadFiles();
this.loadThemes();
//啟動定時任務
CronUtil.start();
log.info("定時任務啟動成功！");
}好了，就介紹這三個工具類，有興趣的可以去試試其他的工具，挺全的，這應該是我用過最好用的一個工具類庫了，值得一試。
Java知音，專注于Java實用文章推送，不容錯過！
官網地址：http://www.hutool.cn/
記的屬性
each()遍歷元素：each(callback)方法主要用于對選擇器進行遍歷，它接受一個函數為參數，該函數接受一個參數，指代元素的序號。
對于標記的屬性而言，可以利用each()方法配合this關鍵字來獲取或者設置選擇器中每個元素相對應的屬性值；
jQuery代碼:
$(function(){
$("img").each(function(index){
this.title = "這是第" + index + "幅圖，id是：" + this.id; //此時this指DOM對象
});
});HTML代碼:
<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">理解:首先利用$("image")獲取頁面中所有圖片的集合,然后通過each()方法遍歷所有圖片,通過this關鍵字對圖片進行訪問,獲取圖片的id,
并設置圖片的title屬性。其中each()方法的函數參數index為元素所處的序號(從0開始計數)。
jQuery代碼:
$(function(){
$("img").each(function(index, item){
item.title = "這是第" + index + "幅圖，id是：" + this.id; //此時item指當前的DOM對象
});
});HTML代碼:
<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">//使用jQuery中插件機制
$.fn.extend({
quanxuan:function(){
//專用于實現全選
this.attr("checked",true);
},
quxiao:function(){
//取消功能
this.attr("checked",false);
},
fanxuan:function(){
//反選
var leng = this.length;
this.each(function(index,domElement){ //this指jQuery對象
domElement.checked = !domElement.checked; //domElement= this this指DOM對象
})
}
});獲取屬性的值
attr(name)
$(function(){
//var sTitle = $("em").attr("title"); //獲取第一個<em>元素的title屬性值
var sTitle = $("em:eq(1)").attr("title"); //獲取第二個<em>元素的title屬性值
$("span").text(sTitle);
});注意: 因為沒有遍歷,$("em").attr("title") 實際上獲取的是第一個<em>元素的title屬性值
$("em").attr("title") 等同于$("em:eq(1)").attr("title")
$("em").get(0).title 也是獲取第一個<em>元素的title屬性值, 而$("em").get(0)已經轉換成DOM對象, 因此就不能使用jquery對象的attr方法
設置屬性值
attr(name,value)
$("a[href^=http://]").attr("target","_blank")jQuery代碼：
function DisableBack(){
$("button:gt(0)").attr("disabled","disabled");
}HTML代碼:
<button onclick="DisableBack()">第一個Button</button>
<button>第二個Button</button>
<button>第三個Button</button> 通過位置選擇器:gt(0),當單擊第1個按鈕時后面的兩個按鈕將同時禁用;
attr()方法還接受函數作為參數attr(name,fn),它的第2個參數為一個函數,該函數接受一個參數,為元素的序號,返回值為字符串;
jQuery代碼
$(function(){
$("div").attr("id", function(index){
//將id設置為序號相關的參數
return "div-id" + index;
}).each(function(){
//找到每一項的span標記
$(this).find("span").html("(id='" + this.id + "')");
});
});HTML代碼:
<div>第0項 <span></span></div>
<div>第1項 <span></span></div>
<div>第2項 <span></span></div>用attr()方法接受屬性列表
$(function(){
$("img").attr({
src: "06.jpg",
title: "紫荊公寓",
width:300, //參考HTML語法, 無需加單位, 也可以寫成 widht:"300px" 加單位必須加引號
alt: "紫荊公寓"
});
});刪除屬性
$("button").removeAttr("disabled");removeAttr(name)刪除屬性相當于HTML的標記中不設置該屬性, 并不是取消了該標記的這個特點。
小結：
$().attr(屬性名稱); //獲得屬性信息值
$().attr(屬性名稱,值); //設置屬性的信息
$().removeAttr(屬性名稱); //刪除屬性
$().attr(json對象); //同時為多個屬性設置信息值, json對象的鍵值對就是名稱和值
$().attr(屬性名稱,fn); //通過fn函數執行的return返回值對屬性進行賦值
獲取屬性的第二種方式:
$("input[type='checkbox']").prop("checked");設置元素的樣式
添加、刪除CSS類別
用addClass()方法添加CSS類別
$(function(){
//同時添加多個CSS類別
$("div").addClass("myClass1 myClass2"); //增加多個CSS類別,用空格隔開
});用removeClass()方法刪除CSS類別
希望某些元素的樣式風格在某個類別之間切換,時而addClass()類別,時而removeClass()類別;
用toggleClass()方法在類別間動態切換 toggle 切換
$(function(){
$("p").click(function(){
//點擊的時候不斷切換
$(this).toggleClass("highlight");
});
});實例:jQuery制作交替變幻的表格
<html>
<head>
<title>交替變幻的表格</title>
<style>
<!--
.datalist{
border:1px solid #007108; /* 表格邊框 */
font-family:Arial;
border-collapse:collapse; /* 邊框重疊 */
background-color:#d9ffdc; /* 表格背景色 */
font-size:14px;
}
.datalist th{
border:1px solid #007108; /* 行名稱邊框 */
background-color:#00a40c; /* 行名稱背景色 */
color:#FFFFFF; /* 行名稱顏色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #007108; /* 單元格邊框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
background-color:#a5e5aa; /* 隔行變色 */
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
$("table").mouseover(function(){
$("tr:gt(0)").toggleClass("altrow");
});
$("table").mouseout(function(){
$("tr:gt(0)").toggleClass("altrow");
});
});
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
</table>
</body>
</html>直接獲取、設置樣式
jQuery提供css()方法來直接獲取、設置元素的樣式風格。使用方法與attr()幾乎一模一樣。
通過css(name)來獲取某種樣式風格的值；$("p").css("color");
通過css(properties)列表來同時設置元素的多種樣式；$("p").css({ color: "#ff0011", background: "blue" });
通過css(name,value)來設置元素的某種樣式；$("p").css("color","red");
通過css(name,function(index, value))設置一個樣式屬性的值
css()樣式操作特點：
此函數返回要設置的屬性值。接受兩個參數，index為元素在對象集合中的索引位置, value是原先的屬性值。
1 樣式獲取，jquery可以獲取行內、內部、外部的樣式。dom方式只能獲得行內樣式
2 復合屬性樣式需要拆分為"具體樣式"才可以操作
例如： background 需要拆分為 background-color background-image 等進行操作
border： border-left-style border-left-width border-left-color 等
margin： margin-left margin-top 等
也可以將樣式屬性寫成駝峰式: backgroundColor, 可以不加引號。
在json對象中, 帶橫線的css屬性(如font-size)必須加引號;
如：
$('div').css({"font-size":"40px","font-weight":"bold",color:"red"});標準格式：
$('div').css({"font-size":"40px","font-weight":"bold","color":"red"});css還支持獲取屬性值的方法, 保持原來的屬性值(width()和css()兩種方法)
oInput.val(tdText).css({'width':oTd.width(), 'font-size':'14px','font-weight':'bold', 'border':0,
'background-color':oTd.css('background-color')});與下面的語句等同：
oInput.val(tdText).css('width',tdObj.width()).css('font-size','14px').css('font-weight','bold').
css('border-width',0).css('background-color',oTd.css('background-color'));$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});以下代碼為<p>標記添加了mouseover和mouseout事件，當這兩個事件觸發時通過css(name,value)來修改標記的顏色。
$(function(){
$("p").mouseover(function(){
$(this).css("color","red");
});
$("p").mouseout(function(){
$(this).css("color","black");
});
});另外還可以通過hasClass(name)方法來判斷某個元素是否設置了某個CSS類別，如何設置了則返回true，否則為false。
$("li:last").hasClass("myClass")等同于$("li:last").is(".myClass")
在jQuery中其實hasClass方法內部調用的就是is()方法,只不過代碼可讀性更高一些;
小結：
class屬性值操作
$().attr('class',值);
$().attr('class');
$().removeAttr('class屬性'); //刪除class的屬性
class具體快捷操作方法：
$().addClass(class屬性值); //給class屬性追加信息值
$().removeClass(class屬性值); //刪除class屬性中的某個信息值
$().toggleClass(class屬性值); //開關效果，有就刪除，沒有就添加
css樣式操作
$().css(name,value); //設置
$().css(name); //獲取
$().css(json對象); //同時修改多個css樣式
CSS樣式操作-寬高
width() 取得第一個匹配元素當前計算的寬度值(px)。
width(val) 為每個匹配的元素設置CSS寬度(width)屬性的值; 如果沒有明確指定單位(如：em或%), 默認使用px
height(100) height("100px") 后面含有單位的必須加引號
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
</head>
<body>
選中單選按鈕組其中一項：
<input type="radio" value="1" name="radioGroup" />
<input type="radio" value="2" name="radioGroup" />
<input type="radio" value="3" name="radioGroup" />
<input type="button" value="選中其中一個單選按鈕3" onclick="checkBoxVal()" />
<input type="button" value="單選按鈕2禁用" onclick="disableCheckBox()" />
<a href="#" id="aEleid">這是一個鏈接標簽內容</a>
<input type="button" value="禁用鏈接" onclick="disableAelement()" />
</body>
<script type="text/javascript">
function checkBoxVal(){
$("input[name='radioGroup'][value='3']").attr("checked","checked");
}
function disableCheckBox(){
$("input[name='radioGroup'][value='2']").attr("disabled",true);
}
function disableAelement() {
$("#aEleid").attr("disabled", true);
$("#aEleid").removeAttr("href");
}
</script>
</html>碼分享鏈接： https://pan.baidu.com/s/18d05SpJbGUep0T1pFQwHrQ
提取碼：baf9
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
