大家都知道jquery是js的一个库,很多东西大多数简写了,让js写起来特别的方便。但是对与学习的人来说,最好是先学会了js再去学jquery会更好。在学得过程中你会发现两者实现的原理是差不多的,但是写法上是有很多区别的。下面是个人的一些简单的积累,来区分二者的写法。
1.起步
如果要用jquery的时候需要去引用jquery库的js。你可以下载到本地,或者是用cdn的js也可以。
2.选择器
选择方式/js/jquery |
js |
jquery |
选择id | document.getElementById("id"); | $("#id"); |
选择name | document.getElementsByName("name"); | $("input[name='keleyicom']") |
选择类名 | document.getElementsByClassName("classname"); | $(".classname"); |
选择标签 | document.getElementsByTagName("tagname"); | $("tagname"); |
3.操作html
document.getElementById("id").innerHTML; $("#id").html();
document.getElementById("id").innerText; $("#id").text();
document.getElementById("id").value; $("#id").val();
赋值的时候:$("#id").val("xxx");
4.增加和删除标签
jquery:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
js:
var para=document.createElement("p");//增加
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1"); //删除
var child=document.getElementById("p1");
parent.removeChild(child);
5.遍历