[工作总结]jQuery在工作开发中常用代码片段集锦(1-10)

前端开发 作者: 2024-08-20 18:50:02
1.jQuery,JS实现tab切换 原生JS实现 HTML代码如下: CSS代码: JS代码: 上面用到了chidren,可以用childNodes来实现该方法,但是要去除里面空白节点。代码如下:

原生JS实现

<div class="wrap">
    ul id="tag">
      li ="current" >标签一</li>标签二>标签三>
   ul="tagContent"div> 内容一br>内容一 > 内容二>内容二 > 内容三>内容三 >
>
*{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{#ccc; }
#tagContent div{1px solid #000; border-top: height:300px; display:none; }
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的事件句柄注册
           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切换的某一个实例。
var tag=document.getElementById(title).childNodes; 
     console.log(tag.length); 打印结果为7 
     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
    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";  tag.length; 
    
  无论点击谁都能实现当前显示,其余隐藏 
    tag[i].number=i;
    tag[i].onclick = function(){ 0级DOM的事件句柄注册

           var n=0; n<len; n++) {; 
            }   
        tag[; 
        content[; 
      } 
    }
};
tabs("tag","tagContent");
>
 input type="radio" name="rd" class="same" value='选项二' >选项一
 ='选项二'选项二
 ="same others"='其它'其它
 ="text"="txt"=""/> 
>
$((){

    $(".same").click((){
       $(this).siblings().attr("checked",false);
       $(this).attr("checked",1)">true);  
        if($(this).attr("class").indexOf('others')>=0){  
            $(this).siblings('.txt').show();
        }
        else{
            $(".others").siblings('.txt').hide();
        }
    });
})
.others ~ input[type='text'] {
    display:none;
}
.others:checked ~ input[type='text'] {
    display:inline;
}

jquery实现验证聚焦,失焦方法

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

})

直接在input元素上添加

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

原生JS实现

 id="myinput" script ="text/javascript" addListener(element,e,fn){ 
    if(element.addEventListener){ 
         element.addEventListener(e,fn,1)">); 
    }{ 
        element.attachEvent("on" + e,fn); 
    } 
} 
var myinput = document.getElementById(myinput); 
addListener(myinput,1)">focus,1)">(){ 
    myinput.value = ""; 
}) 
addListener(myinput,1)">blur聚焦吧; 
})
script>
var currUrl = window.location.href;
var currStyle =  (links){
  links.each((){
       var url = $(this).attr('href');
       if (currUrl.indexOf(url) != -1this).addClass("current");
            return ;
       }
  });
}
$((){
   currStyle($("#sidebar .list a"));
})
$(document).ready(function() {
    $(document).on("contextmenu",1)">(e) {
        return false;
    });
});
if($("#someDiv").length) {
    // yes it does,do something...
}
 index(){
    $('.name').css('color','#03a9f4');  默认值
    setTimeout(" $('.name').css('color','#fF0000')",100); 第一次闪烁
    setTimeout( "$('.name').css('color','#ccc')",200); 第二次闪烁
};
window.setInterval(index,400); 让index 多久循环一次 
 Safari
if( $.browser.safari ){
    do something
}
Above IE6
if ($.browser.msie && $.browser.version > 6 ){
     IE6 and below
if ($.browser.msie && $.browser.version < 6 )  {
    do something
}

jQuery对象转成DOM对象

var $v =$("#v") ; jQuery对象
var v=$v[0]; DOM对象
alert(v.checked) 检测这个checkbox是否被选中
var $v=$("#v"); var v=$v.get(0); 检测这个checkbox是否被选中

DOM对象转成jQuery对象

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

formData对象实现文件上传

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

formData结合jquery ajax实现文件上传

]);
 $.ajax({
      url:baseUrl,type:'post'false,1)">上传文件无需缓存 
        processData:  不处理数据
        contentType:  不设置内容类型
        success:(result){
                
        },error:(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();
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65665.html