开发工具与关键技术:VS 后端
作者:陈芝番
撰写时间:2019.5.25
失物招领页面布局:主要运用CSS几种选择符,还有属性继承,权重规则等。
一是:CSS几种选择符,还有属性继承:
(1)id选择器(# myid)
(2)类选择器(.myclassname)
(3)标签选择器(div、h1、p)
(4)相邻选择器(h1 + p)
(5)子选择器(ul < li)
(6)后代选择器(li a)
(7)通配符选择器( * )
(8)属性选择器(a[rel = "external"])
二是:权重规则,标签的权重为1,class的权重为10,id的权重为100
如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现。
简单例子介绍:
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
(3) 当然还用到:行内元素有:a b span img input select strong(强调的语气)
块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
(4)javascript基于对象和事件驱动的客户端脚本语言
(5)如果页面嵌套,就要用到iframe显示页面加载数据
iframe会阻塞主页面的Onload事件;
iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过JavaScript动态给iframe添加src属性值,这样可以可以绕开以上两个问题。
待认领实现的效果图:
(1).get()、[]和.eq()方法的区别:
eq返回原生jQuery对象,截取某些el元素生成jQuery新对象;get和[]返回的都是原生的DOM对象,原理一致;get和[]区别是get是通过jQuery对象的方法获取,[]是根据jQuery是一个数组对象获取。
(2)还有基于class的选择性的性能相对于基于id选择器开销很大,因为其需要遍历所有DOM元素。
(3)this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。但是有一个总原则,那就是this指的是调用函数的那个对象。
已认领实现的效果图:
结语:主要涉及CSS几种选择符,还有属性继承,权重规则,行内元素,块级元素,iframe显示页面加载数据,get()、[]和.eq()方法的区别内容等。