第一百三十一节，JavaScript，封装库--CSS

JavaScript，封装库--CSS

将封装库里的方法，改成了原型添加方法

增加4个方法

tian_jia_class()方法，给获取到的元素添加class属性，参数是class属性值，可以连缀1

yi_chu_class()方法，给获取到的元素移除class属性，参数是要移除的class属性值，可以连缀2

she_zhi_link_css()方法，设置link连接、或style内嵌、中的CSS样式3

yi_chu_link_css()方法，移除link连接、或style内嵌、中的CSS样式4

封装库代码5

/**
 *feng_zhuang_ku_1.0版本，js封装库，2016/12/29日：林贵秀
 **/

/** 前台调用
 * 每次调用$创建库对象,使其每次调用都是独立的对象
 **/
var $ = function () {
    return new feng_zhuang_ku();
};

/**
 *定义封装库构造函数，类库
 **/
function feng_zhuang_ku() {
    /** jie_dian属性，创建数组，初始化，保存获取到的元素节点，返回数组
     **/
    this.jie_dian = [];
}

/**对象说明：
 * this表示对象本身
 * 使用库，首先要  $()  创建对象
 * 再在创建的对象下调用方法或者属性
 *
 * 大纲：
 * 获取元素标签开始，行号18
 * 元素节点操作开始，行号64
 *
 *
 **/

/**------------------------------------------------获取元素标签开始--------------------------------------------**/
/**获取元素标签说明：
 * jie_dian属性，保存获取到的元素节点，返回数组,
 * huo_qu_id()方法，通过id获取元素标签，适用于获取单个节点，
 * huo_qu_name_zhi()方法，通过元素name值获取指定元素，适用于获取表单元素,
 * huo_qu_name()方法，通过标签名称获取相同标签名的元素，
 * huo_qu_class()方法，获取相同class属性的节点，将获取到的节点添加到jie_dian属性
 * guo_lv_jie_dian()方法，获取多个节点时，过滤jie_dian属性里的数组，就是过滤掉指定索引外的元素对象
 **/

/** huo_qu_id()方法,通过id获取元素标签，参数是id值，将获取到的元素对象添加到，jie_dian属性,适用于获取单个节点
 **/
feng_zhuang_ku.prototype.huo_qu_id = function (id) {
    this.jie_dian.push(document.getElementById(id));
    return this;
};

/** huo_qu_name_zhi()方法，通过元素name值获取指定元素，参数是元素name值，返回元素相同name值对象集合，
 * 循环元素集合，将每次循环到的元素对象添加到 jie_dian属性，适用于获取表单元素
 **/
feng_zhuang_ku.prototype.huo_qu_name_zhi = function (name) {
    var name_zhi = document.getElementsByName(name);
    for (var i = 0; i < name_zhi.length; i++) {
        this.jie_dian.push(name_zhi[i]);
    }
    return this;
};

/** huo_qu_name()方法，通过标签名称获取相同标签名的元素，
 * 两个参数：获取指定id下的相同标签元素，参数1标签名称，参数2指定区域id值
 * 一个参数：获取页面所有相同标签元素，参数是标签名称
 **/
feng_zhuang_ku.prototype.huo_qu_name = function (tag, idname) {
    var node = null;
    if (arguments.length == 2) {
        node = document.getElementById(idname);
    } else {
        node = document;
    }
    var name = node.getElementsByTagName(tag);
    for (var i = 0; i < name.length; i++) {
        this.jie_dian.push(name[i]);
    }
    return this;
};

/** huo_qu_class()方法，获取相同class属性的节点，将获取到的节点添加到jie_dian属性
 * 一个参数：获取整个页面指定的class属性节点，参数是class属性值
 * 两个参数：获取指定id区域里的class属性节点，参数1是class属性值，参数2是指定区域的id值
 **/
feng_zhuang_ku.prototype.huo_qu_class = function (name, idname) {
    var node = null;
    if (arguments.length == 2) {
        node = document.getElementById(idname);
    } else {
        node = document;
    }
    var all = node.getElementsByTagName(‘*‘);
    for (var i = 0; i < all.length; i++) {
        if (all[i].className == name) {
            this.jie_dian.push(all[i]);
        }
    }
    return this;
};

/** guo_lv_jie_dian()方法，获取多个节点时，过滤jie_dian属性里的数组，就是过滤掉指定索引外的元素对象
 * 参数是要保留jie_dian属性里的对象索引
 **/
feng_zhuang_ku.prototype.guo_lv_jie_dian = function (num) {
    var element = this.jie_dian[num];
    this.jie_dian = [];
    this.jie_dian[0] = element;
    return this;
};

/**------------------------------------------------获取元素标签结束--------------------------------------------**/

/**------------------------------------------------元素节点操作开始--------------------------------------------**/
/**素节点操作说明：
 * css()方法，给获取到的元素设置ss样式,或者获取css样式，
 * wen_ben()方法，给获取到的元素设置文本，或者获取文本
 * click()方法，给获取到的元素添加一个点击事件，参数是一个匿名函数（包含函数功能），
 * tian_jia_class()方法，给获取到的元素添加class属性，参数是class属性值，可以连缀
 * yi_chu_class()方法，给获取到的元素移除class属性，参数是要移除的class属性值，可以连缀
 * she_zhi_link_css()方法，设置link连接、或style内嵌、中的CSS样式
 * yi_chu_link_css()方法，移除link连接、或style内嵌、中的CSS样式
 **/

/** css()方法，给获取到的元素设置ss样式,或者获取css样式，
 * 两个参数：设置样式，参数1样式名称，参数2样式值,设置的行内样式
 * 一个参数：获取样式，参数是样式名称，无法连缀，获取即可用获取行内也可以获取连接
 **/
feng_zhuang_ku.prototype.css = function (attr, value) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (arguments.length == 1) {
            if (typeof window.getComputedStyle != ‘undefined‘) {  //w3c
                return window.getComputedStyle(this.jie_dian[i], null)[attr];
            } else if (typeof this.jie_dian[i].currentStyle != ‘undefined‘) {  //ie
                return this.jie_dian[i].currentStyle[attr];
            }
        } else {
            this.jie_dian[i].style[attr] = value;
        }
    }
    return this;
};

/** wen_ben()方法，给获取到的元素设置文本，或者获取文本
 * 有参：设置文本，参数是要设置的文本字符串。
 * 无参：获取文本。无法连缀
 **/
feng_zhuang_ku.prototype.wen_ben = function (str) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (arguments.length == 0) {
            return this.jie_dian[i].innerHTML;
        }
        this.jie_dian[i].innerHTML = str;
    }
    return this;
};

/** click()方法，给获取到的元素添加一个点击事件，参数是一个匿名函数（包含函数功能），
 * 循环jie_dian属性里的节点，将每次循环的节点添加元素点击事件
 **/
feng_zhuang_ku.prototype.click = function (fu) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        this.jie_dian[i].onclick = fu;
    }
    return this;
};

/** tian_jia_class()方法，给获取到的元素添加class属性，参数是class属性值，可以连缀
 **/
feng_zhuang_ku.prototype.tian_jia_class = function (classname) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (!this.jie_dian[i].className.match(new RegExp(‘(\\s|^)‘ + classname + ‘(\\s|$)‘))) {
            this.jie_dian[i].className += ‘ ‘ + classname;
        }
    }
    return this;
};

/** yi_chu_class()方法，给获取到的元素移除class属性，参数是要移除的class属性值，可以连缀
 **/
feng_zhuang_ku.prototype.yi_chu_class = function (classname) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (this.jie_dian[i].className.match(new RegExp(‘(\\s|^)‘ + classname + ‘(\\s|$)‘))) {
            this.jie_dian[i].className = this.jie_dian[i].className.replace(new RegExp(‘(\\s|^)‘ + classname + ‘(\\s|$)‘), ‘ ‘);
        }
    }
    return this;
};

/** she_zhi_link_css()方法，设置link连接、或style内嵌、中的CSS样式
 * 在Web应用中，很少用到添加CSS规则和移除CSS规则，一般只用行内和Class；因为添加和删除原本的规则会破坏整个CSS的结构，所以使用需要非常小心。
 * 直接在库对象下使用  如：$().she_zhi_link_css()
 * 四个参数：
 * 参数1，样式表索引位置，就是要操作的样式表位置索引，第几个样式表【数值】
 * 参数2，要添加的选择器名称，【字符串】
 * 参数3，要添加的样式名称和值，如：background:#ff2a16 【字符串】
 * 参数4，将样式和选择器添加到样式表什么位置，【数值】
 **/
feng_zhuang_ku.prototype.she_zhi_link_css = function (num, selectorText, cssText, position) {
    var sheet = document.styleSheets[num];
    if (typeof sheet.insertRule != ‘undefined‘) {
        sheet.insertRule(selectorText + "{" + cssText + "}", position);
    } else if (typeof sheet.addRule != ‘undefined‘) {
        sheet.addRule(selectorText, cssText, position);
    }
    return this;
};

/** yi_chu_link_css()方法，移除link连接、或style内嵌、中的CSS样式
 * 在Web应用中，很少用到添加CSS规则和移除CSS规则，一般只用行内和Class；因为添加和删除原本的规则会破坏整个CSS的结构，所以使用需要非常小心。
 * 直接在库对象下使用
 * 两个参数：
 * 参数1，样式表索引位置，就是要操作的样式表位置索引，第几个样式表【数值】
 * 参数2，删除样式表里的第几个选择器【数值】
 **/
feng_zhuang_ku.prototype.yi_chu_link_css = function (num, position) {
    var sheet = document.styleSheets[num];
    if (typeof sheet.deleteRule != ‘undefined‘) {
        sheet.deleteRule(position);
    } else if (typeof sheet.removeRule) {
        sheet.removeRule(position);
    }
    return this;
};
/**------------------------------------------------元素节点操作结束--------------------------------------------**/

前台调用代码6

//前台调用代码
window.onload = function (){
    /*
    $().huo_qu_class(‘hj‘,‘a‘).guo_lv_jie_dian(0).css(‘color‘,‘#ff2a16‘);
    $().huo_qu_class(‘hj‘,‘a‘).guo_lv_jie_dian(1).css(‘color‘,‘#ff2a16‘);
    $().huo_qu_class(‘hj‘,‘a‘).guo_lv_jie_dian(2).css(‘color‘,‘#ff2a16‘);
    $().huo_qu_class(‘hj‘,‘a‘).guo_lv_jie_dian(3).css(‘color‘,‘#ff2a16‘);
    $().huo_qu_class(‘hj‘,‘a‘).wen_ben(‘重置‘);
    $().huo_qu_class(‘hj‘,‘b‘).tian_jia_class(‘b‘).tian_jia_class(‘c‘).tian_jia_class(‘d‘).yi_chu_class(‘b‘).yi_chu_class(‘c‘).yi_chu_class(‘d‘);
*/
    $().huo_qu_id(‘li‘).css(‘background-color‘,‘#ff2a16‘);
    $().huo_qu_id(‘li2‘).css(‘background-color‘,‘#fff133‘);
};
 
时间： 2024-10-25 22:08:30

第一百三十一节，JavaScript，封装库--CSS的相关文章

第一百六十一节，封装库--JavaScript，完整封装库文件

封装库--JavaScript,完整封装库文件 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象,使其每次调用都是独立的对象 * $()创建库对象,有一个可选参数,参数有两种方式,1是传入的this,2是传入的字符串 * 可选参数说明: * 传入的this,this,就是当前对象本身 * * 传入的字符串,代表获取元素选择器 * 参数是元素选择器(id值.class值.标签名称)其中一样的字符串

第一百五十三节，封装库--JavaScript，表单验证--备注字数验证

封装库--JavaScript,表单验证--备注字数验证 效果图

第一百二十一节，JavaScript事件绑定及深入

JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充

第二百三十一节，Bootstrap 介绍

Bootstrap 介绍 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 本节课我们主要了解一下 Boostrap 历史.特点.用途,以及为什么选择 Boostrap 来开 发我们的 Web 项目. 一．Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可

一起talk C栗子吧（第一百三十一回：C语言实例--C程序内存布局三）

各位看官们,大家好.上一回中咱们说的是C程序内存布局的样例,这一回咱们继续说该样例.闲话休提,言归正转.让我们一起talk C栗子吧. 看官们,关于C程序内存布局的样例,我们在前面的两个章回都介绍过了,这一回我们将对前面章回中的内容进行总结和提示. 内存布局总结 C程序的内存布局主要有四个分区:代码区,数据区(data和bss).堆区和栈区.能够使用readelf -S filename查看各个分区的内存地址.这四个分区在内存中从低地址空间開始依次向高地址延伸.我们再次使用前面章回中的图直观地展

第一百三十一天 how can I 坚持

该怎么办. 搞不懂自己. 不想放弃,可是.. 好傻. 我真的有那么好嘛?处处为别人着想. 是虚伪嘛? 今天查了下住房公积金,好少啊,想买房. 感觉毕业三年变化了好多. 曾经.. 现在.. 未来.. 搞不懂自己.一辈子. 睡觉奥.

第三百三十节，web爬虫讲解2—urllib库爬虫—实战爬取搜狗微信公众号

第三百三十节,web爬虫讲解2-urllib库爬虫-实战爬取搜狗微信公众号 封装模块 #!/usr/bin/env python # -*- coding: utf-8 -*- import urllib from urllib import request import json import random import re import urllib.error def hq_html(hq_url): """ hq_html()封装的爬虫函数,自动启用了用户代理和ip

第三百七十一节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现我的搜索以及热门搜索

第三百七十一节,Python分布式爬虫打造搜索引擎Scrapy精讲-elasticsearch(搜索引擎)用Django实现我的搜索以及热门 我的搜素简单实现原理我们可以用js来实现,首先用js获取到输入的搜索词设置一个数组里存放搜素词,判断搜索词在数组里是否存在如果存在删除原来的词,重新将新词放在数组最前面如果不存在直接将新词放在数组最前面即可,然后循环数组显示结果即可 热门搜索实现原理,当用户搜索一个词时,可以保存到数据库,然后记录搜索次数,利用redis缓存搜索次数最到的词,过一段时间更新

第三百二十一节，Django框架，发送邮件

第三百二十一节,Django框架,发送邮件 全局配置settings.py EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' #发送邮件引擎 EMAIL_USE_TLS = False #是否以https方式 EMAIL_HOST = 'smtp.163.com' #邮件smtp服务器 EMAIL_PORT = 25 #端口 EMAIL_HOST_USER = '[email protected]' #发件人 EMAIL_