JSON與Javascript與Jackson
顏群老師B站視訊：https://www.bilibili.com/video/BV1C4411W738?from=search&seid=49597186536944935
文章目錄
文章目錄
前言
1、Jquery的引用
引入js庫時
必須是
<script type="text/javascript" src="...." > </script>
不能
<script type="text/javascript" src="..." />
$(document).ready(function(){});//初始化函式，當網頁中的dom元素（不包含圖片、視訊、資源）全部載入完畢立刻執行
簡化函式：
$(function(){});
注意：
$等價於Jquery，jQuery(function(){});也可以
2、DOM模型
2.1.Dom物件
<p id="My"></p>
例如：
var title=document.getElementById(“MY”);通過js獲取到的title物件就是一個dom物件(就是
物件）,獲取到p物件就可以操作p標籤裡面的屬性，比如 title.value;
2.2.jQuery物件
例如：
var $title=$("MY");
通過jquery獲取到的 $title 就是一個jquery物件.
title 是dom物件，因此可以使用js屬性或方法 title.innerHTML
**$title 是jquery物件，因此可以使用jquery屬性或方法** $title.html()
3.Jquery選擇器
3.1 基本選擇器
3.1.1 標籤選擇器：
$("標籤名")
$("p").html()；//獲取P標籤物件
/*有多個p標籤都會輸出*/
3.1.2 類選擇器
$(".class值")
/標籤中有class屬性的，用 .class 取出/
3.1.3 id選擇器
$("#id值")
3.1.4 交集選擇器
$(".class值#id值")
$("p.myStyle").html()：選中 即是p標籤，並且class的值是myStyle
注意：不能出現歧義
錯誤寫法 $(".myStylep").html()
交集選擇器 在交接處 只能是.或#開頭的選擇器
3.1.5 並集(或)選擇器
$(".class值,#id值") 用，隔開
3.1.6 全域性選擇器
$("*");
3.2 層次選擇器（只取後米娜的那些元素）
相鄰選擇器 +
$(“選擇器1+選擇器2”)
同輩選擇器 ~
$("選擇器1~選擇器2")
後代選擇器 空格
$("選擇器1 選擇器2")
子代選擇器 >
$("選擇器>選擇器2")
<html>
<zz>
<aaa>
xx
yy
nn
</aaa>
<bbb>
</html>
3.3 屬性選擇器
$("[屬性名]")
$("[class]") :選中全部元素中 有class屬性的 元素
$("[屬性名=屬性值]")
$("[class=xxx]")
$("[class='xxx']")
$("[class!=a]") 不等於， 包含兩種： 有class但值不是a, 沒有class
$("[class^=a]") class以a開頭的元素
$("[class$=a]") class以a結尾的元素
$("[class*=a]") class有a的元素
3.4過濾選擇器
過濾選擇器的一些方法 和其他函式型別，例如
(
"
u
l
>
l
i
:
f
i
r
s
t
"
)
等
價
於
("ul>li:first")等價於
("ul>li:first")等價於(“ul>li”).first()
有些不同，例如， 可以
(
"
u
l
>
l
i
:
o
d
d
"
)
；
錯
誤
("ul>li:odd") ；錯誤
("ul>li:odd")；錯誤(“ul>li”).odd();
a.基本過濾選擇器（從0開始）
:first：最開頭那一個
:last：最後那一個
:even：偶數
:odd:奇數
:eq(index)：第index個
:gt(index) : >index的全部元素
:lt(index): <index的全部元素
:not(選擇器) :除了…以外
:header:選中所有的標題元素 h1 h2
:focus: 獲取當前焦點的元素
$("ul>li").first().html();//輸出的是aaa
Jquery事件
js: onXxx
onclick();
寫在
jquery:沒有on
click();
ready()內；
ready(function(){
$(選擇器).事件型別(function(){
...
});
});
windows事件：ready();
滑鼠事件：
click()：單擊事件
mouseover():滑鼠懸浮
mouseout():滑鼠離開
http://www.w3school.com.cn/tags/html_ref_eventattributes.asp
鍵盤事件：
keydown():按鍵 從上往下的 過程
keypress() ： 按鍵被壓到 最底部
keyup()：鬆開按鍵
1.前端的一些事件、方法，會在某些情況下失效。 2.相容性問題
可以通過event.keyCode指定具體的按鍵
$("body").keydown(function(event){
if(event.keyCode == 13){
alert("回車。。。...");
}
});
表單事件
focus()：獲取焦點
blur()：失去焦點
顏色值：可以使用 英語單詞 或者 #6位十六進位制
a. #000000:黑色 #ffffff:白色
b. 如果6位 是兩兩相同的，則可以寫成3位,#aabbcc 可以寫成#abc
繫結事件與移除事件
$(…).click( function(){ … });
繫結事件
$(…).bind(“事件名”,[資料],函式);
$(…).bind(“click”,function(){ … });
$(...).bind("mouseover",function(){ ... });
$(...).bind("focus",function(){ ... });
批量繫結
$(...).bind({ "事件名":函式 , "事件名":函式 ,...,"事件名":函式 }) ;
移除事件：
$(…).unbind(“事件名”);
複合事件：
hover(f1,f2)：切換使用mouseover()和mouseout()
toggle(f1,f2,f3,...,fn):版本問題(jquery1.9以前支援)
多個click()事件，toggle()還有其他含義（隱藏與顯示）
顯示效果（隱藏與顯示）
形式：hide([速度],[回撥函式]);
其中速度：可以是數字（毫秒），也可以是 單詞（fast normal slow，注意加雙引號）
hide();隱藏
show();顯示
toggle()：切換隱藏與顯示
淡入淡出（透明度）
fadeIn():淡入 顯示
fadeOut():淡出 隱藏
控制高度
slideDown():下拉，顯示
slideUp();上拉 隱藏
總結顯示問題：
顯示：show() fadeIn() slideDown();
隱藏：hide() fadeOut() slideUp();