回顧:
js:
組成部分:
ECMAScript 基本文法
BOM 5個浏覽器對象
DOM 一大堆對象,标簽
1.ECMAScript
變量聲明 var 變量名=初始化值;
資料類型:
原始類型
Undefined Null
String Number Boolean:僞對象
通過typeof運算符可以判斷出屬于那種原始類型
typeof 值|變量
引用類型
Boolean Number
String
常用屬性:length
常用方法:
substring
split
replace
var ss=s2.replace(/[\,\*\%\#\.\&\^]+/g," ");//加了g才是全局替換
alert(ss);//1 2 3 4 5 6 7 8 9 10
Array
常用屬性:length
注意:
array長度可以變化
array可以存放任意值
Math
Date
RegExp 常用方法:test()
直接量文法:
/正規表達式/
var s2="1,2,3,4,5,6*7%.8##9%^&10";
var a2=s2.split(/[\,\*\%\#\.\&\^]+/);//都要轉義 開頭結尾//即可
alert(a2.join(" "))//1 2 3 4 5 6 7 8 9 10
全局
decodeURI 解碼
eval 計算字元串,解析成js代碼執行
運算符:
關系運算符
等性運算符 == ===
語句:
選擇 循環
BOM(浏覽器對象模型)
window:視窗
常用屬性:
擷取其他的四個對象
window.location....
常用方法:
消息框
alert confirm prompt
定時器
setInterval 周期
setTimeout 延遲
打開關閉
open close
location:定位
location.href:設定或者擷取url
history:曆史
go()
///
事件和函數
掌握的事件:
焦點:
onfocus
onblur
表單事件
onsubmit
onchange 改變
頁面或者元素加載
onload
最常用的方式:
window.οnlοad=function(){};
單擊
onclick
函數:
方式1:
function 函數名(參數清單){
函數體
}
方式2:
匿名函數
例如:window.οnlοad=function(){};
事件綁定函數:
方式1:通過元素的事件屬性
<xxx onxxx="函數名(參數)"> 若參數為this:是将目前的dom對象傳遞給了函數
方式2:派發事件
dom對象.onxxx=function(){};
///
DOM(文檔對象模型)
就是我們的html代碼加載到記憶體中會形成一棵document樹
節點:
文檔節點 document
元素節點 element
屬性節點 attribute
文本節點 text
擷取一個元素節點:通過document擷取
四個
操作元素的屬性
dom對象.屬性
操作元素的标簽體
dom對象.innerHTML
以前通過js擷取對象的時候
var obj=document.getElementById("id");
funtion getId(id){
return document.getElementById("id");
}
$("選擇器")===>擷取元素
//
js類庫:
對常用的方法和對象進行封裝,友善我們使用.
jQuery:
案例1-彈出廣告
技術:
定時器
jQuery
///
jquery和html的整合
jquery是單獨的js檔案
通過script标簽的src屬性導入即可
擷取一個jquery對象
$("選擇器") 或者 jQuery("選擇器")
dom對象和jquery對象之間的轉換
dom對象===>jquery對象
$(dom對象)
jquery對象===>dom對象
方式1:
jquery對象[index]
方式2:
jquery對象.get(index)
頁面加載:
js:
window.οnlοad=function(){}//在一個頁面中隻能使用一次
jquery 在一個頁面中可以使用多次
方式1:
$(function(){...})
方式2:
$(document).ready(function(){});
派發事件:
$("選擇器").click(function(){...});
等價于 原生js中
dom對象.οnclick=function(){....}
掌握事件://on都去掉
focus
blur
submit
change
click
jquery中效果:
隐藏或展示
show(毫秒數) hide(毫秒數)
滑入或滑出
slideDown(毫秒數):向下滑入
slideUp(毫秒數):向上滑出
淡入或淡出
fadeIn(int):淡入
fadeOut(int):淡出
/
案例1-步驟分析
1.頁面加載成功之後$(function(){...}) 開始一個定時器 setTimeout();
2.編寫展示廣告方法
擷取div,然後調用效果方法
設定另一個定時器 隐藏
3.編寫隐藏廣告的方法
擷取div,然後調用效果方法
選擇器總結:
基本選擇器★
$("#id值") $(".class值") $("标簽名")
了解:$("*") 比對所有選擇器
了解:擷取多個選擇器 用逗号隔開
$("#id值,.class值")
層次選擇器 ★
a b:a的所有b後代
a>b:a的所有b孩子（隻有孩子沒有孫子 即：隻有子元素 沒有子元素的子元素）
a+b:a的下一個兄弟(大弟弟)
a~b:a的所有弟弟
基本過濾選擇器:★
:frist 第一個
:last 最後一個
:odd 索引奇數
:even 索引偶數
:eq(index) 指定索引
:gt(index) >
:lt(index) <
内容過濾:
:has("選擇器"):包含指定選擇器的元素 (父元素)
可見過濾:
:hidden 在頁面不展示元素 一般指 input type="hidden" 和 樣式中display:none
:visible
屬性過濾器:★
[屬性名] //有此屬性
[屬性名="值"] //有此屬性且值指定
表單過濾:
:input 所有的表單子标簽 input select textarea button
input 僅input标簽
:text 篩選所有文本框
:password 篩選所有密碼框等等
案例2-隔行換色
技術分析:
1.頁面加載成功
2.擷取所有的奇數行 添加一個css
3.擷取所有的偶數行 添加一個css
屬性和css操作總結:
對屬性的操作:
attr():設定或者擷取元素的屬性
方式1:擷取
attr("屬性名稱")
方式2:設定一個屬性 (添加一個屬性)
attr("屬性名稱","值");
方式3:設定多個屬性 json
attr({
"屬性1":"值1",
"屬性2":"值2"
})
removeAttr("屬性名稱"):移除指定屬性
//添加class屬性的時候
// attr("class","值"); 有種更友善的操作class屬性的方法 即是對class的進一步包裝
addClass("指定的樣式值"); 相當于 attr("class","指定的樣式值");
removeClass("指定的樣式值");
對css操作:操作元素的style屬性
css():擷取或者設定css樣式
方式1:擷取
css("屬性名")
方式2:設定一個屬性
css("屬性名","值")
方式3:設定多個
css({
"屬性1":"值1",
"屬性2":"值2"
});
擷取元素的尺寸:
width()
height()
/
案例3-全選或者全不選
需求:
就是将内容中複選框的選中狀态和最上面的複選框狀态保持一緻
步驟分析:
1.确定事件 複選框的單擊事件
2.函數中
a.擷取該複選框的選中狀态 attr(擷取不了checked屬性 這是bug)|prop
b.擷取所有的複選框修改他們的狀态
注意:
若jquery版本>1.6 統一使用 prop操作元素的屬性
/
/
/
/
案例4-省市關聯
步驟分析:
1.确定事件 省份的下拉選變化的時候 change
2.編寫函數
a.擷取目前省份的value值
b.通過數組擷取該省下的所有市 傳回值:數組
c.周遊數組,拼裝成option元素 追加到市下拉選即可
注意:每次改變的時候初始化市的值.
///
技術:
周遊數組
數組.each(function(){});
$.each(周遊數組,function(){});
注意:
each的function中可以加兩個參數 index和dom
index是目前周遊的索引值
dom指代的是目前周遊的dom對象(開發中一般使用this即可)
//
設定或者擷取value屬性
jquery對象.val():擷取
jquery對象.val("...."):設定
/
設定擷取擷取标簽體的内容
html()
text()
xxxxx():擷取标簽體的内容
xxxxx("....."):設定标簽體的内容
設定的差別:
html:會把字元串解析
text:隻做為普通的字元串
擷取的差別:
html:擷取的html源碼
text:擷取隻是頁面展示的内容
//
建立一個元素: $("<标簽></标簽>")
///
文檔操作:
内部插入
a.append(c):将c插入到a的内部(标簽體)後面
a.prepend(c):将c插入到a的内部的前面
appendTo //a.appendTo(c) 将a插入到c的内部後面 順序反了
prependTo
外部插入
a.after(c):将c放到a的後面
a.before(c):将c放到a的前面
a.insertAfter(c):将a插入到c的後面
a.insertBefore(c)
删除
empty() 清空元素
remove() 删除元素 //移除a a.remove();
/
/
/
案例5-左右移動
步驟分析:
1.确定事件 單擊事件
2.編寫函數:
移動一個:
右邊的下拉選追加一個 左邊的選中的第一個
移動多個:
左邊選中的 追加到右邊的下拉選中
移動全部:
将左邊的所有option追加到右邊的下拉選中
技術分析:
表單對象屬性過濾選擇器
:enabled 可用的
:disabled 不可用
:checked 選中的(針對于單選框和複選框的)
:selected 選中的(針對于下拉選) //alert($(":selected").size());就行了
![105道CSS 面試知識點總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)