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();

[工作总结]jQuery在工作开发中常用代码片段集锦(1-10)的更多相关文章

  1. Android 中常用代码片段

    一:AsyncTask 的使用 (1)activity_main.xml <TextView android:id="@+id/tvInfo" android:layout_ ...

  2. Android源码浅析(四)——我在Android开发中常用到的adb命令,Linux命令,源码编译命令

    Android源码浅析(四)--我在Android开发中常用到的adb命令,Linux命令,源码编译命令 我自己平时开发的时候积累的一些命令,希望对你有所帮助 adb是什么?: adb的全称为Andr ...

  3. (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

    (原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...

  4. .net开发中常用的第三方组件

    .net开发中常用的第三方组件 2013-05-09 09:33:32|  分类: dotnet |举报 |字号 订阅     下载LOFTER 我的照片书  |   RSS.NET.dll RSS. ...

  5. 依赖注入及AOP简述(十)——Web开发中常用Scope简介 .

    1.2.    Web开发中常用Scope简介 这里主要介绍基于Servlet的Web开发中常用的Scope. l        第一个比较常用的就是Application级Scope,通常我们会将一 ...

  6. spring注解开发中常用注解以及简单配置

    一.spring注解开发中常用注解以及简单配置 1.为什么要用注解开发:spring的核心是Ioc容器和Aop,对于传统的Ioc编程来说我们需要在spring的配置文件中邪大量的bean来向sprin ...

  7. 2019-2-20C#开发中常用加密解密方法解析

    C#开发中常用加密解密方法解析 一.MD5加密算法 我想这是大家都常听过的算法,可能也用的比较多.那么什么是MD5算法呢?MD5全称是 message-digest algorithm 5[|ˈmes ...

  8. 开发中常用的es6知识

    结合实际开发,开发中常用的es6的知识: 1.新增let和const命令: ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效: cons ...

  9. Android开发中常用的库总结(持续更新)

    这篇文章用来收集Android开发中常用的库,都是实际使用过的.持续更新... 1.消息提示的小红点 微信,微博消息提示的小红点. 开源库地址:https://github.com/stefanjau ...

随机推荐

  1. SQL Server表分区(水平分区及垂直分区)

    什么是表分区? 表分区分为水平表分区和垂直表分区,水平表分区就是将一个具有大量数据的表,进行拆分为具有相同表结构的若干个表:而垂直表分区就是把一个拥有多个字段的表,根据需要进行拆分列,然后根据某一个字 ...

  2. 背水一战 Windows 10 (82) - 用户和账号: 获取用户的信息, 获取用户的同意

    [源码下载] 背水一战 Windows 10 (82) - 用户和账号: 获取用户的信息, 获取用户的同意 作者:webabcd 介绍背水一战 Windows 10 之 用户和账号 获取用户的信息 获 ...

  3. Redis 学习笔记(十二)Redis 复制功能详解 ----- (error) READONLY You can't write against a read only slave

    Redis 复制(Replication)1. 复制介绍分布式数据库为了获取更大的存储容量和更高的并发访问量,会将原来集中式数据库中的数据分散存储到多个通过网络连接的数据存储节点上.Redis为了解决 ...

  4. APK防护——Anti_Virtual App的思路和实现

    作者:HAI_i 原文来自:https://bbs.ichunqiu.com/thread-42982-1-1.html 0×00 前言 Virtual App是一个很强大的存在,破坏了Android ...

  5. Hibernate入门1 - Hibernate概述及第一个小例子

    一.什么是ORM? ORM,即Object Relational Mapping.我们知道,利用面向对象的思想编写的数据库应用程序最终都是把对象信息保存在关系型数据库中,于是需要编写与底层数据库相关的 ...

  6. Servlet案例5:用户登录失败信息回显

    登录失败信息回显不会的新的一个页面,而是显示在登录页面 一种方法是: 登录页面表单中每个字段后添加<span>标签写入失败信息,利用ajax技术 通过改变<span>标签的di ...

  7. 分布式控制系统Git学习

    git : n. 饭桶,无用的人 github : n. 社交编程及代码托管网站 hub: n. 中心:毂:木片 Git是一个分布式版本控制软件,最初由林纳斯·托瓦兹(Linus Torvalds)创 ...

  8. python中的数字取整(ceil,floor,round)概念和用法

    python中的数学运算函数(ceil,floor,round)的主要任务是截掉小数以后的位数.总体来说 就是取整用的.只是三者之间有微妙的区别:   floor() :把数字变小 ceil() : ...

  9. Maven - 实例-4-依赖传递

    这里以Eclipse创建Maven工程来演示. Setp-1 创建Maven项目 File ---> New ---> Maven Project ---> 默认勾选"Us ...

  10. es6中的对象的可计算的属性名

    先简单的啰嗦一下对象的属性: var obj = { a:2 } 要访问obj中a的位置,方法:1. obj.a     //2            2..obj ["a"]   ...