1.css有哪些選擇符藐石,它們的優(yōu)先關(guān)系計(jì)算
CSS 元素選擇器
CSS 類選擇器
CSS ID 選擇器
CSS 屬性選擇器
CSS 后代選擇器
CSS 子元素選擇器
CSS 相鄰兄弟選擇器
CSS 偽類
CSS 偽元素等等
優(yōu)先關(guān)系:使用!important可以改變優(yōu)先級別為最高醋虏,其次是style對象瓶佳,然后是id > class >tag ,另外在同級樣式按照申明的順序后出現(xiàn)的樣式具有高優(yōu)先級。
2.用css寫一個(gè)底邊為100px的三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div {
width: 0px;
height: 0px;
background-color: transparent;
position: absolute;
top:50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
border-top: 100px solid transparent;
border-bottom: 100px solid green;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
效果
3.display:block吸奴,inline共虑,inline-block這三個(gè)的關(guān)系
display:block
①.block元素會(huì)獨(dú)占一行愧怜,多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下妈拌,block元素寬度自動(dòng)填滿其父元素寬度拥坛。
②.block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行尘分。
③.block元素可以設(shè)置margin和padding屬性
display:inline
①.inline元素不會(huì)獨(dú)占一行猜惋,多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里,直到一行排列不下培愁,才會(huì)新?lián)Q一行著摔,其寬度隨元素的內(nèi)容而變化。
②.inline元素設(shè)置width,height屬性無效定续。
③.inline元素的margin和padding屬性谍咆,水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果禾锤;但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會(huì)產(chǎn)生邊距效果。
display:inline-block
①.簡單來說就是將對象呈現(xiàn)為inline對象摹察,但是對象的內(nèi)容作為block對象呈現(xiàn)时肿。之后的內(nèi)聯(lián)對象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link(a元素)inline-block屬性值港粱,使其既具有block的寬度高度特性又具有inline的同行特性螃成。
4.positon的幾種屬性
absolute:生成絕對定位的元素,相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位查坪。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定寸宏。
fixed:生成絕對定位的元素,相對于瀏覽器窗口進(jìn)行定位偿曙。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定氮凝。
relative:生成相對定位的元素,相對于其正常位置進(jìn)行定位望忆。因此罩阵,"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
static:默認(rèn)值启摄。沒有定位稿壁,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。
inherit: 規(guī)定應(yīng)該從父元素繼承 position 屬性的值歉备。
5.布局傅是,左邊固定寬度100px,右邊自適用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
}
.cantain {
width: 100%;
height: 100%;
background-color: yellow;
margin: 0 auto;
}
.div1 {
float: left;
width: 200px;
background-color: blue;
height: 400px;
}
.div2 {
width: 100%;
height: 100%;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="cantain">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>
6.DOM節(jié)點(diǎn)的創(chuàng)建蕾羊、插入喧笔、刪除、查找龟再、替換
①.創(chuàng)建新節(jié)點(diǎn)
createDocumentFragment() //創(chuàng)建一個(gè)DOM片段
createElement() //創(chuàng)建一個(gè)具體的元素
createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
②.插入DOM節(jié)點(diǎn)
appendChild():把節(jié)點(diǎn)插入到父節(jié)點(diǎn)的末尾书闸。
insertBefore():把節(jié)點(diǎn)插入到父節(jié)點(diǎn)的某個(gè)兄弟節(jié)點(diǎn)的前面。
③.刪除DOM節(jié)點(diǎn)
刪除DOM節(jié)點(diǎn)的方法是removeChild()利凑。
④.查找DOM節(jié)點(diǎn)
getElementById() //通過元素Id浆劲,唯一性
getElementsByTagName() //通過標(biāo)簽名稱
getElementsByName() //通過元素的Name屬性的值
⑤.替換DOM節(jié)點(diǎn)
替換DOM節(jié)點(diǎn)的方法是replaceChild()。
7.typeof返回哪些數(shù)據(jù)
typeof 返回值有六種可能: "number," "string," "boolean," "object," "function," 和 "undefined.
8.用js寫一個(gè)ajax
// 將 get 跟post 封裝到一起
/*
參數(shù)1:url
參數(shù)2:數(shù)據(jù)
參數(shù)3:請求的方法
參數(shù)4:數(shù)據(jù)成功獲取以后 調(diào)用的方法
*/
function ajax_tool(url,data,method,success) {
// 異步對象
var ajax = new XMLHttpRequest();
// get 跟post 需要分別寫不同的代碼
if (method=='get') {
// get請求
if (data) {
// 如果有值
url+='?';
url+=data;
}else{
}
// 設(shè)置 方法 以及 url
ajax.open(method,url);
// send即可
ajax.send();
}else{
// post請求
// post請求 url 是不需要改變
ajax.open(method,url);
// 需要設(shè)置請求報(bào)文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判斷data send發(fā)送數(shù)據(jù)
if (data) {
// 如果有值 從send發(fā)送
ajax.send(data);
}else{
// 木有值 直接發(fā)送即可
ajax.send();
}
}
// 注冊事件
ajax.onreadystatechange = function () {
// 在事件中 獲取數(shù)據(jù) 并修改界面顯示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 將 數(shù)據(jù) 讓 外面可以使用
// return ajax.responseText;
// 當(dāng) onreadystatechange 調(diào)用時(shí) 說明 數(shù)據(jù)回來了
// ajax.responseText;
// 如果說 外面可以傳入一個(gè) function 作為參數(shù) success
success(ajax.responseText);
}
}
9.請實(shí)現(xiàn)將數(shù)字用千分制表示
其實(shí)最簡潔是用正則來表示截碴,可以去看看梳侨,順便我也想請教一下,聽一下講解日丹。
下面是兩種簡單的方法
function parseNum(num){
var list = new String(num).split('').reverse();
for(var i = 0; i < list.length; i++){
if(i % 4 == 3){
list.splice(i, 0, ',');
}
}
return list.reverse().join('');
}
console.log(parseNum(10000121213));
function parseNum(num){
var list = String(num).split('').reverse();
var temp = [];
for(var i = 0, len = list.length; i < len; i = i + 3){
temp.push(list.slice(i, i + 3).join(''));
}
return temp.join(',').split('').reverse().join('');
}
console.log(parseNum(10000121213));
10.輸入N,生成N個(gè)不同的隨機(jī)數(shù)走哺,并且隨機(jī)數(shù)的范圍在[2 32]之間
<script type="text/javascript">
var array = new Array();
function getArray(count,maxs,mins){
while (array.length<count){
var temp = getRandom(maxs,mins);
if(!serch(array,temp)){
array.push(temp);
}
}
console.log(array);
return array;
}
function getRandom(maxs,mins){
return Math.round(Math.random()*(maxs-mins))+mins;
}
function serch(array,num){
for(var i=0;i<array.length;i++){
if(array[i] == num){
return true;
}
}
return false;
}
getArray(4,32,2);
</script>