刷题笔记03

1
            $(function(){
                // alert($("#div1").css("width")); //"100px" 字符串
                alert($("#div1").width()); //width：100
                alert($("#div1").innerWidth());  //width + padding
                alert($("#div1").outerWidth());  //width + border + padding   
                alert($("#div1").outerWidth(true)); //width + border + padding + margin   
                
            })

 

2
           /*
                • insertBefore()     before()
                • insertAfter()      after()
                • appendTo() 插入到子节点的末尾      appendChild(类似JS的方法)
                   append()
                • prependTo() 插入到子节点的首位    prepend()
                • remove()
             */
             $(function(){
                 //找到span节点插入到div的前面
                // $("span").insertBefore($("div"));
                
                //找到div节点，插入到span节点的后面
                // $("div").insertAfter($("span"));

                //找到span节点，插入到div节点的子节点的末尾
                // $("span").appendTo($("div"));

                //找到span节点，插入到div节点子节点的首位
                // $("span").prependTo($("div"));

                // $("div").remove();

                 //找到span节点插入到div的前面
                // $("span").insertBefore($("div")).css("backgroundColor", 'red');

                //div节点前面是span
                $("div").before($("span")).css("backgroundColor", 'red');

 

3--------Link--href   .css
----------script--src    .js
<link> 和href配合加载css,hypertext reference超文本引用，页面加载到href时不会停下来
<script>和src配合加载script文件,source资源,页面会停下来等待资源加载完毕(并执行完），所以一般js放在body的最下面
<link href = "css.css" rel = "stylesheet" type = "text/css" />
<script src = "../jquery-1.10.1.min.js"></script>

 

4
css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。
正确答案: A   你的答案: B (错误)
True
False
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

 

5
现有一组人员年龄的数据，要求将这些人员的年龄按照从小到大的顺序进行排列起来，要怎样来实现（      ）
正确答案: D   你的答案: C (错误)
A:function numberSort(a,b)
{
return a - b;
}
var arr=new Array("23","6","12","35","76");
document.write(arr.push(numberSort));

B:function numberSort(a,b)
{
return b - a;
}
var arr=new Array("23","6","12","35","76");
document.write(arr.push(numberSort));

C:function numberSort(a,b)
{
return b-a;
}
var arr=new Array("23","6","12","35","76");
document.write(arr.sort(numberSort));

D:function numberSort(a,b)
{
return a - b;
}
var arr=new Array("23","6","12","35","76");
document.write(arr.sort(numberSort));

升序排序 return  a - b； 降序排序 return b - a。
1. 使用sort进行排序，排序规则按照写的numberSort函数。
2. numberSort函数中，返回的值是负数，即a-b<0，那么位置不变，仍是a在前b在后。若a-b>0，则需要交换位置，交换之后：a在后b在前。
升序排序return a-b，降序排序return b-a。

 

6:
有一段html代码：
1
<div style="color:red; text-color:blue;"><span style=''color:green;text-color:black;”>Hello</span></div>,
那么”Hello”的字体颜色是（）
正确答案: C   你的答案: D (错误)
red
blue
green
black
没有text-color这个属性，文字颜色统一用color.再加上就近原则

 

7:
var a = [1,4,5,2,9];
下面求a中最大值正确的是

正确答案: D   你的答案: C (错误)
A:Math.max(a)
B:Array.max(a)
C:Math.max.call(null,a)
D:Math.max.apply(null,a)
E:以上均不是

Math对象包含max()方法，用于确认一组数值中的最大值。该方法接收任意多个数值参数，不接受数组参数。

要找到数组中的最值，可以使用apply()方法，D表示将Math.max()方法的执行环境切换到null上，apply()方法接收两个参数，第二个参数是一个数组。

call()需要传递明确几个参数，写全，
apply（）可以接收一个数组作为参数，不管数组中有多少个元素

答案是D。 使用apply方法，方法有两个参数，用作 this 的对象和要传递给函数的参数的数组。可以为方法指定调用对象与传入参数，并且可以让传入的参数以数组的形式组织。 Math.Max.Apply(Math,tmp); 也可以写成 Math.Max.Apply({},tmp);的简写形式

 

8:
下列关于比较Ajax与Flash的优缺点，相关描述正确的是？
正确答案: A B C D   你的答案: A B D (错误)
A:Ajax的优势在意在于开放性，易用性及易于开发
B:Flash的优势在于多媒体处理，可以更容易的调用浏览器以外的外部资源
C:Ajax最主要的批评就是它可能破坏浏览器的后退功能
D:flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间

1.Ajax的优势：1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发。
2.Flash的优势：1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度
3.Ajax的劣势：1.它可能破坏浏览器的后退功能   2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中 ，不过这些都有相关方法解决。
4.Flash的劣势：1.二进制格式 2.格式私有 3.flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间  4.性能问题

8：

行内元素典型代表 span  ,a,  ,strong , em,  del,  ins

特点：★在一行上显示

      ★不能直接设置宽高

      ★元素的宽和高就是内容撑开的宽高。
行内块元素（内联元素）典型代表  input  img

特点：★在一行上显示

      ★可以设置宽高
块元素典型代表,div,h1-h6,p,ul,li

特点: ★独占一行

      ★可以设置宽高

     ★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。

 

 

9：
以下代码的执行打印结果是？

正确答案: C   你的答案: A (错误)
报错
3
2
undefined

本身数组就是对象
这里要理解所谓‘数组’其实是array类型对象的一个特殊作用，就是：我们可以对它进行一种模式的数据存储，但除此之外，它依然是一个对象
var arr = [‘1’，‘2’] //这本质上是一系列操作：得到一个数组对象；调用了它的数组方法存入了一些数据，arr.length根据存入数据的数目被修改
arr.length，对arr对象的length属性进行一个访问
arr.foo = 'hello' 对arr对象创建一个属性，所以.foo 跟.length地位是并列的：就是arr的一个属性，同时arr的数组方法跟这些属性是毫不相关的

 

 

10：
以下 javascript 代码，在浏览器中运行的结果是（）

正确答案: B   你的答案: D (错误)
true
string
undefined
false
number

1.4399<0值为false
2.js中字符串的前面或者后面有加号，此时加号为拼接，4399+“” => 4399,原式中的4399被隐式转换成字符串，字符串4399与空字符串拼接的字符串4399 。
短路或  如果第一项是true 则结果为true 如果第一项为false 结果 为第二项（第二项不做计算直接返回）

 

 

11：
下列不属于javascript中查找元素的方法的是()
正确答案: A   
getElementByClassName()
getElementsByTagName()
getElementById()
getElementsByName()

选择A 错在Elements。因为这个方法可以返回一组节点。

A. 获取所有指定类名的元素：getElementsByClassName
var x = document.getElementsByClassName("example");

定义和使用
getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。
B getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

语法
document.getElementsByTagName(tagname)
说明
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
C getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
语法
document.getElementById(id)
说明
HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。
不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。
D getElementsByName() 方法可返回带有指定名称的对象的集合。
语法
document.getElementsByName(name)
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

 

12：
以下代码执行后，a.x 和 b.x 的结果分别是？                             
 function A(x){
this.x = x;
}
A.prototype.x = 1;

function B(x){
this.x = x;
}
B.prototype = new A();
var a = new A(2), b = new B(3);
delete b.x;
正确答案: C
2, 3
2, 1
2, undefined
其他几项都不对

 

13：
假链接中我们通常在a标签的href中添加什么能使得页面不跳转（）
正确答案: C   你的答案: A (错误)
#
##
javascript:；
直接为空，无需添加

14：
以下属于JS基本数据类型的选项是 ()
正确答案: A B D   你的答案: A B (错误)
undefined
number
interface
symbol

symbol应该属于基本数据类型，es6新增的
JavaScript 语言的6种原始数据类型：undefined、null、布尔值（boolean）、字符串（string）、数值（number）、symbol
引用数据类型：对象（object）
由于js的bug, typeof null 为 'object'。 除了null以外，其余原始数据类型均可用typeof判断，针对引用数据类型，可以用instanceof进行判断

 

 

15：
假设HTML结构为<parent><child>content</child></parent>下列哪些做法可以实现child内容垂直居中？
正确答案: A B C D   你的答案: A D (错误)
A:parent {
display: table;
}
child {
display: table-cell;
vertical-align: middle;
}

B:parent {
display: flex;
align-items: center;
}

C:parent {
position: relative;
}
child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

D:parent:after {
content: '';
height: 100%;
vertical-align: middle;
width: 0;
}
child {
display: inline-block;
vertical-align: middle;
}

A:把parent变成table，再把子元素变为table-cell，而vertical-align属性可以设置元素垂直对齐，前提条件：只能应用于内联元素以及display值为table-cell的元素。
B：弹性布局。align-items：center为设置子元素在侧轴方向上居中对齐，弹性布局默认主轴方向为row（即从左到右），侧轴就是就是column(从上到下）。
C：定位。父元素设置相对定位，子元素设置绝对定位，子元素的top值设置为50%（即父元素高度的50%），注意：此时是child元素的左上角（0,0），移到了parent元素的（0,parent高度的50%），而不是子元素的中心点移到了父元素垂直方向的中心点。因此子元素需要往上移动自身高度的50%，即transform：translateY（-50%）。
D：设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。打个比方：有两个行内元素a和b，a和b都是img，如果a加了vertical-align:middle样式，b的底部（基线）就会对齐a的中间位置；如果a和b都加了一个vertical-align:middle样式。那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了。
而伪元素的display属性默认值为inline，行内元素是无法设置宽高的，想要设置宽高需要将之设置为block或者inline-block。所以D有错误，应该将：after设置为inline-block才行