函數作用域和聲明提前：
在js函數中的任何位置聲明的變量，都可以在這個函數的任何位置使用，意味着變量是可以在聲明之前使用的，這就是聲明提前。
var scope = "global";
function f(){
console.log(scope); //輸出"undefined"，因爲聲明提前，所以整個函數中使用的scope都是局部變量，而不是函數前聲明的那個全局變量
var scope = "local";
console.log(scope);//輸出"local"
}
在文檔已經加載完了之後，如果執行document.write，就會覆蓋整個html頁面。
<html>
<body>
<h1>我的第一張網頁</h1>
<p>我的第一個段落。</p>
<button onclick="myFunction()">點擊這裏</button>
<script>
function myFunction(){
document.write("糟糕！文檔消失了。");
}
</script>
</body>
</html>
var a = 1;
var a;
a的最後結果還是1，重新聲明JavaScript變量，該變量的值不會丟失。
JavaScript只有一種數字類型，所以1和1.00是一樣的。
數組
var arrays = new Array();
arrays[0] = 1;
arrays[1] = true;
arrays[2] = "hello"
或者 var arrays = [1, true, "hello"];
arrays.join("."); //將數組內的元素組成一個字符串，中間用"."隔開
對象
var people = {firstName : "Ni", secondName : "Hao", id : 1};
var name = people.firstName + people.secondName;
var id = people.id; // 或者是var id = people["id"];
向爲聲明的JavaScript變量來分配值，例如a = 1，將聲明一個全局變量a， 即使這是在函數內執行，也是全局變量。
正則表達式
var regExpVar = new RegExp("a.*bc");
document.write(regExpVar.test("840a01bckd823")); //返回true
document.write(regExpVar.exec("840a01bckd823")); //返回a01bc
window
var w=window.innerWidth //Internet Explorer、Chrome、Firefox、Opera 以及 Safari
|| document.documentElement.clientWidth //Internet Explorer 8、7、6、5
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口 （80 或 443）
location.protocol 返回所使用的 web 協議（http:// 或 https://）
location.assign() 方法加載新的文檔。
<html>
<head>
<script>
function newDoc()
{
window.location.assign("http://www.w3school.com.cn")
}
</script>
</head>
<body>
<input type="button" value="加載新文檔" onclick="newDoc()">
</body>
</html>
history.back() - 與在瀏覽器點擊後退按鈕相同
history.forward() - 與在瀏覽器中點擊按鈕向前相同
var a = setTimeOut("fucntionName()", timeMile); //在timeMile毫秒後，執行一次function
clearTimeout(a) //清除定時任務
window.location和document.URL的區別是，window.location不會包括URL中的參數，也就是沒有？後面的值
jQuery
$("#test") 代表id=“test”的元素
$(".test") 代表class=“test”的元素
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
$("p").css("background-color","red");
$(this)
當前 HTML 元素
$("p")
所有 <p> 元素
$("p.intro")
所有 class="intro" 的 <p> 元素
$(".intro")
所有 class="intro" 的元素
$("#intro")
id="intro" 的元素
$("ul li:first")每個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']")所有帶有以 ".jpg" 結尾的屬性值的 href 屬性
$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素
toggle()函數用來切換show()和hide()方法。
show(),hide()和toggle()函數，都可以有兩個參數(speed, callback),speed參數代表顯示或隱藏的動畫時間，也可以簡單的取值爲"fast"或者"slow"，callback代表動作完成後，想要執行的函數。
fadeIn()函數用於淡入已隱藏的元素，fadeOut()函數用於淡出可見元素，fadeToggle()函數你懂得，自己猜，fadeTo()函數允許漸變爲給定的不透明度，代表不是全隱藏，只是改變透明度，可以認爲fadeOut就是透明度爲0的fadeTo(),$(selector).fadeTo(speed,opacity,callback)，就是第二個參數，取值範圍是0-1。
slideDown()，slideUp()和slideToggle()函數，和上面的函數類似，但是動畫效果是滑動，可以自己試一下，就能明白。
animate()方法可以創建自定義動畫。
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
}, "fast");
});
改變<div>的css樣式，變化過程用動畫的方式顯示，但是，色彩動畫並不包含在覈心 jQuery 庫中。如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 插件。
變化的數值也可以使用相對值，比如height屬性，可以爲height:'+=150px'，表示height增加150px。
也可以將動畫值設置爲"slow","fast"或者"toggle"，例如height:'toggle'，表示在顯示和隱藏之間不斷切換。
animate函數具有隊列功能，如果使用了多個animate函數，就會去逐一的運行這些animate函數。下面的例子把 <div> 元素移動到右邊，然後增加文本的字號：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
stop()函數可以用來停止動畫效果。stop()方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
因此，默認地，stop() 會清除在被選元素上指定的當前動畫。
text() - 設置或返回所選元素的文本內容(如果傳了參數，則表示set，如果沒有參數，就是get，下面的函數也是這樣)
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值
attr() 方法用於獲取屬性值 $("p").attr("href")獲取鏈接中href屬性的值，$("#w3s").attr("href","http://www.w3school.com.cn/jquery")設置href屬性的值。
append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容
可以通過addClass方法給元素添加一個或者多個的class屬性，如$("#div1").addClass("important blue");可以使用這樣的方法來給某些元素加上css樣式，而不用每個都單獨寫一個css。
同樣的，還有removeClass()方法和toggleClass()方法。你懂得。
css() 方法設置或返回被選元素的一個或多個樣式屬性。
$("p").css("background-color")獲取<p>的background-color屬性。
$("p").css("background-color","yellow") 設置<p>的background-color屬性爲yellow
css({"propertyname":"value","propertyname":"value",...}); 可以同時設置多個css屬性。
遍歷：
parent() 返回一個元素的直接父元素
parents() 返回一個元素的所有祖先，可以添加參數作爲過濾條件，如parents("p")就是返回一個元素的所有<p>的祖先
parentsUntil() 有參數，parentsUntil("p")就是返回所有當前元素到<p>之間的所有祖先。
children()函數返回當前元素的所有直接子元素，也就是下一級的所有子元素。同樣的可以加參數進行過濾，如children("p.class1"),就是返回所有這個元素的類名是class1的<p>子元素。
fins()函數返回房錢元素的所有子元素，同樣可以通過添加參數進行過濾。
slibings()函數返回當前元素的所有同級元素，可以加參數。
netx()函數放回當前元素的下一個同級元素。
nextAll()函數返回當前元素的所有接下來的同級元素。
nextUntil()函數通過添加參數，返回當前元素到參數代表的那個元素之間的所有同級元素。
prev(),prevAll()和prevUntil()函數和上述的方法類似，不過方向相反，通過名字應該就能看的出來。
first()方法返回被選元素組的第一個元素。$("div p").first()返回的是<div>中的第一個<p>元素。
last()方法類似，自己悟，不寫了。
eq(n)方法，帶有數字參數，代表下標，返回第n個元素。
filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。$("p").filter(".intro")返回帶有類名 "intro" 的所有 <p> 元素。
not()方法和filter()相反。
AJAX:
jQuery load() 方法,jQuery load() 方法是簡單但強大的 AJAX 方法。load() 方法從服務器加載數據，並把返回的數據放入被選元素中。
$(selector).load(URL,data,callback)
$.get(URL,callback) 方法使用get的方式獲取數據。
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
$.post() 方法通過 HTTP POST 請求從服務器上請求數據。使用方法爲$.post(URL,data,callback);
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
下面是一組實例，是用來請求restApi項目的
$(document).ready(function () {
$("#btn").click(function () {
var jsonData = {
"name":"hello"
}
$.ajax({
type : "POST",
url : "http://localhost:8080/rest/data/v2/objects/account",
dataType : "json",
contentType : "application/json; charset=utf-8",
data : JSON.stringify(jsonData),
headers : {
"Authorization" : "Bearer f3337d66a627cd8e400b4c675616c7ee1da310ab224ff0bca081f988105db6b3",
"Content-Type" : "application/json"
},
success : function (data, status) {
alert(JSON.toString(date));
},
error : function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + textStatus + errorThrown);
}
});
})
})
js入門筆記
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章