js与jquery方法对比

一.文档就绪

jquery实现

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

简写形式为：

$(function(){
 
   // 开始写 jQuery 代码...

});

js实现

window.onload=function(){ 

   // 开始写 js 代码...

}

二、元素选择

//元素选择
$("p")  //jquery对象

//获取多个元素，是元素的集合，注意：不是数组。可以通过for循环获取对应的元素
//获取具体某个元素时:document.getElementsByTagName("p")[0]、document.getElementsByTagName("p")[1]...
//如果只有一个元素时,那就是document.getElementsByTagName("p")[0]
document.getElementsByTagName("p") 

//id选择
$("#test") //jquery对象
document.getElementById("test") //单个元素对象  

//class选择
$(".test") //jquery对象
document.getElementsByClassName("test") //获取多个元素，是元素的集合，注意：不是数组。使用时同getElementsByTagName

三、点击事件

jquery实现

$("p").click(function(){
    // 动作触发后执行的代码!!
});

$("p").on("click",funcion(){

})
on() 和 click() 的区别:
二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。

js实现

document.getElementsByTagName("p").onclick=function(){
alert('hello world');
};
或
document.getElementsByTagName("p").addEventListener("click",function(){
alert('hello world')
},false);

四、元素显示和隐藏

jQuery实现

$("p").hide();
$("p").show(1000);
$("p").toggle();

js实现

document.getElementById("eleId").style.display="none";
document.getElementById("eleId").style.display="inline";

五、获取内容和属性

jquery实现

$("#test").text()//- 设置或返回所选元素的文本内容
$("#test").html()//-设置或返回所选元素的内容（包括 HTML 标记）
$("#test").val() //- 设置或返回表单字段的值
$("#test").attr("href")//-获取属性值.返回的是'checked'或者undefined
$("#test").prop()//-获取属性值,prop()是jQuery1.6版本新增的函数.返回的是true或者false

js实现

document.getElementById("eleId").innerText
document.getElementById("eleId").innerHTML
document.getElementById("eleId").getAttribute(attribute)

六、添加元素

jquery实现

$("p").append("<b>nick</b>"); //每个p元素内后面追加内容
$("p").appendTo("div");    　　　 //p元素追加到div内后
$("p").prepend("<b>Hello</b>");  //每个p元素内前面追加内容
$("p").prependTo("div");    　  //p元素追加到div内前

$("p").after("<b>nick</b>"); //每个p元素同级之后插入内容
$("p").before("<b>nick</b>");    //在每个p元素同级之前插入内容
$("p").insertAfter("#test");    //所有p元素插入到id为test元素的后面
$("p").insertBefore("#test");    //所有p元素插入到id为test元素的前面

js实现

document.getElementById("myList").insertBefore(newItem,existingItem);
document.getElementById("myList").appendChild(newItem);

最后编辑于：2019.08.19 16:15:12