淺談JS、Ajax、JQuery之間的關系
在項目開發過程中，遇到了一個奇怪的問題，詳參《網站開發進階（五十二）jsp詭異問題：從不同鏈接點進去進入同一jsp頁面，獲取的值確不同！》。由此，而催生出此篇博文。
在JS中，獲取某一元素值，可通過如下方式：
var xx = obj._value;
也可以通過jquery的方式獲取：
// 通過jquery方式獲取元素值 var xx = $(obj).attr('_value');
下面主要講解下jquery方面的基礎知識，在網站開發過程中，jquery的確是一把利器。
Jquery是繼prototype之后又一個優秀的javaScript框架。它是輕量級的js庫(壓縮后只有21k) ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果，并且方便地為網站提供AJAX交互。
jQuery還有一個比較大的優勢是：它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁保持代碼和內容分離，也就是說，不用再在html里面插入一堆js來調用命令了，只需定義id即可。
jQuery是目前使用最廣泛的javaScript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。對于網頁開發者來說，學會jQuery是必要的。因為它讓你了解業界最通用的技術，為將來學習更高級的庫打下基礎，并且確實可以很輕松地做出許多復雜的效果。
舉個小例子：
下面講解下原生JS和jQuery操作DOM對比總結
一、創建元素節點
1.1 原生JS創建元素節點
document.createElement("p");
1.2 jQuery創建元素節點
$('');
二、創建并添加文本節點
2.1 原生JS創建文本節點
document.createTextNode("Text Content");
通常創建文本節點和創建元素節點配合使用，比如：
var textEl = document.createTextNode("hello world."); var pEl = document.createElement("p"); pEl.appendChild(textEl);
2.2 jQuery創建并添加文本節點：
var $p = $('
');三、復制節點
3.1 原生JS復制節點:
var newEl = pEl.cloneNode(true);
true和false的區別：
true ：克隆整個'
Hello World.
'節點 false：只克隆'' ，不克隆文本Hello World.'3.2 jQuery復制節點
$newEl = $('#pEl').clone(true);
注意??：克隆節點要避免ID重復!
四、 插入節點
4.1 原生JS向子節點列表的末尾添加新的子節點
El.appendChild(newNode);
原生JS在節點的已有子節點之前插入一個新的子節點：
El.insertBefore(newNode, targetNode);
4.2 在jQuery中，插入節點的方法比原生JS多的多
在匹配元素子節點列表結尾添加內容
$('#El').append('
Hello World.
');把匹配元素添加到目標元素子節點列表結尾
$('
Hello World.
').appendTo('#El');在匹配元素子節點列表開頭添加內容
$('#El').prepend('
Hello World.
');把匹配元素添加到目標元素子節點列表開頭
$('
Hello World.
').prependTo('#El');在匹配元素之前添加目標內容
$('#El').before('
Hello World.
');把匹配元素添加到目標元素之前
$('
Hello World.
').insertBefore('#El');在匹配元素之后添加目標內容
$('#El').after('
Hello World.
');把匹配元素添加到目標元素之后
$('
Hello World.
').insertAfter('#El');五、刪除節點
5.1 原生JS刪除節點
El.parentNode.removeChild(El);
5.2 jQuery刪除節點
$('#El').remove();
六、替換節點
6.1 原生JS替換節點
El.repalceChild(newNode, oldNode);
注意??：oldNode必須是parentEl真實存在的一個子節點！
6.2 jQuery替換節點
$('p').replaceWith('
Hello World.
');七、設置屬性/獲取屬性
7.1 原生JS設置屬性/獲取屬性
imgEl.setAttribute("title", "logo"); imgEl.getAttribute("title"); checkboxEl.checked = true; checkboxEl.checked;
7.2 jQuery設置屬性/獲取屬性:
$("#logo").attr({"title": "logo"}); $("#logo").attr("title"); $("#checkbox").prop({"checked": true}); $("#checkbox").prop("checked");
下面接著講下jquery獲取元素值的方法(常見的表單元素)。
獲取元素值的方法有很多，接下來主要為大家詳細介紹下使用jquery是如何做到的：jquery radio取值，checkbox取值，select取值，radio選中，checkbox選中，select選中，及其相關。
獲取一組radio被選中項的值
var item = $('input[name=items][checked]').val();
獲取select被選中項的文本
var item = $("select[name=items] option[selected]").text();
select下拉框的第二個元素為當前選中值
$('#select_id')[0].selectedIndex = 1;
radio單選組的第二個元素為當前選中值
$('input[name=items]').get(1).checked = true;
獲取值：
文本框，文本區域：$("#txt").attr("value")；
多選框checkbox：$("#checkbox_id").attr("value")；
單選組radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();
控制表單元素：
文本框，文本區域：$("#txt").attr("value",'');//清空內容
$("#txt").attr("value",'11');//填充內容
多選框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判斷是否已經打勾
單選組radio： $("input[@type=radio]").attr("checked",'2');//設置value=2的項目為當前選中項
下拉框select：
$("#sel").attr("value",'-sel3');//設置value=-sel3的項目為當前選中項 $(" ").appendTo("#sel")//添加下拉框的option $("#sel").empty()；//清空下拉框
欲獲取更多關于JQuery的技能，詳參W3CSchool。
附 學習參考資料
Jquery學習手冊
Ajax jQuery
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
