模仿jq里的选择器和color样式

 1 (function(){
 2             HTMLElement.prototype.css = function () {
 3             var option;
 4             if (arguments.length > 0) {
 5                 option = arguments[0];
 6                 if (2 === arguments.length) {
 7                     option = {}, option[arguments[0]] = arguments[1];
 8                 }
 9
10                 if (‘object‘ === typeof option) {
11                     for (var key in option) {
12                         if (option.hasOwnProperty(key)) {
13                             this.style[key] = option[key];
14                         }
15                     }
16                 }
17
18             }
19             console.dir(this)
20             return this;
21         };
22
23             function $id(id){
24                 return document.getElementById(id);
25             }
26             function $clas(cla){
27                 return document.getElementsByClassName(cla)[0];
28             }
29
30             window["$id"]=$id;
31             window["$clas"]=$clas;
32
33         })()
34
35         $id(‘get‘).onclick=function function_name () {
37                if (true) {
38                 $clas(‘dom‘).css(‘background‘,‘red‘);
39                };
40
41         }
时间: 2024-09-27 01:17:18

模仿jq里的选择器和color样式的相关文章

CSS 选择器及各样式引用方式介绍

引用自 :我们都是从菜鸟开始 CSS 选择器及各样式引用方式介绍 一个好的界面,是一个Web吸引人们最大的卖点. Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 1.选择器的分类 语法结构: 1.1 Id选择器 1.1.1 格式 #id :#+元素的id:id是区分大小写. 1.1.2 示例 #title1 {background-color:Blue;border-width:thick;} 1.2 Class 类选择器 1.2.1 格式

Css选择器(上) 让样式无孔不入

css选择器    一个可以选择样式的工具, 这里适用于无论是内部代码还是外部引用 abc.css 这类型的文件. 基本选择器*{ }        就是一个简单的*, 代表应用于全部. 不适合于个性化细致化处理的页面, 副作用是它会覆盖原有的style, 不管好坏 *和继承无关, 无论是否一级标签,是否子标签, 一律收到*的影响.(神一般)p{ }        元素选择器, 或者说是标签选择器. p可以是任何其他标签 #123{ }    id选择器, 如<a id ="123&quo

学习04-jq(jq的使用,jq的入口函数,jq与DOM的转换,基本选择器,层级选择器,设置样式,筛选选择器,筛选方法)

jq的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <scrip

JQ基础之选择器

JQ选择器与CSS/CSS3选择器非常类似,对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器. ID选择器 $('#one') ( '#'代表ID ) CLASS选择器 $('.two')   ( '.'代表类 ) 元素选择器 $('ul') ( 选取'ul'标签 ) $('#one>span') 属性选择器 $('[class]')    ( 所有具有'class'属性的元素 ) $('li[class]')           ( 选中'li'下的具有'class

jQuery基础(样式篇,DOM对象,选择器,属性样式)

1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. $(document).ready(function() {   内容  }); 1.jQuery对象与DOM对象   jQuery对象与DOM对象是不一样的 普通处理,通过标准JavaScript处理: var p = document.getElementById

用Unity模仿CSGO里的火焰效果

CSGO里的火焰效果和真实的情况比较像,能沿着遮挡物前进,如下是模仿效果. 思路比较简单,开始想的是一圈一圈发出去,但是前圈与后圈的联系不好做,换种思路,每个方向发射一条线,这样根据上一个位置的方位先向前进,如果前面有遮挡,则计算好新的位置与方向,反之前面没有遮挡,选择合适的位置,并从这个方向的上面向下检测,检测这个方向的垂直位置有没遮挡,如果有遮挡,计算新的方向与位置,没有,则表明延展不下去.如下图所示. 相关主要代码: //根据一条线的上一个节点,确定这个节点如何定位 bool forwar

jq基础2选择器1

html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title></title>    <!--<link href="css.css" type="text

css选择器的对比样式代码精简

通常就分为这三大类:* 选定所有对象.通配选择符(Universal Selector)通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用一.标签选择器,以开始标签作为选择器使用.二.id选择器以唯一标识符id属性识别(表示#name)#name{ font-size:16px;}三.class类选择器以不同于ID选择符的唯一性,类选择符可以同时定义多个(表示.name).name{ font-size:16px;}类选择符高级用法:多类选择符.a.b { c

css基础语法,简单选择器,文本样式2018/4/26

MDN-CSS 介绍 MDN-CSS如何工作 MDN-CSS 语法 MDN-选择器 MDN-简单选择器 MDN-属性选择器 MDN-基本文本和字体样式 color font-family font-style font-weight font-size text-align text-decoration text-indent line-height text-shadow 验证 今天代码部分其实比较简单,主要是多尝试,学习之后,回顾以下自己是否已经掌握以下概念: 什么是CSS,CSS是如何工