1.jQuery,JS实现tab切换
原生JS实现
HTML代码如下：
<div class="wrap">
ul id="tag">
li ="current" >标签一</li>标签二>标签三>
ul="tagContent"div> 内容一br>内容一 > 内容二>内容二 > 内容三>内容三 >
>
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{#ccc; }
#tagContent div{1px solid #000; border-top: 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的事件句柄注册
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来实现该方法，但是要去除里面空白节点。代码如下：
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");
2.jQuery实现点击radio，当选中‘其它’时，显示后面输入框；否则隐藏
有时候会遇到这么一个很简单的功能：
jquery实现点击radio，当选中‘其它’时，显示后面输入框；否则隐藏
html代码：
>
input type="radio" name="rd" class="same" value='选项二' >选项一
='选项二'选项二
="same others"='其它'其它
="text"="txt"=""/>
>
jquery代码：
$((){
$(".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();
}
});
})
注释： 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上，具体代码如下：
$((){
$("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>
4.地址栏链接与a标签链接匹配
如题所述，当出现这样的功能，点击某个链接后，给跳转后的该链接地址添加样式，通过添加class为current来增加特殊样式。
如图所示：点击HTML+css3跳转后，给其添加如图样式：
jquery代码如下：
var currUrl = window.location.href;
var currStyle = (links){
links.each((){
var url = $(this).attr('href');
if (currUrl.indexOf(url) != -1this).addClass("current");
return ;
}
});
}
怎样调用呢？如下jquery调用代码：
$((){
currStyle($("#sidebar .list a"));
})
5.禁用鼠标右键
$(document).ready(function() { $(document).on("contextmenu",1)">(e) { return false; }); });
6.判断元素是否存在
if($("#someDiv").length) { // yes it does,do something... }
7.让内容闪烁起来
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 ){ 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"); var v=$v.get(0); 检测这个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 = 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();
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。