[工作总结]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();