`
ning_wenchao
  • 浏览: 2641 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

封装框架-类选择器 四种方法添加、移除、判断、替换

阅读更多
//封装框架类操作   1. addClass(添加类)
//                 2.removeClass(移除样式)
//                 3. hasClass(判断是否有这个样式)
//                 4.toggleClass(有这个类就移除,没有就添加个新的)

//例:itcast(div).addClass("类名")


//样式操作模块

    itcast.fn.extend({
       css:function(name,value){
           //第二个参数没有传入 ,而第一个参数是字符串
           if(value === undefined && typeof name ==="string"){
           //查询,有兼容问题 两种兼容
               if(window.getComputedStyle){
                    var styles = window.getComputedStyle(this[0]);
                   return styles[name];
               }else {
                   return this[0].currentStyle[name];
               }
           }

       // 如果设置了值
           this.each(function(){
               //第一个参数如果是 对象

               if(value === undefined && typeof name ==="object"){
                   for(var k in name){
                       this.style[k] = name[k];
                   }
               }else {
                    this.style[name] = value;
               }
           })

           return this;

       },
        //添加类样式
        addClass:function(cName){
            this.each(function(){
                var clsName = this.className;
                clsName +=" "+ cName;
                this.className = itcast.trim(clsName);
            })
            return this;
        },
    //    移除样式
        removeClass:function(cName){
            this.each(function(){

                var claName = " " +this.className+" ";
                claName = claName.replace(" "+cName+" "," ");
                console.log(claName);
                this.className = itcast.trim(claName);
            })

            return this;
        },
        //如果有这个类就返回true 没有就返回false
        hasClass:function(cName){
            var hasCls = false;
            this.each(function(){
                var claName = this.className;
                hasCls = (" "+claName+" ").indexOf(" "+cName+" ") !==-1;
                if(hasCls){
                    return false;
                }
            })
            return hasCls;
        },
        //判断是否有这个类有就移出,没有就添加一个新的
        toggleClass:function(cName){
            this.each(function(){
                if(itcast(this).hasClass(cName)){
                            itcast(this).removeClass(cName);
                }else{
                    itcast(this).addClass(cName);
                }
            })
        }
    });
分享到:
评论

相关推荐

    JSP微商城系统开发视频教程

    - Java Web开发框架的选择(如Spring MVC、Struts等); - 第三方库和工具包的集成(如MyBatis、Hibernate等); - 构建工具的使用(如Maven、Gradle等); - 服务器环境配置(如Tomcat、Jetty等)。 - **应用...

    ASP.Net.技巧收集.pdf

    - **方法二**: 使用封装的`DBHelper`类来调用存储过程。 - **比较**: - 直接调用适合简单的存储过程调用。 - 封装在`DBHelper`类中更便于维护和重用。 #### 3. 调用存储过程通用类`DBHelper` - **定义**: `...

    4.Jquery.docx

    - **类选择器**:`$(".class")` 用于选取具有特定类的所有元素。 - **组合选择器**:如 `$("div, p")` 可以同时选取所有 `<div>` 和 `<p>` 元素。 - **层级选择器** - 如 `$("ul li")` 选取所有 `<ul>` 下的 `...

    jQuery权威指南-源代码

    jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,极大地提高了他们的开发效率;此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样...

    java面试笔记整理,包含java,redis,kafka等

    - **NIO (Non-blocking I/O):** 同步非阻塞,使用选择器来监控多个通道的I/O状态。 - **AIO (Asynchronous I/O):** 异步非阻塞,发起I/O操作后,不需要等待其完成,可以继续执行其他任务。 #### 三十八、守护线程 ...

    Android 框架代码实例[参考]

    Fragment则可以在Activity中动态添加、移除或替换,使得UI设计更加灵活,尤其在平板和大屏幕设备上。 2. **Intent**:Intent是Android中用于启动其他组件(如Activity、Service)的信使,同时也用于传递数据。它...

    敏捷软件开发的必要技巧

    - **提取独立方法**:对于复杂的逻辑,可以将其封装为独立的方法,并通过方法名体现其功能。 - **重构类结构**:当注释描述的是类的功能时,考虑重新组织类结构。 **3. 示例解析** - 展示一段包含大量注释的代码...

    Mootools Cheat Sheet

    - **extend(baseo, othero)**: 扩展基础类并添加其他属性或方法。 - **Native(o)**: 用于原生对象的扩展。 - **Object(singleton)**: 创建单例对象。 #### 数组操作 - **Array.js**: 提供数组操作的相关方法。 - **...

    浅谈jQuery 选择器和dom操作

    移除元素可以使用“remove()”方法,而“replaceWith()”用于替换元素。除此之外,还可以用“clone()”复制元素,用“empty()”清空元素内的内容等。 以上知识点是jQuery选择器和DOM操作的精髓所在。掌握这些选择器...

    缓存框架:ehcache介绍

    2. **封装CacheManager**:封装ehcache自带的`CacheManager`类,以便更好地控制缓存的生命周期和行为。 3. **使用缓存注解**:在需要缓存的方法上使用`@Cacheable`、`@CachePut`和`@CacheEvict`等注解来标记方法的...

    VC++实例.pdf

    - **类的定义:** 类是一种抽象的数据类型,包含了属性和方法的集合。 - **构造函数与析构函数:** 构造函数用于初始化对象,析构函数在对象销毁时调用。 - **成员函数与成员变量:** 成员函数是类中的方法,成员...

    jq03课堂笔记.docx

    1. 快速高效的DOM遍历和选择器:jQuery 提供了一套强大的选择器语法,使得开发者能够方便地定位到页面中的任何元素。 2. 简化的事件处理:通过简单的`.on()`方法,可以轻松地为元素绑定事件监听器。 3. 动画支持:`...

    Ajax的框架之一prototype简单用法

    `Selectors`允许开发者使用CSS选择器来选取元素,使得选取更为便捷。 4. **AJAX功能**: Prototype的AJAX功能是其核心部分,它封装了XMLHttpRequest对象,提供了`Ajax.Request`和`Ajax.Updater`等类。`Ajax....

Global site tag (gtag.js) - Google Analytics