————jQuery簡介及DOM對象與jQuery對象之間的轉換
jQuery 是繼 Prototype 之後又一個優秀的 JavaScript庫
jQuery 理念: 寫得少, 做得多. 優勢如下:
1、輕量級
2、強大的選取器
3、出色的 DOM 操作的封裝
4、可靠的事件處理機制
5、完善的 Ajax
6、出色的瀏覽器安全色性
7、鏈式操作方式
//當表單載入完畢後觸發function()匿名函數
$(document).ready(function(){
alert("hello");
});
/*
理解$符含義：jQuery對象 var jQuery=window.$;
jQuery對象就是通過jQuery($()) 封裝DOM對象後產生的對象
$(document) //document 是DOM對象 封裝之後變成jQuery對象
DOM對象只能使用DOM的屬性方法 jQuery對象只能使用jQuery的屬性和方法
$(document) jQuery對象
ready()方法//jQuery對象的方法
*/
//上面的簡寫形式
$(function(){
alert("hello");
});
jQuery對象
jQuery 對象就是通過 jQuery ($()) 封裝DOM 對象後產生的對象
jQuery 對象是 jQuery 專屬的. 如果一個對象是 jQuery對象, 那麼它就可以使用jQuery 裡的方法: $(“#persontab”).html();
jQuery 對象無法使用 DOM 對象的任何方法, 同樣 DOM 對象也不能使用 jQuery裡的任何方法
約定：如果擷取的是 jQuery 對象, 那麼要在變數前面加上 $.
var $variable= jQuery 對象
var variable =DOM 對象
DOM對象與jQuery對象之間的轉換
<body>
使用者名稱:<input type="text" id="name"/>
</body>
$(document).ready(function(){
//根據id擷取DOM對象
//varDomInput=document.getElementById("name");
//DomInput.value="小傻";
//根據id擷取jQuery對象
varjQueryInput=$("#name");
jQueryInput.val("二傻");
//把DOM對象轉換成jQuery對象
//var$Dinput=$(DomInput);
//$Dinput.val("三傻");
//把jQuery轉換成DOM對象
//方式一
//vardInput=jQueryInput[0];
//dInput.value="四傻";
//方式二
//dInput=$jQueryInput.get(0);
//dInput.value="五傻";
});
注：jQuery的操作是在引入類庫檔案的前提下進行的
!-- 引入Jquery類庫檔案 -->
<script type="text/javascript"src="./js/jquery-1.7.1.js"></script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
