之前一直喜好用純javascript操作DOM。最近了解jQuery，這裡整理一些基本的操作DOM與資料的方法。
1.擷取和設定輸入框的值。
- 原生Javascript
<input id="name"></input>
<script>
var value = document.querySelectorAll("#name")[].value;
document.querySelectorAll("#name")[].value = "new value";
</script>
querySelectorAll()是非常強大的javascript原生方法。
- jQuery
<input id="name"></input>
<script>
var value = jQuery("#name").val();
jQuery("#name").val() = "new value";
</script>
2.擷取和設定下拉框的選中項。
- 原生Javascript
<select id="name">
<option value="China">China</option>
<option value="USA">USA</option>
</select>
<script>
var value = document.querySelectorAll("#name")[].value;
document.querySelectorAll("#name")[].value = "USA";
</script>
- jQuery
<select id="name">
<option value="China">China</option>
<option value="USA">USA</option>
</select>
<script>
var value = jQuery("#name").val();
jQuery("#name").val("USA");
</script>
3.下拉框選項改變事件。
- 原生Javascript
<select id="name" onchange="change(this)">
<option value="China">China</option>
<option value="USA">USA</option>
</select>
<script>
function change(select){
alert(select.value);
}
</script>
- jQuery
<select id="name" onchange="change(this)">
<option value="China">China</option>
<option value="USA">USA</option>
</select>
<script>
jQuery("#name").change(function(){
alert(jQuery(this).val());
});
</script>
4.擷取Checkbox的值。
- 原生Javascript
<input id="name" type="checkbox" onchange="change(this)"></input>
<script>
function change(checkbox){
alert(checkbox.checked);
}
</script>
勾選時值為true，未勾選值為false。
- jQuery
<input id="name" type="checkbox"></input>
<script>
jQuery("#name").change(function(){
alert(this.checked);
});
</script>
5.點選按鈕事件。
- 原生Javascript
<button id="name" onclick="sayHi()">Come On</button>
<script>
function sayHi(){
alert("Hi!");
}
</script>
- jQuery
<button id="name">Come On</button>
<script>
jQuery("#name").click(function(){
alert("Hi");
});
</script>
6.循環周遊元素。
- 原生Javascript
<input id="name1" name="option" type="checkbox"></input>
<input id="name2" name="option" type="checkbox"></input>
<input id="name3" name="option" type="checkbox"></input>
<button id="name" onclick="showCheckboxStatus()">Come On</button>
<script>
function showCheckboxStatus(){
var checkboxs = document.querySelectorAll("input[name='option']");
for(var i = ; i < checkboxs.length; i++){
alert(checkboxs[i].checked);
}
}
</script>
勾選時值為true，未勾選值為false。
- jQuery
<input id="name1" name="option" type="checkbox"></input>
<input id="name2" name="option" type="checkbox"></input>
<input id="name3" name="option" type="checkbox"></input>
<button id="name">Come On</button>
<script>
jQuery("#name").click(function(){
jQuery("input[name='option']").each(function(){
alert(this.checked)
});
});
</script>
7.新增頁面元素。
- 原生Javascript
<div id="parent">
</div>
<button id="name" onclick="addNew()">Come On</button>
<script>
function addNew(){
var newElement = document.createElement("input");
newElement.setAttribute("type", "text");
newElement.setAttribute("value", "Hi");
var parentDiv = document.querySelectorAll("#parent")[];
parentDiv.appendChild(newElement);
}
</script>
- jQuery
<div id="parent">
</div>
<button id="name">Come On</button>
<script>
jQuery("#name").click(function(){
jQuery("#parent").append(
"<p>I'm the new comer!</p>"
);
});
</script>
jQuery建立新元素的方式更像”直接量”的方式，快速，直覺。
原生javascript的方式更像标準的建立變量流程，稍顯繁瑣，但是當我們需要建立的元素的一些屬性為動态值時，這種方式更為整潔，易讀。
8.删除頁面元素。
- 原生Javascript