学习
实践
活动
工具
TVP
写文章

jq:tab栏切换(addClass+removeClass)

mouseenter(function () { //不用判断,当前的li添加active类,其他的删除active类 $(this).addClass //对应索引值的div添加selected类,其他的删除selected类 $(".products>div").eq($(this).index()).addClass

9930

jQuery源码解析之addClass(),removeClass(),toggleClass()和hasClass()

一、$().addClass() 作用: 向目标元素添加一个或多个类名 源码: //向目标元素添加一个或多个类名 //源码8401行 addClass: function( value ) { var classes, elem, cur, curValue, clazz, j, finalValue, i = 0; //如果addClass( 作用是获取多个目标元素的下标; // currentClass 对应 getClass(this),作用是获取当前元素的类名,方便加空格 jQuery( this ).addClass { var tokens = value.match( rnothtmlwhite ) || []; return tokens.join( " " ); } 综上: 可以看到 addClass this.addClass( value ) : this.removeClass( value ); } //同上 if ( isFunction( value )

13730
  • 广告
    关闭

    年末·限时回馈

    热卖云产品年终特惠,2核2G轻量应用服务器6.58元/月起,更多上云必备产品助力您轻松上云

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jQuery的addClass、siblings、removeClass、each、html、eq、showhide用法

    $(this).addClass(‘class’):为当前元素添加’class’类(供选择器使用 - - ) $(this).siblings(‘class’):查找当前元素的所有类名为 “class” (同胞就是拥有相同的父元素) $(this).removeClass(‘class’):为当前元素去除’class’类,与addClass作用相反 $(this).addClass(‘class’).siblings (‘class’).removeClass(‘class’):作用是 给当前元素添加’class’类并查找同胞元素再去除同胞元素的’class’类 addClass() siblings() removeClass () each() $('.tab li:first').addClass('tabli');//给第一个li追加 tabli //each遍历元素 $(".tab li").each(function () { $(this).click(function () { //点击事件 //当点击自身的时候添加tabli,及删除同级的tabli $(this).addClass

    11630

    typeof运算符及实现jquery中的addClass,removeClass,hasClass

    “number” 表示这个值是数字 “object” 表示这个值是对象或null,可理解为null是对象的占位符 “function” 表示这个值是函数 三、JavaScript实现jQuery中的addClass function hasClass(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } function addClass '(\\s|^)'+cls+'(\\s|$)'); ele.className=ele.className.replace(reg,' '); } } //call the functions addClass

    24431

    情人节程序员用HTML网页表白【七夕活动邀请函手机动态模板】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

    $(".img1_4").addClass("yezia").css("opacity", 1); $(".img1_5").addClass("yezib").css(" opacity", 1); $(".img1_6").addClass("yezic").css("opacity", 1); $(".img1 _7").addClass("yezid").css("opacity", 1); $(".img1_8").addClass("yezie").css("opacity" ("biankuang").css("opacity", 0.5); $(".img8_3").stop(true, true).addClass("tu1 $(".img8_6").stop(true, true).addClass("yezic").css("opacity", 1); $(".img8_7"

    9730

    前台分页,以及类别选择

    ("disabled"); opts.nextPage.addClass("disabled"); opts.lastPage.addClass("disabled"); opts.nextPage.addClass("disabled"); ("disabled"); opts.nextPage.addClass("disabled"); if ("disabled"); opts.nextPage.addClass("disabled"); that.find(" opts.lastPage.addClass("disabled"); opts.nextPage.addClass("disabled");

    73140

    jQuery - 获取并设置 CSS 类

    我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } jQuery addClass 当然,在添加类时,您也可以选取多个元素: 实例 $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass ("important"); }); 您也可以在 addClass() 方法中规定多个类: 实例 $("button").click(function(){ $("body div:first"). addClass("important blue"); }); jQuery removeClass() 方法 下面的例子演示如何在不同的元素中删除指定的 class 属性: 实例 $("button"

    17630

    CSS+JS实现图片集展示(续)

    imgIndex=1; length = imgUrls.length; var play; var imgList = $("

    ").addClass ("thumb-a"); if(i>0){ aImg.addClass("thumb-a-hide"); } var img = $("").addClass("thumb-img"); winHeight = $(window).height(); var modalBg = $("
    "); modalBg.addClass title.addClass("title"); title.append(titleTipsBg) .append(titleTips

    41520

    jq使用建议

    ('class1') $(target).html('文本内容') //建议,不超过四个操作写在同一行,超过四个可以考虑每四个换行 $(target).addClass('class1').html(' ('active') //建议,使用siblings() $(this).addClass('active').siblings().removeClass("active") 认识漏洞 选择多元素操作 //不建议 $(".demo1").addClass('class1') $(".demo2").addClass('class1') //建议,同一类操作可以同时筛选并进行 $(".demo1,.demo2 ").addClass('class1') 添加与移除样式 //不建议 $(".demo1").addClass('class1').addClass('class2') //建议,添加以及移除样式可以支持多个 ,空格隔开即可 $(".demo1").addClass('class1 class2').removeClass("class1 class2") 数据存储与使用 我们都知道jq封装了针对数据使用的.

    24110

    自定义alert提示框

    var winWidth = $(window).width(),winHeight = $(window).height(); var modal = $("

    butterfly主题实现白天夜晚切换动画

    ($('body').addClass('DarkMode'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('# ($('body').addClass('DarkMode'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('# ($('body').addClass('DarkMode'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('# ('isDark', '1'), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr( '), $('#changeMode-top').removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('xlink:href',

    14430

    jquery怎么添加类和移除类

    jquery中可用addClass()和removeClass()来添加类和移除类。 addClass()向被选元素添加一个或多个类,语法“(selector).addClass(类名)”,如需添加多个类,就使用空格分隔类名。 jquery添加类和移除类的方法 方法 描述 addClass() 向匹配的元素添加指定的类名。 removeClass() 从所有匹配的元素中删除全部或者指定的类。 jquery addClass()添加类 addClass() 方法向被选元素添加一个或多个类。 该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。 语法: 1 $(selector).addClass(class) 参数 描述 class 必需。规定一个或多个 class 名称。

    7850

    【 web网页设计期末课程大作业】基于HTML+CSS+JavaScript智慧路灯综合管理系统

    ("logo1"); navbar.addClass("navbar1"); left_Side.addClass("left-side1 "); header.addClass("header1"); treeview_menu.addClass("treeview-menu1 ("logo2"); navbar.addClass("navbar2"); left_Side.addClass("left-side2 ("logo3"); navbar.addClass("navbar3"); left_Side.addClass("left-side3 ("logo4"); navbar.addClass("navbar4"); left_Side.addClass("left-side4

    9420

    轮播图jQuery

    var i=0; //功能1: 鼠标悬浮到图标的位置时实现切换 $(".num li").mouseover(function () { $(this).addClass ); i=$icon_index; $(".img li").eq($icon_index).removeClass("hide").siblings().addClass foo() { if(i==5){ i=-1 } i++; $(".num li").eq(i).addClass active").siblings().removeClass("active"); $(".img li").eq(i).removeClass("hide").siblings().addClass active").siblings().removeClass("active"); $(".img li").eq(i).removeClass("hide").siblings().addClass

    57220

    30·灵魂前端工程师养成-jQuery中的设计模式

    ('red') // this 就是 api .addClass('green') // this 就是 api .addClass('blue') // 链式操作  代码优化:那我们是不是可以把 代码如下: main.js jQuery('.test') // 不返回元素们,返回api对象 .addClass('red') // this 就是 api .addClass('green ') // this 就是 api .addClass('blue') // 链式操作 实现find函数 jQuery是构造函数么? ('blue') const api2 = api1.find('.child').addClass('red') api1.addClass('green')  jQuery('#xxx'). ('blue') .find('.child') .addClass('red') .addClass('green') .end() .addClass('yellow

    6020

    jQuery 之 元素节点操作滚轮事件与函数节流

    .points li'); var nowscreen = 0; var timer = null; $pages.eq(0).addClass $('.pages_con').animate({top:-nowscreen*$h},300); $pages.eq(nowscreen).addClass ('moving').siblings().removeClass('moving'); $points.eq(nowscreen).addClass('active') $('.pages_con').animate({top:-nowindex*$h},300); $pages.eq(nowindex).addClass ('moving').siblings().removeClass('moving'); $points.eq(nowindex).addClass('active').

    59860

    第八节dom以及dom库的封装

    : addClass, removeClass: removeClass, getclass: getclass, css: css } })() (olis[deIndex], "active"); utils.addClass(divList[deIndex], "active"); tabOption.onclick (utils.addClass(divList[i], "active"), utils.addClass(olis[i], "active")) : (utils.removeClass(divList (this.olis[this.deIndex], "active"); utils.addClass(this.divList[this.deIndex], "active") (utils.addClass(this.divList[i], "active"), utils.addClass(this.olis[i], "active")) : (utils.removeClass

    33120

    jQuery(操作Dom-样式操作)

    function fun1() { $("#idName").css({"width":"200px","height":"200px"}); } 注意:设置多个行内样式属性与设置一个中间的符号容易混淆; addClass ('className'):添加单个class样式(不是行内样式) function fun1() { $("#idName").addClass("c"); } 注意:"c"类名称,前面不需要加 "; addClass(“className1 className2 className3...”) :添加多个class样式 function fun1() { $("#idName").addClass("a c"); } 注意:两个类名称用空格隔开; removeClass(“className )); } 这个例子中指定元素类样式不包含d 所以它返回false toggleClass("className"):样式切换(当前元素有className样式时,调用removeClass,否则调用addClass

    7010

    学习zepto.js(对象方法)

    $("p").addClass("content title");// --> content title 还有一种调用方式是传入一个函数,函数可以接收到两个参数,第一个是当前循环到的下标,第二个是当前对象之前的 $('p1','p2','p3').addClass(function (index, oldClass) { return 'dynamic' + index; }); // p1 --> dynamic0 该方法判断第二个参数是否为function,如果是,就通过上下文(context)来执行,并传入两个参数,idx(下标),payload(在addClass里边,这个值为元素之前的className) 正则对象调用的test()方法会返回一个bool值,匹配成功为true,匹配失败为false; 最后在addClass方法中,调用className传入两个参数,第一个是元素对象,第二个是原有class ,第二个参数为true时,执行addClass,第二个参数为false时,执行removeClass(感觉用处不算太大额…) ?

    57280

    【 web网页设计期末课程大作业】基于HTML+CSS+JavaScript智慧路灯综合管理系统

    ("logo1"); navbar.addClass("navbar1"); left_Side.addClass("left-side1 "); header.addClass("header1"); treeview_menu.addClass("treeview-menu1 ("logo2"); navbar.addClass("navbar2"); left_Side.addClass("left-side2 ("logo3"); navbar.addClass("navbar3"); left_Side.addClass("left-side3 ("logo4"); navbar.addClass("navbar4"); left_Side.addClass("left-side4

    8620

    扫码关注腾讯云开发者

    领取腾讯云代金券