1.jQuery
1.jQuery
<script>
//alert($);
//alert(jQuery);
//所有函數都有一個原型對象（prototype）
//檢視jquery版本
//alert(jQuery.fn.jquery);
//alert( jQuery.prototype );
//alert(jQuery.fn ===jQuery.prototype)
</script> 複制
2.入口函數的比較
<script>
//原生js
window.onload = function(){
var FirstP =document.getElementById("first");
FirstP.innerHTML = "hello world";
};
//jq
//$(document).ready()事件發生時表示dom元素已就緒，但是不會等頁面的圖檔等加載
//是以比window.onload要快
$(document).ready(function(){
$("#second").html("hello jquery")
});
//jq簡寫
$(function(){
$("#third").html("hello today")
})
</script> 複制
3.DOM對象與jQuery對象的互相轉換
<script>
//dom對象轉換為jq對象
//var firstp = document.getElementById("first");
var firstp = document.getElementById("first");
//console.log($(firstp));
//$(firstp).html("hello world!")
//jq對象轉換為dom對象
$("#second")[0].innerHTML = "我是第二個标簽";
$("#third").get(0).style.background = "blue";
</script> 複制
4.jq的循環
<body>
<p id="first"></p>
<p id="second"></p>
<p id = "third"></p>
</body>
<script>
$("p").each(function(index){
//此處的this是dom對象，可以使用$（this）轉換為jq對象
$(this).html(index+1);
//this.innerHTML = index+1;
})
</script>
結果：
// 1
// 2
// 3 複制
5.jq修改css
<style>
#first{
color: red;
}
</style>
<div>
<p id="first">1111</p> //顯示的是藍色
<p id="second">2222</p>
<p id = "third">3333</p>
</div>
<script>
$("#first").css("color","blue");//jq修改樣式其實是給元素添加了style屬性，即行内樣式 複制