jq全选反选取消代码(JQ实现简单得全选反选功能)
首发

jq全选反选取消代码(JQ实现简单得全选反选功能)

优质
请用语音读文章

使用jq写选项卡。告别了繁琐的循环以及命名规范

基础原理:

1.当某一个btn被选中时。将这种btn的背景颜色设为橘色。其余朋友btn背景颜色设为空(none)

2.如果子div与btn的索引相同。就将这种div展现而很多的朋友div掩藏

1).css函数参数2的回调函数方法;

2).原生get方法再转jq对象 再进行设置的方法

3).目前div使用show()方法。其余朋友div使用hide()方法

关键字:get() siblings() show() hide() css()

html页:

4个btn,4个div

<div id=”wrap”>

<button>btn1</button>

<button>btn2</button>

<button>btn3</button>

<button>btn4</button>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

</div>

css页:

大盒子目前无样式。在实际研究中需要指定其宽高;第一个btn背景色为橘黄色;第一个子项div展现。其余朋友div掩藏

#wrap div {

width: 300px;

height: 200px;

border: 1px solid red;

display: none;

}

#wrap div:nth-of-type(1) {

display: block;

/* 第一个子项div展现 */

}

#wrap button:nth-of-type(1) {

background: orange;

/* 第一个btn背景色为橘黄色; */

}

jQuery页:

1)首先给btn绑定事件

$(“#wrap button”).click(function() {

//当btn被点一下后发生的事件

})

关键字: click();

2) 当btn被点一下时。设置目前选中btn颜色为橘色。并且将很多的朋友btn背景色为空:

$(this).css(“background”, “orange”).siblings(“button”).css(“background”, “none”)

关键字: $(this); css(); siblings()

3) 声明一个变量。这种变量保存了被选中的btn的下标

var $index = $(this).index();

 关键字:$index; $(this);index();

// 1:寻找全部的子div。并且设置css样式。如果某个div的索引与btn的索引相同。就让他展现

$(“#wrap div”).css(“display”, function(i) {

if (i == $index) {

return “block”;

}

return “none”;

})

关键字:css() ; “display” ; i == $index;

b:通过get()方法将子div的索引与目前btn的索引绑定。之后再将这种索引转变成jq对象。再使用jq方法将对应div展现

1

$($(“#wrap div”).get($(this).index())).css(“display”, “block”).siblings(“div”).css(“display”, “none”)

由于get方法是js原生方法。所以应将其转成jq对象才能使用jq方法

关键字: $() ; $(this).index; get();css();siblings()

c:通过目前btn的索引绑定div的索引。进而将这种索引对应的div展现show(),并将其余的div朋友元素掩藏hide()

$(“#wrap div”).eq($(this).index()).show().siblings(“div”).hide();

关键字:eq();$(this).index();show();hide()

这样。就完成了使用jQuery方法实现选项卡。

以上就是由优质生活领域创作者 生活常识网 整理编辑的,如果觉得有帮助欢迎收藏转发~

分享到 :
相关推荐

比较香的植物有哪些(开花很香的植物有哪些)

请用语音读文章你知道有哪些植物有香味呢?很多人先想到的就是花了。当然大千世界无奇不[...

av女排行(排行榜Top1的APP)

请用语音读文章一家荷兰制片公司正在拍摄一部关于拉斯维加斯的下水管道居民的生活。却意[...

年龄大了为什么难怀孕(高龄女性为什么难以受孕)

请用语音读文章高龄产妇并不是只在生二胎的时候叫高龄产妇,而是指35岁及以上还从未生[...

好看的国产教育电影排行榜前十名(中国校园爱情电影排行榜前十名)

请用语音读文章教育是一种能够对于人的身体和心灵进行一个良好培养的社会实践活动。人的[...

发表评论

您的电子邮箱地址不会被公开。