Jquery入門

jquery

[] jquery概念

jquery是JS的框架。

JS的函數庫。

【】BOM

BOM：Browser Object Model

BOM對象：

1.window：BOM根對象

2.window.navigator 瀏覽器對象

3.window.location : URL地址對象

4.window.document: 文檔對象。

5.window.history 歷史對象

【】DOM

DOM根對象：window.document 表示瀏覽器載入的文檔在內存中模型。

DOM模式的格式：樹。

每個標記表示一個對象，在樹中是一個節點。

1. JS定位一個節點方法

(1)根據ID定位：var div=document.getElementById("id"); 返回一個對象

(2)根據標記名定義：var div=document.getElemenetByTagName("div");

返回對象的數組。

(3) 根據CSS選擇器選擇對象：

var ob=document.querySelector("css選擇器");返回滿足選擇器的第一個對象

例子：

<input type="text" name="userid" id="userid" />

var userid=document.querySelector("input[name='userid']");

var userid=document.querySelector("#userid");

var userid=document.querySelector("input");

(4) 返回所有的選擇器選擇的對象：返回對象數組。

document.querySelectorAll("CSS選擇器")

【】DOM操作節點對象

1.讀/寫節點的內容

<div id="maincontent">

</div>

var div01=document.querySelector("#maincontent");

div01.innerHTML="你好";

div01.innerText="你好";

var info=div01.innerHTML;

var info=div01.innerText;

2.讀寫FORM表單元素的值

<input type="text" name="userid" id="userid" />

var userid=document.querySelector("#userid");

userid.value="001";

var v=userid.value;

3. 讀寫節點的樣式

<div id="maincontent">AAA </div>

var div01=document.querySelector("#maincontent");

div01.style.backgroundColor="blue";

var color= div01.style.backgroundColor;

4. 設置節點對象的事件

var div01=document.querySelector("#maincontent");

div01.onclick=function(event){

alert(div01.innerHTML);

};

5.讀寫對象的屬性

<a id="link01" class="link" href="#">測試</a>

var a=document.querySelector("#link01");

var href=a.href;

a.href="docyument/add.mvc";

【】jquery引入

<script src="js/jquery.js"></script>

【】jQuery語法:

1.操作DOM節點：

$(選擇器).函數(參數);

2.通用的函數，不針對DOM節點

$.函數(參數);

$.get, $.post, $.getJSON, $.each

【】jquery的節點選擇器：使用CSS選擇

1.ID選擇器

$("a#link01).on("click",function(){});

2.class選擇器

$(".link).on("click",function(){});

3.標記選擇器

$("a").on();

4.屬性選擇器:

$("input[name='userid']").on("blur",function(){});

5. 組合選擇器

(1) 子選擇器：$("div a").

(2)平行選擇器： $("div,ul,li,a").

(3) 直接子選擇器：$("div>a").

【】jquery操作DOM節點

1.讀寫節點內容：html(), text()

$("a#link01).html("你好");

$("a#link01).text("你好");

var info=$("a#link01).html();

var info=$("a#link01).text();

2.讀寫表單元素值

$("input#userid").val("001");

var v=$("input#userid").val();

3.讀寫節點的樣式：css

$("div#maincontent").css("background-color","blue");

var color=$("div#maincontent").css("background-color");

$("div#maincontent").css({"background-color":"blue",

width:"100%",height:"400px"

});

4.DOM節點註冊事件

$("div#maincontent").on("click",function(event){

});

$(document).ready(function(){});

5.讀取節點的屬性

var url=$(this).attr("href");

$("a#link01").attr("href","dept/add.mvc");

【】jquery的AJAX封裝函數

1.$.get("url",{參數},function(data){});

2.$.post("url",{參數},function(data){});

3.$.getJSON("url",{參數},function(data){});

【】jquary綁定

節點多的時候使用！

1.綁定

$(document).ready(function(){

$("button#button01").bind("click",clickHand01);

$("button#button02").bind("click",clickHand02);

$("button#button01").unbind("click");

});

function clickHand01(){

alert("hello!");

};