第一篇:黑馬程序員php培訓:javascript+jquery九天課程第九天
對象訪問:
Length:個數 Size():個數
Each:遍歷
Each:每個元素
用法:元素.each(function(index,element){})Index:索引下標:從0開始 Element:元素
DOM:文檔處理
內部插入:父子級關系
$(a).Append($(b))把b插入到a中【a里面的后面】
$(b).appendTo($(a))把b插入到a中【a里面的后面】
$(a).prepend($(b));把b插入到a中【a里面的前面】
$(b).prependTo($(a));把b插入到a中【a里面的前面】 這種方式插入之后一定是父子級的關系
外部插入:兄弟級關系
$(a).after($(b));把b插入到a的后面
$(b).insertAfter($(a));把b插入到a的后面 $(a).before($b);吧b插入到a的前面
$(b).insertBefore($(a))把b插入到a的前面
包裹:
Wrap:包裹$(a).wrap($(b))把a用b包裹起來【每個元素都會包裹】 Unwrap:取消包裹
wraoAll:把所有的都包裹起來【所有元素都會被一個包裹】 wrapInner:內部包裹
替換:
$(a).ReplaceWith($(b)):把a用b替換 $(b).replaceAll($(a));用b替換a
刪除:
Empty:刪除:刪除的是內容
Remove:刪除:刪除的是整個標簽
復制:
Clone:復制出一個一模一樣的元素
第二篇:黑馬程序員php培訓:javascript+jquery九天課程第九天
Jquery:一個JavaScript庫
目前:jquery是用的最火的一個javascript框架 Prototype:最早一個成熟的JS框架
Jquery,YUI(雅虎),tangram(百度),JX騰訊,kissy阿里 Jqurty:用戶多,速度快,文件小,比較復雜的DOM封裝
Javascript和jquery:
Js:ECMAscript,BOM,DOM Jq:把BOM和DOM的部分給封裝 JQ特點:
資源多,DOM封裝,瀏覽器的兼容
理念:write less,do more 部署: 注意:不管任何時候要寫JQ就必須引入,必須最先引入 下載:www.tmdps.cn
Compressed:壓縮版本,生產環(huán)境
Uncompressed:未壓縮版本,開發(fā)環(huán)境
Jquery-XXXXXX.js:有注釋,容易查看代碼 Jquery-XXXXXX.min.js;沒有注釋 開發(fā)中:1.x和2.x版本的區(qū)別
1.9以下的版本,1.9以上的都不值IE8 例子:
Jquery:核心,內容
語法:$(select).action();Console.log:控制臺日志
選擇器,事件,DOM,動畫,基本操作,插件,ajax 選擇器:
選擇器:選擇頁面元素的工具 最早的時候選擇器出名
基本選擇器:重點
#id:id選擇器
Element:元素選擇器 Class:類選擇器
層級選擇器:重點
ancestor descendant:表示選取ancestor里面所有的descendant元素 parent>child:選擇parent元素的子元素 selecter+:獲取后面的兄弟元素,下一個 selecter~:后去后面的兄弟元素,下所有個
內容選擇器:
:Contains(“text”):匹配含有text內容的元素 :empty:匹配內容為空的元素
:has(selecter):選擇包含有selecter的選擇器 :parent:選擇作為父元素的元素
注冊驗證:
1,鼠標放到email框會提示信息
2,鼠標離開就會檢測用戶所填寫的信息
3,提示信息是灰色字體,檢測之后(錯誤)的字體紅色 4,當填寫信息正確的時候會出現(xiàn)一個對號(圖片)5,提交的時候也會做檢測 6,檢測全部正確的話就讓提交
7,8,對象.HTML屬性對象.CSS屬性 9,Class和float a)Class:className b)Float:cssFloat
第三篇:黑馬程序員php培訓:javascript+jquery九天課程第九天(8)
動畫:
基本:
Show(shijian,fn)(顯示)【在效果完成之后,會執(zhí)行fn】 Hide(shijian,fn)(隱藏)【在效果完成之后,會執(zhí)行fn】 Toggle():切換【show和hide之間】
滑動:
slideDown:下滑,顯示 slideUp:收起,隱藏 slideToggle:切換效果
淡入淡出:
FadeIn:淡入 fadeOut:淡出
fadeToggle:切換效果 fadeTo(3000,(0-1),fn)
動畫案例:
點擊收藏夾,這臺電腦【后面的內容去隱藏或者顯示】
插件:成品插件
第四篇:黑馬程序員php培訓:javascript+jquery九天課程第八天
練習:
查看用戶所用的瀏覽器是上面 代碼:
效果:
DOM:描述網頁各個組成部分之間的關系
Var obj = document.getElementById(“id名”);火狐瀏覽器中空白處也算一個節(jié)點
ParentNode:父節(jié)點 childeNodes:子節(jié)點
firstChild:第一個子節(jié)點 lastChild:最后一個子節(jié)點
nextSibling:下一個姐妹或(兄弟)節(jié)點【注意,必須是同父級關系】 previousSibling:前一個兄弟節(jié)點【注意;必須是同父級關系】
案例:
星星案例:
網頁打開之后隨即大小,隨即位置出現(xiàn)星星
點擊星星讓星星消失
綁定一個onclick事件:
對象.事件=事件處理函數;注意:要想刪除某個節(jié)點,必須找到它的父節(jié)點 注意:在綁定事件中this可以直接使用 removeChild(obj):刪除obj
游戲功能添加
游戲進度條
第五篇:黑馬程序員php培訓:javascript+jquery九天課程第二天
循環(huán)案例:
循環(huán)輸出1到100之間所有的數字
循環(huán)輸出1到100之間所有的偶數
求1到100之間所有數字的和(求和思想)
求和思想:
1,找一個變量用來記錄總和
2,把前一次的和加上新的值再賦值給變量
求1到100之間偶數的個數(計數思想)
dowhile循環(huán)
語法:
Var i=1;do{
//循環(huán)體
循環(huán)變量的改變
i++;}while(i<=100)執(zhí)行:循環(huán)變量的初始化=》立刻執(zhí)行一次循環(huán)體=》循環(huán)變量的改變=》循環(huán)條件的判斷(true)=》循環(huán)體=》循環(huán)變量的改變=-》循環(huán)條件判斷(false)=》跳出循環(huán)
注意:必定會執(zhí)行
for循環(huán)
語法:
for(【循環(huán)變量的初始化】;【循環(huán)條件的判斷】;【循環(huán)變量的改變】){
【循環(huán)體】
} 執(zhí)行:
【循環(huán)變量的初始化】=》【循環(huán)條件的判斷】(true)=》【循環(huán)體】=》【循環(huán)變量的改變】=》循環(huán)條件的判斷】(true)=》【循環(huán)體】=》【循環(huán)變量的改變】=》【循環(huán)條件的判斷】(tfalse)=》=》跳出循環(huán)
for循環(huán)的案例:
For循環(huán)的擴展
For循環(huán)的嵌套
For(){
For(){
} } 案例:
九九乘法表
代碼:
效果:
星星金字塔