原生js是前端必備的基礎知識,而jQuery是爲了更簡單的獲取Dom,操作Dom,完成js的功能的一個封裝的js庫,它可以讓我們用更少的代碼完成與原生js一樣的功能,這裏就出現了對Dom元素操作時,原生js的方法和jQuery庫中封裝的方法的名稱是不一樣的,js對象和jQuery對象的方法不能互用,但在實際操作中,有一些方法,會比較容易用混,以下就是我在實際編程中容易用混的幾個方法
一、innerHTML和html(),innerText和text()
innerHTML和innerText是js中Dom元素獲取或賦值的方法,innerHTML與innerText的區別是innerHTML可以獲取和賦值Dom元素,而innerText不可以。
html()和text()則是jQuery對象獲取或賦值的方法,區別同上
具體用法:
<body>
<div class="app">我是測試數據</div>
<script>
// js方法獲取值
var data=document.querySelector(".app");
console.log(data.innerHTML);
// jQuery方法獲取值
console.log($(".app").html());
// js方法賦值
data.innerHTML='我是js變化後的值'
console.log(data.innerHTML);
// jQuery方法賦值
$(".app").html("我是jQuery變化後的值")
console.log($(".app").html());
</script>
</body>
對應的innerText和text()用法同上
二、value和val()
value是js對象給表單獲取和賦值的方法,對應的val()則是jQuery對象給表單獲取和賦值的方法
具體用法:
<input type="text" value="123">
<script>
// js方法獲表單取值
var input=document.querySelector("input");
console.log(input.value);
// jQuery方法獲取表單值
console.log($("input").val());
// js方法表單賦值
input.value=789;
console.log(input.value);
// jQuery方法表單賦值
$("input").val(456);
console.log($("input").val());
</script>
三、自定義屬性的3個方法
js對象的自定義屬性的操作方法:
js對象.setAttribute("","");——設置屬性、修改屬性
js對象.removeAttribute("");——移除屬性,引號裏面寫一個屬性名
js對象.getAttribute();——獲取屬性
jQuery對象的自定義屬性的操作方法:
添加屬性:jQuery對象.attr(“test”,“aa”);——給這個attr方法加入參數,屬性名叫做test,屬性的值是aa
移除屬性:jQuery對象.removeAttr(“test”);——移除test這條屬性
獲取屬性:jQuery對象.attr(“test”);——在attr方法裏面直接寫入一個屬性的名就可以了
添加自定義屬性:
<div class="test1"></div>
<div class="test2"></div>
<script>
// js方法添加自定義屬性
var test1=document.querySelector(".test1");
test1.setAttribute("test1","aa");
// jQuery方法添加自定義屬性
$(".test2").attr("test2","bb");
</script>
刪除自定義屬性:
<div class="test1"></div>
<div class="test2"></div>
<script>
// js方法添加自定義屬性
var test1=document.querySelector(".test1");
test1.setAttribute("test1","aa");
// jQuery方法添加自定義屬性
$(".test2").attr("test2","bb");
// js方法刪除自定義屬性
test1.removeAttribute("test1");
// jQuery方法刪除自定義屬性
$(".test2").removeAttr("test2")
</script>
獲取自定義屬性:
<div class="test1"></div>
<div class="test2"></div>
<script>
// js方法添加自定義屬性
var test1=document.querySelector(".test1");
test1.setAttribute("test1","aa");
// jQuery方法添加自定義屬性
$(".test2").attr("test2","bb");
// // js方法刪除自定義屬性
// test1.removeAttribute("test1");
// // jQuery方法刪除自定義屬性
// $(".test2").removeAttr("test2")
// js方法獲取自定義屬性
console.log(test1.getAttribute("test1"));
// jQuery方法獲取自定義屬性
console.log($(".test2").attr("test2"));
</script>
目前遇到這些,以後再遇到js和jQuery方法容易的弄混的例子會隨時更新!
不積硅步,無以至千里!