还剩17页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
CSS选择器笔记
一、基本选择器序号选择器含义
1.*通用元素选择器,匹配任何元素
2.E标签选择器,匹配所有使用E标签的元素
3..infoclass选择器,匹配所有class属性中包含info的元素
4.#footerid选择器,匹配所有id属性等于footer的元素实例*{__rgin:0;padding:0;}p{font-size:2em;}.info{background:#ff0;}p.info{background:#ff0;}#info{background:#ff0;}p#info{background:#ff0;}
二、多元素的组合选择器序号选择器含义
5.EF多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
6.EF后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
7.EF子元素选择器,匹配所有E元素的子元素F
8.E+F毗邻元素选择器,匹配所有紧随E元素之后的同级元素F实例divp{color:#f00;}#n__li{display:inline;}#n__a{font-weight:bold;}divstrong{color:#f00;}p+p{color:#f00;}
三、CSS
2.1属性选择器序号选择器含义
9.E[att]匹配所有具有att属性的E元素,不考虑它的值(注意E在此处可以省略,比如“[cheacked]”以下同)
10.E[att=val]匹配所有att属性等于“val”的E元素
11.E[att~=val]匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
12.E[att|=val]匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等实例p[title]{color:#f00;}div[class=error]{color:#f00;}td[headers~=col1]{color:#f00;}p[lang|=en]{color:#f00;}blockquote[class=quote][cite]{color:#f00;}
四、CSS
2.1中的伪类序号选择器含义
13.E:first-child匹配父元素的第一个子元素
14.E:link匹配所有未被__的链接
15.E:visited匹配所有已被__的链接
16.E:active匹配鼠标已经其上按下、还没有释放的E元素
17.E:hover匹配鼠标悬停其上的E元素
18.E:focus匹配获得当前焦点的E元素
19.E:langc匹配lang属性等于c的E元素实例p:first-child{font-style:italic;}input[type=text]:focus{color:#000;background:#ffe;}input[type=text]:focus:hover{background:#fff;}q:langsv{quotes:\201D\201D\2019\2019;}
五、CSS
2.1中的伪元素序号选择器含义
20.E:first-line匹配E元素的第一行
21.E:first-letter匹配E元素的第一个字母
22.E:before在E元素之前插入生成的内容
23.E:after在E元素之后插入生成的内容实例p:first-line{font-weight:bold;color;#600;}.preamble:first-letter{font-size:
1.5em;font-weight:bold;}.cbb:before{content:;display:block;height:17px;width:18px;background:urltop.pngno-repeat00;__rgin:000-18px;}a:link:after{content:attrhref;}
六、CSS3的同级元素通用选择器序号选择器含义
24.E~F匹配任何在E元素之后的同级F元素实例p~ul{background:#ff0;}
七、CSS3属性选择器序号选择器含义
25.E[att^=”val”]属性att的值以val开头的元素
26.E[att$=”val”]属性att的值以val结尾的元素
27.E[att*=”val”]属性att的值包含val字符串的元素实例div[id^=n__]{background:#ff0;}
八、CSS3中与用户界面有关的伪类序号选择器含义
28.E:enabled匹配表单中激活的元素
29.E:disabled匹配表单中禁用的元素
30.E:checked匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
31.E::selection匹配用户当前选中的元素实例input[type=text]:disabled{background:#ddd;}
九、CSS3中的结构性伪类序号选择器含义
32.E:root匹配文档的根元素,对于HTML文档,就是HTML元素
33.E:nth-childn匹配其父元素的第n个子元素,第一个编号为
134.E:nth-last-childn匹配其父元素的倒数第n个子元素,第一个编号为
135.E:nth-of-typen与:nth-child作用类似,但是仅匹配使用同种标签的元素
36.E:nth-last-of-typen与:nth-last-child作用类似,但是仅匹配使用同种标签的元素
37.E:last-child匹配父元素的最后一个子元素,等同于:nth-last-child
138.E:first-of-type匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type
139.E:last-of-type匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type
140.E:only-child匹配父元素下仅有的一个子元素,等同于:first-child:last-child或:nth-child1:nth-last-child
141.E:only-of-type匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或:nth-of-type1:nth-last-of-type
142.E:empty匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素实例p:nth-child3{color:#f00;}p:nth-childodd{color:#f00;}p:nth-childeven{color:#f00;}p:nth-child3n+0{color:#f00;}p:nth-child3n{color:#f00;}tr:nth-child2n+11{background:#ff0;}tr:nth-last-child2{background:#ff0;}p:last-child{background:#ff0;}p:only-child{background:#ff0;}p:empty{background:#ff0;}
十、CSS3的反选伪类序号选择器含义
43.E:nots匹配不符合当前选择器的任何元素实例:notp{border:1pxsolid#ccc;}
十一、CSS3中的:target伪类序号选择器含义
44.E:target匹配文档中特定id__后的效果请参看HTMLDOG上关于该选择器的详细解释和实例J__ascript面向对象编程
(一)封装下面就是我的学习笔记,希望对大家学习这个部分有所帮助我主要参考了O__ect-OrientedJ__aScript和ProfessionalJ__aScriptforWebDevelopers2ndEdition这两本书它们都是非常优秀的J__ascript读物,推荐阅读笔记分成两部分今天的第一部分是讨论封装(Encapsulation),下一次的第二部分讨论继承(Inheritan__)============================J__ascript面向对象编程
(一)封装__阮一峰J__ascript是一种基于对象(o__ect-based)的语言,你遇到的所有东西几乎都是对象但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)那么,如果我们要把属性(property)和方法(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?
1.生成对象的原始模式假定我们把猫看成一个对象,它有名字和颜色两个属性 varCat={ name: color: }现在,我们需要根据这个原型对象,生成两个实例对象 varcat1={}; cat
1.name=大毛; cat
1.color=黄色; varcat2={}; cat
2.name=__; cat
2.color=黑色;好了,这就是最简单的封装了但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么__
2.原始模式的改进我们可以写一个函数,解决代码重复的问题 functionCatnamecolor{ return{ name:name color:color } }然后生成实例对象,就等于是在调用函数 varcat1=Cat大毛黄色; varcat2=Cat__黑色;这种方法的问题依然是,cat1和cat2之间没有内在的__,不能反映出它们是同一个原型对象的实例
3.构造函数模式为了解决从原型对象生成实例的问题,J__ascript提供了一个构造函数(Constructor)模式所谓构造函数,其实就是一个普通函数,但是内部使用了this变量对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上比如,猫的原型对象现在可以这样写, functionCatnamecolor{ this.name=name; this.color=color; }我们现在就可以生成实例对象了 varcat1=newCat大毛黄色; varcat2=newCat__黑色; alertcat
1.name;//大毛 alertcat
1.color;//黄色这时cat1和cat2会自动含有一个constructor属性,指向它们的构造函数 alertcat
1.constructor==Cat;//true alertcat
2.constructor==Cat;//trueJ__ascript还提供了一个instan__of运算符,验证原型对象与实例对象之间的关系 alertcat1instan__ofCat;//true alertcat2instan__ofCat;//true
4.构造函数模式的问题构造函数方法很好用,但是存在一个浪费内存的问题请看,我们现在为Cat对象添加一个不变的属性type(种类),再添加一个方法eat(吃老鼠)那么,原型对象Cat就变成了下面这样 functionCatnamecolor{ this.name=name; this.color=color; this.type=猫科动物; this.eat=function{alert吃老鼠;}; }还是采用同样的方法,生成实例 varcat1=newCat大毛黄色; varcat2=newCat__黑色; alertcat
1.type;//猫科动物 cat
1.eat;//吃老鼠表面上好像没什么问题,但是实际上这样做,有一个很大的弊端那就是对于每一个实例对象,type属性和eat方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存这样既不环保,也缺乏效率 alertcat
1.eat==cat
2.eat;//false能不能让type属性和eat方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的
5.Prototype模式J__ascript规定,每一个构造函数都有一个prototype属性,指向另一个对象这个对象的所有属性和方法,都会被构造函数的实例继承这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上 functionCatnamecolor{ this.name=name; this.color=color; }然后,生成实例 varcat1=newCat大毛黄色; varcat2=newCat__黑色; alertcat
1.type;//猫科动物 cat
1.eat;//吃老鼠这时所有实例的type属性和eat方法,其实都是一个内存地址,指向prototype对象,因此就提高了运行效率 alertcat
1.eat==cat
2.eat;//true
6.Prototype模式的验证方法
6.1isPrototypeOf这个方法用来判断,某个proptotype对象和某个实例之间的关系
6.2hasOwnProperty每个实例对象都有一个hasOwnProperty方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性 alertcat
1.hasOwnPropertyname;//true alertcat
1.hasOwnPropertytype;//false
6.3in运算符in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性 alertnameincat1;//true alerttypeincat1;//truein运算符还可以用来遍历某个对象的所有属性 forvarpropincat1{alertcat1[+prop+]=+cat1[prop];}(完)上一次的文章,主要介绍了如何封装数据和方法,从原型对象生成实例今天要介绍的是,多个原型对象之间如何继承比如,现在有一个动物对象, functionAni__l{ this.species=动物; }还有一个猫对象, functionCatnamecolor{ this.name=name; this.color=color; }____使猫继承动物呢?
1.原型对象绑定最简单的方法,大概就是使用call或apply方法,将父对象绑定在子对象上,也就是在子对象函数中加一行 functionCatnamecolor{ Ani__l.applythisarguments; this.name=name; this.color=color; } varcat1=newCat大毛黄色; alertcat
1.species;//动物
2.prototype模式更常见的做法,则是使用prototype属性如果猫的prototype对象,指向一个Ani__l的实例,那么所有猫的实例,就能继承Ani__l了 Cat.prototype=newAni__l; varcat1=newCat大毛黄色; alertcat
1.species;//动物代码的第一行,我们将Cat的prototype对象指向一个Ani__l的实例 Cat.prototype=newAni__l;它相当于完全删除了prototype对象原先的值,然后赋予一个新值但是,第二行又是什么意思呢?原来,任何一个prototype对象都有一个constructor属性,指向它的构造函数也就是说,Cat.prototype这个对象的constructor属性,是指向Cat的我们在前一步已经删除了这个prototype对象原来的值,所以新的prototype对象没有constructor属性,所以我们必须手动加上去,否则后面的继承链会出问题这就是第二行的意思总之,这是很重要的一点,编程中务必要遵守下文都遵循这一点,即如果替换了prototype对象, o.prototype={};那么,下一步必然是为新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数
3.直接继承prototype由于Ani__l对象中,不变的属性都可以直接写入Ani__l.prototype所以,我们也可以让Cat跳过Ani__l,直接继承Ani__l.prototype现在,我们先将Ani__l对象改写 functionAni__l{}然后,将Cat的prototype对象,然后指向Ani__l的prototype对象,这样就完成了继承 Cat.prototype=Ani__l.prototype; varcat1=newCat大毛黄色; alertcat
1.species;//动物所以,上面这一段代码其实是有问题的请看第二行这一句实际上把Ani__l.prototype对象的constructor属性也改掉了!
4.利用空对象作为中介由于直接继承prototype存在上述的缺点,所以可以利用一个空对象作为中介 varF=function{}; F.prototype=Ani__l.prototype; Cat.prototype=newF;F是空对象,所以几乎不占内存这时,修改Cat的prototype对象,就不会影响到Ani__l的prototype对象
5.prototype模式的封装函数我们将上面的方法,封装成一个函数,便于使用 functionextendChildParent{ varF=function{}; F.prototype=Parent.prototype; Child.prototype=newF; Child.uber=Parent.prototype; }使用的时候,方法如下 extendCatAni__l; varcat1=newCat大毛黄色; alertcat
1.species;//动物这个extend函数,就是YUI库如何实现继承的方法另外,说明一点函数体最后一行 Child.uber=Parent.prototype;意思是为子对象设一个uber属性,这个属性直接指向父对象的prototype属性这等于是在子对象上打开一条通道,可以直接调用父对象的方法这一行放在这里,只是为了实现继承的完备性,纯属备用性质
6.拷贝继承上面是采用prototype对象,实现继承我们也可以换一种思路,纯粹采用拷贝方法实现继承简单说,如果把父对象的所有属性和方法,拷贝进子对象,不也能够实现继承吗?首先,还是把Ani__l的所有不变属性,都放到它的prototype对象上 functionAni__l{}然后,再写一个函数,实现属性拷贝的目的 functionextend2ChildParent{ varp=Parent.prototype; varc=Child.prototype; forvariinp{ c[i]=p[i]; } c.uber=p; }这个函数的作用,就是将父对象的prototype对象中的属性,一一拷贝给Child对象的prototype对象使用的时候,这样写 extend2CatAni__l; varcat1=newCat大毛黄色; alertcat
1.species;//动物(完)但是,写到一半的时候,我突然意识到,J__ascript的继承有两种一种是基于函数对象的继承,也就是一个function去继承另外一个function,这个我已经在昨天介绍过了另一种则是基于非函数对象的继承,不涉及function它的做法与前一种情况完全不同
一、什么是非函数对象的继承?比如,现在有一个对象,叫做中国人 varChinese={ nation:中国 };还有一个对象,叫做医生 varDoctor={ career:医生 }请问,我____让医生去继承中国人,也就是说,我____生成一个中国医生的对象?
二、o__ect方法json格式的发明人DouglasCrockford,提出了一个o__ect函数,可以做到这一点 functiono__ecto{ functionF{} F.prototype=o; returnnewF; }这个o__ect函数,其实只做一件事,就是把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起使用的时候,第一步先在父对象的基础上,生成子对象 varDoctor=o__ectChinese;然后,再加上子对象本身的属性 Doctor.career=医生;这时,子对象已经继承了父对象的属性了 alertDoctor.nation;//中国
三、浅拷贝除了使用prototype链以外,还有另一种思路把父对象的属性,全部拷贝给子对象,也能实现继承下面这个函数,就是在做拷贝 functionextendCopyp{ varc={}; forvariinp{ c[i]=p[i]; } c.uber=p; returnc; }使用的时候,这样写 varDoctor=extendCopyChinese; Doctor.career=医生; alertDoctor.nation;//中国但是,这样的拷贝有一个问题那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能请看,现在给Chinese添加一个出生地属性,它的值是一个数组 Chinese.birthPla__s=[北京____];通过extendCopy函数,Doctor继承了Chinese varDoctor=extendCopyChinese;然后,我们为Doctor的出生地添加一个城市发生了什么事?Chinese的出生地也被改掉了! alertDoctor.birthPla__s;//北京____厦门 alertChinese.birthPla__s;//北京____厦门所以,extendCopy只是拷贝基本类型的数据,我们把这种拷贝叫做浅拷贝这是早期jQuery实现继承的方式
四、深拷贝所谓深拷贝,就是能够实现真正意义上的数组和对象的拷贝它的实现并不难,只要递归调用浅拷贝就行了 functiondeepCopypc{ varc=c||{}; forvariinp{ iftypeofp[i]===o__ect{ c[i]=p[i].constructor===Array[]:{}; deepCopyp[i]c[i]; }else{ c[i]=p[i]; } } returnc; }使用的时候这样写 varDoctor=deepCopyChinese;现在,给父对象加一个属性,值为数组然后,在子对象上修改这个属性 Chinese.birthPla__s=[北京____];这时,父对象就不会受到影响了 alertDoctor.birthPla__s;//北京____厦门 alertChinese.birthPla__s;//北京____目前,jQuery库使用的就是这种继承方法(完)。