js与juery基础知识对比(一)---2017-05-06

时间:2023-03-08 17:11:09

用表格做的,想要对比的内容一目了然,红色部分为重点

 

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("失去焦点了");

})

注:没有函数名的函数为匿名函数