[工作總結]jQuery在工作開發中常用代碼片段集錦（1-10）

1.jQuery,JS實現tab切換

原生JS實現

HTML代碼如下：

<div class="wrap"> <ul id="tag"> <li class="current" >標簽一</li> <li>標簽二</li> <li>標簽三</li> </ul> <div id="tagContent"> <div> 內容一<br>內容一 </div> <div> 內容二<br>內容二 </div> <div> 內容三<br>內容三 </div> </div> </div>

CSS代碼：

*{margin:0;padding:0;} .wrap{width:500px; margin:10px auto; } #tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; } #tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;} #tag .current{ color:#000; background:#ccc; } #tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }

JS代碼：

function tabs(title,content){ var tag=document.getElementById(title).children; //獲取Tag下的li，即Tag標簽 var content=document.getElementById(content).children; //獲取Tag標簽對應的內容 content[0].style.display = "block"; //默認顯示第一個標簽的內容 var len= tag.length; for(var i=0; i<len; i++){ //無論點擊誰都能實現當前顯示，其余隱藏 tag[i].number=i; tag[i].onclick = function(){ //0級DOM的事件句柄注冊 for(var n=0; n<len; n++){ //首先將全部的div隱藏 tag[n].className=""; content[n].style.display="none"; } tag[this.number].className = "current"; content[this.number].style.display = "block"; } } }; tabs("tag","tagContent");//你想實現tab切換的某一個實例。

上面用到了chidren，可以用childNodes來實現該方法，但是要去除里面空白節點。代碼如下：

function tabs(title,content){ var tag=document.getElementById(title).childNodes; console.log(tag.length);// 打印結果為7 for(var i=0;i<tag.length;i++){ if(tag[i].nodeType==3 && /\s/.test(tag[i].nodeValue)){ tag[i].parentNode.removeChild(tag[i]); } } console.log(tag.length);// 打印結果為3 var content=document.getElementById(content).childNodes; console.log(content.length);// 打印結果為7 for(var i=0;i<content.length;i++){ if(content[i].nodeType==3&&/\s/.test(content[i].nodeValue)){ content[i].parentNode.removeChild(content[i]); } } console.log(content.length);// 打印結果為3  content[0].style.display = "block"; //默認顯示第一個標簽的內容 var len= tag.length; for(var i=0; i<len; i++){ //無論點擊誰都能實現當前顯示，其余隱藏 tag[i].number=i; tag[i].onclick = function(){ //0級DOM的事件句柄注冊 for(var n=0; n<len; n++) {//首先將全部的div隱藏 tag[n].className=""; content[n].style.display="none"; } tag[this.number].className = "current"; content[this.number].style.display = "block"; } } }; tabs("tag","tagContent");

2.jQuery實現點擊radio，當選中‘其它’時，顯示后面輸入框；否則隱藏

有時候會遇到這么一個很簡單的功能：

jquery實現點擊radio，當選中‘其它’時，顯示后面輸入框；否則隱藏

html代碼：

<div> <input type="radio" name="rd" class="same" value='選項二' >選項一 <input type="radio" name="rd" class="same" value='選項二'>選項二 <input type="radio" name="rd" class="same others" value='其它'>其它 <input type="text" name="txt" class="txt" value=""/> </div>

jquery代碼：

$(function(){ $(".same").click(function(){ $(this).siblings().attr("checked",false); $(this).attr("checked",true); if($(this).attr("class").indexOf('others')>=0){ $(this).siblings('.txt').show(); } else{ $(".others").siblings('.txt').hide(); } }); })

注釋： if語句也可以使用if($(this).hasClass("others"))進行判斷。

如果你有更好的解決辦法請留言交流，謝謝！

 看了網友的回復，css其實是最簡單的：

.others ~ input[type='text'] {
    display:none;
}
.others:checked ~ input[type='text'] {
    display:inline;
}

注：但是但是IE9以下低版本不支持。

3.jQuery,JS實現驗證聚焦，失焦

jquery實現驗證聚焦，失焦方法

遍歷該頁面中的input框，獲取輸入框中的val值，當該輸入框聚焦的時候跟存放的oldValue值進行比較，如果值相同，就把該值變為空，失焦的時候，把原來存放的值再次賦值到val上，具體代碼如下：

$(function(){ $("input[class*=input]").each(function(){ var oldValue=$(this).val(); $(this).focus(function(){ if($(this).val()==oldValue){ $(this).val(''); } }) .blur(function(){ if($(this).val()==""){ $(this).val(oldValue) } }) }); })

直接在input元素上添加

<input type="text" onfocus="if(this.value=='聚焦吧') this.value='';" onblur="if(this.value=='') this.value='聚焦吧';" value="聚焦吧" name="name">

原生JS實現

<input type="text" value="聚焦吧" id="myinput" /> <script type="text/javascript"> function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); }else{ element.attachEvent("on" + e,fn); } } var myinput = document.getElementById("myinput"); addListener(myinput,"focus",function(){ myinput.value = ""; }) addListener(myinput,"blur",function(){ myinput.value = "聚焦吧"; }) </script>

4.地址欄鏈接與a標簽鏈接匹配

如題所述，當出現這樣的功能，點擊某個鏈接后，給跳轉后的該鏈接地址添加樣式，通過添加class為current來增加特殊樣式。

如圖所示：點擊HTML+css3跳轉后，給其添加如圖樣式：

jquery代碼如下：

var currUrl = window.location.href; var currStyle = function (links){ links.each(function(){ var url = $(this).attr('href'); if (currUrl.indexOf(url) != -1){ $(this).addClass("current"); return false; } }); }

怎樣調用呢？如下jquery調用代碼：

$(function(){ currStyle($("#sidebar .list a")); })

 5.禁用鼠標右鍵

$(document).ready(function() {
    $(document).on("contextmenu", function(e) {
        return false;
    });
});

6.判斷元素是否存在

if($("#someDiv").length) {
    // yes it does, do something...
}

7.讓內容閃爍起來

function index(){
    $('.name').css('color','#03a9f4');  //默認值
    setTimeout(" $('.name').css('color','#fF0000')",100); //第一次閃爍
    setTimeout( "$('.name').css('color','#ccc')",200); //第二次閃爍
};
window.setInterval(index, 400); //讓index 多久循環一次 

可參考效果：《jQuery效果之jQuery Color animation 色彩動畫擴展》

8.jQuery 1.9之前探測瀏覽器

jQuery 從 1.9 版開始，移除了 $.browser 和 $.browser.version ，在高版本庫中不要使用該方法。

// Safari
if( $.browser.safari ){
    //do something
}
//Above IE6
if ($.browser.msie && $.browser.version > 6 ){
    //do something
}
// IE6 and below
if ($.browser.msie && $.browser.version < 6 )  {
    //do something
}

 9.jQuery對象與dom對象的相互轉換

jQuery對象轉成DOM對象

兩種轉換方式將一個jQuery對象轉換成DOM對象：[index]和.get(index);

(一)jQuery對象是一個數據對象，可以通過[index]的方法，來得到相應的DOM對象。例如：

 

var $v =$("#v") ; //jQuery對象
var v=$v[0]; //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中

 

(2)jQuery本身提供，通過.get(index)方法，得到相應的DOM對象。例如：

var $v=$("#v"); //jQuery對象
var v=$v.get(0); //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中

DOM對象轉成jQuery對象

對於已經是一個DOM對象，只需要用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。例如：

 

var v=document.getElementById("v"); //DOM對象
var $v=$(v); //jQuery對象

 10.jquery ajax上傳file文件以及下載文件

formData對象實現文件上傳

var curEvent = event.currentTarget;
var formData = new FormData();
formData.append('filePath', curEvent.files[0]);
var req = new XMLHttpRequest();
req.open("post", "baseUrl", false);
req.send(formData);

formData結合jquery ajax實現文件上傳

var curEvent = event.currentTarget;
var formData = new FormData();
formData.append('filePath', curEvent.files[0]);
 $.ajax({
      url:baseUrl,
        type:'post',
        data:formdata,
        dataType: "json",
        cache: false,//上傳文件無需緩存 
        processData: false,  // 不處理數據
        contentType: false, // 不設置內容類型
        success:function(result){
                
        },
        error:function(e){
                    
        }
});

jquery與form結合實現文件下載功能

var form = $('<form style="display:none;"  method="post" enctype="multipart/form-data" action="'+baseUrl+'"></form>');
var inputValueIds = $("<input type='hidden' name='inputvalue' value='"+inputValue+"'>");
$("body").append(form);
form.append(inputValueIds);
form.submit();
form.remove();