常見樣式設計及DOM操作整理

fnngj 發布于2019-08-02 16:05 / 1109人閱讀

摘要：部分為不同鏈接添加不同樣式跨瀏覽器灰度圖動畫背景清除浮動方法方法方法將浮動元素用一個不浮動的包裹起來表格寬度自適應任意陰影文本寬度自適應模糊文本網頁加載動畫

css部分 為不同鏈接添加不同樣式

a[href^="http"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* email */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdf */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

跨瀏覽器灰度圖

動畫背景

button{
background-image: linear-gradient(#5187c4, #1c2f45);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}

清除浮動

/*方法1*/
.clear-fix{
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
}
/*IE*/
.clear{
  overflow: auto; zoom: 1; /*IE6*/
}
/*方法2*/
&:after{
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}
/*方法3*/
/*將浮動元素用一個不浮動的 div 包裹起來*/

表格寬度自適應

td {
white-space: nowrap;
}

任意陰影

.box-shadow {
background-color: #FF8020;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}

文本寬度自適應

pre {
white-space: pre-line;
word-wrap: break-word;
}

模糊文本

.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

網頁加載動畫

loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "2026";
}
@keyframes ellipsis {
from {
  width: 2px;
}
to {
  width: 15px;
}
}

窗口漂浮物



  This text will fly

解決 input:text 自動填充變黃的問題

input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 10000px white inset !important;
box-shadow: 0 0 0px 10000px white inset !important;
}

jQuery部分 返回頭部

$("a.top").click(function (e) {
  e.preventDefault();
  $(body).animate({scrollTop: 0}, 800);
});

預加載圖片

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $("").attr("src", arguments[i]);
  }
};
$.preloadImages("img/hover-on.png", "img/hover-off.png");

自動替換加載失敗的圖片

$("img").on("error", function () {
  $(this).prop("src", "img/broken.png");
});

切換元素的各種樣式

$(".btn").hover(function () {
  $(this).addClass("hover");
}, function () {
  $(this).removeClass("hover");
});

禁用/啟用提交按鈕

$("input[type="submit"]").prop("disabled", true);
$("input[type="submit"]").prop("disabled", false);

組織默認事件

$("a.no-link").click(function (e) {
e.preventDefault();
});

切換動畫

//淡入淡出
$(".btn").click(function () {
  $(".element").fadeToggle("slow");
});
//滑入滑出
$(".btn").click(function () {
$(".element").slideToggle("slow");
});

簡單的手風琴樣式

$("#accordion").find(".content").hide();  //關閉全部標簽
$("#accordion").find(".accordion-header").click(function () {
  var next = $(this).next();
  next.slideToggle("fast");
  $(".content").not(next).slideUp("fast");
  return false;
});

調整多個 div 一樣高

var $columns = $(".column");
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

同鏈接不同樣式

$("a[href^="http"]").attr("target", "_blank");
$("a[href^="http://"]").attr("target", "_blank");
$("a[href^="" + window.location.origin + ""]").attr("target", "_self");  //cannot work in IE10
$("a[href$=pdf]").addClass("pdf");
$("a[href$=doc]").addClass("doc");
$("a[href$=xls]").addClass("xls");

通過內容查找元素

var search = $("#search").val();
$("div:not(:contains("" + search + ""))").hide();

當其他元素獲得焦點時觸發

$(document).on("visibilitychange", function (e) {
  if (e.target.visibilityState === "visible") {
    console.log("Tab is now in view!");
  } else if (e.target.visibilityState === "hidden") {
    console.log("Tab is now hidden!");
  }
});

顯示 Ajax 錯誤信息

$(document).ajaxError(function (e, xhr, settings, error) {
  console.log(error);
});

禁用右鍵菜單

$(document).ready(function(){
  $(document).bind("contextmenu", function(e){
     e.preventDefault();
  })
})

模擬 placeholder 屬性

$(document).ready(function(){
  var $input_text = $("input[type=text]");
  $input_text.val("Enter your words here...");

  var originalValue = input.val();
  input.focus(function(){
    if($.trim(input.val()) == originalValue){
      input.val("");
    }
  }).blur(funtion(){
    if($.trim(input.val()) == ""){
      input.val(originalValue);
    }
  });
});

判斷元素是否存在

$(document).ready(function(){
  if($("#id").length){
    //do sth.
  }
});

放大標簽面積

$("div").click(function(){
  window.loaction = $(this).find("a").attr("href");
  return false;
});

根據瀏覽器大小選擇不同的類

$(document).ready(function(){
  $(window).resize(function(){
    if($(window).width() > 1200){
      $("body").addClass("large");
    } else {
      $("body").removeClass("large")
    }
  });
});

自定義偽類選擇器

$.extend($.expr[":"], {
  moreThan500px:function(a){
    return $(a).width > 500;
  }
}); //create a pseudo selector ":moreThan500px"

禁用 jQuery 所以動畫

$.fx.off = true;

判斷鼠標左右鍵

$("#id").mousedown(function(e){
  switch(e.witch){
    case 1: //left click
      break;
    case 2: //middle click
      break;
    case 3: //right click
      break;
    default: break;
  }
});

回車提交表單

$("input").keyup(function(e){
  if(e.witch == 13 || e.keyCode == 13){
    $("#submit").trigger("click");
  }
});

配置 Ajax 的全局參數

$("#load").ajaxStart(function(){
  showLoading();
  disableButton();
}).ajaxComplete(function() {
  hideLoading();
  enableButton();
});

用 siblings() 選擇兄弟元素

$("#nav li").click(function(){
  $(this).addClass("active").sibling().removeClass("active");
});

用 Firebug 輸出日志

jQuery.log = jQuery.fn.log = function(msg){
  if(console){
    console.log("%s, %o", msg, this);
  }
  return $(this);  //鏈式調用
}

CSS 鉤子

$.cssHooks["borderRadius"] = {
  get: function(ele, computed, extra){
    //Read the value of -moz-border-radius, -webkit-border-radius, -o-border-radius, -ms-border-radius or border-radius depanding on browser.
  }
  set: function(ele, value){
    //Set all the property above.
  }
};

限制 textarea 的文字數量

jQuery.fn.maxLength = function(max){
  this.each(function(){
    var type = this.tagName.toLowerCase();
    var inputType = this.type ? this.type.toLowerCase() : null;
    if(type == "input" && inputType == "text" || inputType == "password"){
      this.maxLength = max;  //use normal length
    } else if(type == "textarea"){
      this.onkeypress = function(e){
        var ob = e || window.event;
        var keyCode = ob.keyCode;
        var hasSelection - document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
        return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !ob.shiftKey && !hasSelection);
      };
      this.onkeyup = function(){
        if(this.value.length > max){
          this.value = this.value.substring(0, max);
        }
      };
    }
  });
};

刪除字符串中的 HTML 標簽

$.fn.stripHTML = function(){
  var regexp = /<("[^"]*"|"[^"]"|[^"">])*/gi;
  this.each(function(){
    $(this).html($(this).html().replace(regexp, ""));
  });
  return $(this);
}

使用 proxy() 函數代理

$("panel").fadeIn(function(){
  $("panel button").click(function(){
    $(this).fadeOut(); //"this" is button, not panel
  });
  $("panel button").click($.proxy(function(){
    $(this).fadeOut(); //"this" is panel, not button
  }, this));
});

禁用前進后退按鈕

$(document).ready(function(){
  window.history.forward(1);
  window.history.forward(-1);
})

javascript 部分 類數組對象轉化為數組

function trans(obj){
  return [].slice.call(obj);
}

//以下是 ES6 方法
function trans(obj){
  return Array.from(obj);
}

判斷瀏覽器 js 版本(鴨式辯型)

//js版本檢測
  var JS_ver = [];
(Number.prototype.toFixed)?JS_ver.push("1.5"):false;
([].indexOf && [].forEach)?JS_ver.push("1.6"):false;
((function(){try {[a,b] = [0,1];return true;}catch(ex) {return false;}})())?JS_ver.push("1.7"):false;
([].reduce && [].reduceRight && JSON)?JS_ver.push("1.8"):false;
("".trimLeft)?JS_ver.push("1.8.1"):false;
JS_ver.supports = function()
{
　　if (arguments[0])
　　　　return (!!~this.join().indexOf(arguments[0] +",") +",");
　　else
　　　　return (this[this.length-1]);
}
console.log("Javascript version supported in this browser: "+ JS_ver.supports());

獲取 url 中參數

function getURIData(url){
  var para = url.slice(url.indexOf("?") + 1);
  var reg = /&?(w*)=([%w]*)/g;
  var temp, data = {};
  while(temp = reg.exec(para)){
    data[temp[1]] = window.decodeURIComponent(temp[2]);
  }
  return data;
}

利用 documentFragment 避免多次刷新 DOM

(function createList() {
　　var lis = ["first item", "second item", "third item",
　　"fourth item", "fith item"];
　　var Frag = document.createDocumentFragment();
　　while (lis.length) {
　　　　var li = document.createElement("li");
　　　  li.appendChild(document.createTextNode(lis.shift()));
　　　　Frag.appendChild(li);
　　}
　　document.getElementById("myUL").appendChild(Frag);
})();

云服務器 GPU云服務器數據整理及存儲方案 js dom樣式修改 Linux常見故障及解決方案解碼器常見故障及解決方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54625.html

常見樣式設計及DOM操作整理

摘要：部分為不同鏈接添加不同樣式跨瀏覽器灰度圖動畫背景清除浮動方法方法方法將浮動元素用一個不浮動的包裹起來表格寬度自適應任意陰影文本寬度自適應模糊文本網頁加載動畫 css部分為不同鏈接添加不同樣式 a[href^=http]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* em...

KavenFan 2019-08-29 16:42 評論0 收藏0
常見樣式設計及DOM操作整理

摘要：部分為不同鏈接添加不同樣式跨瀏覽器灰度圖動畫背景清除浮動方法方法方法將浮動元素用一個不浮動的包裹起來表格寬度自適應任意陰影文本寬度自適應模糊文本網頁加載動畫 css部分為不同鏈接添加不同樣式 a[href^=http]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* em...

Forelax 2019-08-23 11:53 評論0 收藏0
一張腦圖看懂BUI Webapp移動快速開發框架【上】--框架與工具、資源

摘要：后續我們還會增加一些實戰類的移動開發案例，歡迎關注專欄。進入官網新版預覽在線預覽需要使用開啟設備模擬，效果更佳。前言之前寫過一篇 2018開發最快的Webapp框架--BUI交互框架，如果你還沒看過，可以簡單看一下，主要介紹了BUI的基本功能，有多少控件，以及實現的思路，BUI 1.5版本以后變化很大，統一新的風格，新的規范750，新增基于Dom的數據驅動，完善了頁面的生命周期等...

wuyumin 2019-08-26 10:16 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 評論0 收藏0