自己封裝的一些簡單的jQuery插件
俗話說的好：溫故而知新，可以為師矣！
學習是一個人一輩子的事情。於是乎趁著今天休息，回顧了一些知識點，可能做的不夠完美，請多多指教。
/**
* Created by Administrator on 2017/5/6.
*/
/**
* 格式化日期
* @param dt 日期對象
* @returns {string} 返回值是格式化的字符串日期
*/
function getDates(dt) {
var str = "";//存儲時間的字符串
//獲取年
var year = dt.getFullYear();
//獲取月
var month = dt.getMonth() + 1;
//獲取日
var day = dt.getDate();
//獲取小時
var hour = dt.getHours();
//獲取分鐘
var min = dt.getMinutes();
//獲取秒
var sec = dt.getSeconds();
month = month < 10 ? "0" + month : month;
day = day < 10 ? "0" + day : day;
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
str = year + "年" + month + "月" + day + "日 " + hour + ":" + min + ":" + sec;
return str;
}
/**
* 獲取指定標簽對象
* @param id 標簽的id屬性值
* @returns {Element}根據id屬性值返回指定標簽對象
*/
function my$(id) {
return document.getElementById(id);
}
/**
* 設置元素的文本內容
* @param element 任意元素
* @param text 任意文本內容
*/
function setInnerText(element, text) {
if (typeof(element.textContent) == "undefined") {
element.innerText = text;
} else {
element.textContent = text;
}
}
/**
* 獲取元素的文本內容
* @param element 任意元素
* @returns {*} 任意元素中的文本內容
*/
function getInnerText(element) {
if (typeof(element.textContent) == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
}
/**
* 獲取父級元素中的第一個子元素
* @param element 父級元素
* @returns {*} 父級元素中的子級元素
*/
function getFirstElement(element) {
if (element.firstElementChild) {
return element.firstElementChild;
} else {
var node = element.firstChild;
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
/**
* 獲取父級元素中的最後一個子元素
* @param element 父級元素
* @returns {*} 最後一個子元素
*/
function getLastElement(element) {
if (element.lastElementChild) {
return element.lastElementChild;
} else {
var node = element.lastChild;
while (node && node.nodeType != 1) {
node = node.previousSibling;
}
return node;
}
}
/**
* 獲取某個元素的前一個兄弟元素
* @param element 某個元素
* @returns {*} 前一個兄弟元素
*/
function getPreviousElement(element) {
if (element.previousElementSibling) {
return element.previousElementSibling
} else {
var node = element.previousSibling;
while (node && node.nodeType != 1) {
node = node.previousSibling;
}
return node;
}
}
/**
* 獲取某個元素的後一個兄弟元素
* @param element 某個元素
* @returns {*} 後一個兄弟元素
*/
function getNextElement(element) {
if (element.nextElementSibling) {
return element.nextElementSibling
} else {
var node = element.nextSibling;
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
/**
* 獲取某個元素的所有兄弟元素
* @param element 某個元素
* @returns {Array} 兄弟元素
*/
function getSiblings(element) {
if (!element)return;
var elements = [];
var ele = element.previousSibling;
while (ele) {
if (ele.nodeType === 1) {
elements.push(ele);
}
ele = ele.previousSibling;
}
ele = element.nextSibling;
while (ele) {
if (ele.nodeType === 1) {
elements.push(ele);
}
ele = ele.nextSibling;
}
return elements;
}
/**
* 返回當前瀏覽器是什麽類型的瀏覽器
*/
function userBrowser(){
var browserName=navigator.userAgent.toLowerCase();
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
console.log("IE");
}else if(/firefox/i.test(browserName)){
console.log("Firefox");
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
console.log("Chrome");
}else if(/opera/i.test(browserName)){
console.log("Opera");
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
console.log("Safari");
}else{
console.log("不知道什麽鬼!");
}
}
function getStyle(element,attr) {
return element.currentStyle?element.currentStyle[attr]:window.getComputedStyle(element,null)[attr];
}
//緩動動畫函數的封裝
function animate(element, json,fn) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var flag=true;
for (var attr in json) {
if(attr=="opacity"){
var current = getStyle(element, attr)*100;
var target=json[attr]*100;
//每次移動的步數
var step = (target - current) / 10;
//每次移動步數都是整數(比較大的數字)
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移動後的當前的像素
element.style[attr] = current/100;
}else if(attr=="zIndex"){
element.style[attr]=json[attr];
}else{
var current = parseInt(getStyle(element, attr));
var target=json[attr];
//每次移動的步數
var step = (target - current) / 10;
//每次移動步數都是整數(比較大的數字)
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移動後的當前的像素
element.style[attr] = current + "px";
}
if (current != target) {//到達目標後停止計時器
flag=false;
}
}
if(flag){
clearInterval(element.timeId);//清理計時器
if(fn){
fn();
}
}
console.log("target:" + target + ",current:" + current + ",step:" + step);
}, 20);
}
//關於事件參數對象的工具的代碼
var evtTools={
//事件參數
evt:function (e) {
return window.event?window.event:e;
},
//頁面向左卷曲出去的距離
left:function () {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//頁面向上卷曲出去的距離
top:function () {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//事件參數對象中的屬性封裝---可視區域的橫坐標
clientX:function (e) {
return this.evt(e).clientX;
},
//事件參數對象中的屬性封裝---可視區域的縱坐標
clientY:function (e) {
return this.evt(e).clientY;
},
pageX:function (e) {
return this.evt(e).pageX?this.evt(e).pageX:this.left()+this.clientX(e);
},
pageY:function (e) {
return this.evt(e).pageY?this.evt(e).pageY:this.top()+this.clientY(e);
}
};
//當瀏覽器的寬度發生變化,就獲取瀏覽器(頁面可視區域的寬度)
function getClient() {
return{
width:window.innerWidth||document.body.clientWidth||document.documentElement.clientWidth||0,
height:window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight||0
}
}
自己封裝的一些簡單的jQuery插件