js与jquery基础知识对比(一)---2017-05-06
用表格做的,想要对比的内容一目了然,红色部分为重点
js |
jquery |
|
取元素 |
id: document.getElementById("aa"); 取到的是dom对象
class: var a=document.getElementsByClassName("aa"); 取到的是dom对象集 a.[0]取到的是第一个class名为aa的元素
tag: document.getElementsByTagName("div");
name: document.getElementsByName("aa");
|
ID: $a=$("#aa") 取到的是jquery对象; $a[0] 取到的是dom对象
Class: $a=$(".aa") 取到的是jquery对象; $a.eq(0)取到的是dom对象集; $a.eq(0)[0]取到的是第一个class名为aa的元素
tag: Tag: $("div")
根据属性: $("[bs=1]")
|
操作内容 |
非表单元素: 赋值:a.innerText = "ceshi"; 取值:alert(a.innerText); 赋值:a.innerHTML = "ceshi"; 取值:alert(a.innerHTML);
|
非表单元素: 赋值:a.text("hello"); 取值 alert(a.text()); 赋值:a.html("aaa"); 取值:alert(a.html()); |
表单元素: 赋值:a.value = "请输入用户名"; 取值:alert(a.value); |
表单元素: 赋值:a.val("aa"); 取值:alert(a.val()); |
|
操作属性
|
a.getAttribute("bs");获取属性 a.setAttribute("test","test"); 添加属性 a.removeAttribute("bs"); 移除属性
|
a.attr("bs")); 获取属性 a.attr("test","test"); 添加属性 a.removeAttr("bs"); 移除属性 |
操作样式 |
alert(a.style.color); 获取样式 a.style.color = "green"; 设置样式
注: 1、只能操作内联 2、style里的background-color属性在js中会变成backgroundColor |
alert(a.("color")); 获取样式 a.css("background-color","red");设置样式
注: 1、可以操作内联,内嵌,外部 2、style里的background-color属性在jquery中不变 |
加事件
|
onblur="b()" |
$("#cc").blur(function(){ alert("失去焦点了"); }) 注:没有函数名的函数为匿名函数 |