本文主要和大家分享js与 jquery实例对比，主要以代码的形式和大家分享，希望能帮助到大家。
dom 属性
// jquery el.html() el.text() //取得所有匹配元素的内容 el.val() //获得匹配元素的当前值// javascript el.innerhtml() el.innertext() //老版本火狐不兼容 el.textcontent() //老版本ie不兼容

dom 查询
1.获取页面所有p元素 // jquery $("p") // javascript document.getelementsbytagname("p"); // ie4 + // elements，表示此方法返回的是元素集合，有length属性，样式操作需配合索引 document.getelementsbytagname("p")[0].style.color = "blue";2.根据名称获取页面dom // jquery $("p[name = 'value']") // javascript document.getelementsbyname("name")3.根据id获取dom节点 // jquery $("#idname") // javascript document.getelementbyid("idname")4.根据类名获取dom节点 // jquery $(".classname") // javascript document.getelementbyclassname() //ie8 + document.queryselectorall(".classname") //返回元素集合 document.getelementsbyclassname("classname")5.根据选择器返回第一个匹配的节点(selectors css选择器，el dom/元素对象) // jquery $("selectors:first") // javascript, 非实时 document.queryselector("selectors") document.queryselectorall("selectors")

操作 class
1.为dom元素添加类 // jquery $("selector").addclass("classname"); // javascript el.classlist.add("classname");2.删除类 // jquery $("selector").removeclass("classname"); // javascript el.classlist.remove("classname");3.判断是否含有类，返回布尔值 true / false // jquery $("selector").hasclass("classnames") // javascript el.classlist.contains("classnames")

dom 更改
1.尾部追加dom元素（parent 父元素 ，child 子元素） // jquery $("parent").append($("child")); // javascript var child = document.createelement("span"); //创建元素节点 var child = document.createtextnode("text"); //创建文本节点 child.appendchild(document.createtextnode("content")); //填充节点内容 parent.appendchild(child) //将node元素追加到尾部2.头部追加dom元素 // jquery $("parent").prepend($("child")); // javascript,剪切操作 appendchild() parent.insertbefore(a,b) //在 b 之前插入 a3.删除dom元素 // jquery $("child").remove(); // javascript child.remove() //彻底删除 el.removechild(child); //删除child元素,返回被删元素，暂存对象3.替换dom元素 // jquery el.replacewith("<b>paragraph</b>") // javascript el.replacechild(new,old)

添加样式或属性
1.添加css样式 // jquery $("selector").css("color","#fff"); //设置单个属性值 $("selector").css({"color":"#fff","border":"1px",...}); //设置多个属性值 // javascript el.style.css="#fff";2.获取css值 // jquery $("selector").css("color"); //获取属性值 // javascript //只能获取内嵌css属性中的值（style=”…”），而无法获取外部引用css的属性 el.style.color; //返回rgb值3.添加属性 // jquery $("selector").attr("id","main"); //设置单个属性值 $("selector").attr({"id":"main","name":"main",...}); //设置多个属性值 /* attr("attributename",fn(v1,v2))的回调函数, v1为被选择元素的索引(index)，v2为属性的旧值(oldvalue),返回属性新值 */ $("selector").attr("attributename",function(index,oldvalue){ return }); //每次点击按钮，a元素的word自增1 //<a world = "1"></a> $("button").click(function(){ $("a").attr("world",function(index,v){return ~~v+1;}); }) // javascript（attributename 属性名,attributevalue 属性值） el.setattribute("attributename","attributevalue");4.获取节点属性 // jquery $("selector").attr("attributename"); // javascript el.getattribute("attributename");5.移除节点属性 // jquery $("selector").removeattr("attributename"); // javascript el.removeattribute("attributename");

event 事件
1.事件绑定（eventname 事件类型，fn(){} 事件处理函数） // jquery $("selector").on("eventname", fn(){}); // javascript el.addeventlistener("eventname", fn(){});2.解绑事件 // jquery $("selector").on("eventname", fn(){}); // javascript el.removeeventlistener("eventname", fn(){});

显示于隐藏
// jquery $("selector").show(); //显示 $("selector").hide(); //隐藏// javascript el.style.display = ''; //显示 el.style.display = 'none'; //隐藏

页面加载初始化
// jquery $(function(){ //方式一 }) $(document).ready(function(){ //方式二 }) $().ready(function(){ //$() 函数 默认为 $(document) //方式二 }) (function($){ //方式三 - 闭包 })(jquery)// javascript window.onload = function(){ //code }

dom 属性
// jquery el.html() el.text() //取得所有匹配元素的内容 el.val() //获得匹配元素的当前值// javascript el.innerhtml() el.innertext() //老版本火狐不兼容 el.textcontent() //老版本ie不兼容

dom 查询
1.获取页面所有p元素 // jquery $("p") // javascript document.getelementsbytagname("p"); // ie4 + // elements，表示此方法返回的是元素集合，有length属性，样式操作需配合索引 document.getelementsbytagname("p")[0].style.color = "blue";2.根据名称获取页面dom // jquery $("p[name = 'value']") // javascript document.getelementsbyname("name")3.根据id获取dom节点 // jquery $("#idname") // javascript document.getelementbyid("idname")4.根据类名获取dom节点 // jquery $(".classname") // javascript document.getelementbyclassname() //ie8 + document.queryselectorall(".classname") //返回元素集合 document.getelementsbyclassname("classname")5.根据选择器返回第一个匹配的节点(selectors css选择器，el dom/元素对象) // jquery $("selectors:first") // javascript, 非实时 document.queryselector("selectors") document.queryselectorall("selectors")

操作 class
1.为dom元素添加类 // jquery $("selector").addclass("classname"); // javascript el.classlist.add("classname");2.删除类 // jquery $("selector").removeclass("classname"); // javascript el.classlist.remove("classname");3.判断是否含有类，返回布尔值 true / false // jquery $("selector").hasclass("classnames") // javascript el.classlist.contains("classnames")

dom 更改
1.尾部追加dom元素（parent 父元素 ，child 子元素） // jquery $("parent").append($("child")); // javascript var child = document.createelement("span"); //创建元素节点 var child = document.createtextnode("text"); //创建文本节点 child.appendchild(document.createtextnode("content")); //填充节点内容 parent.appendchild(child) //将node元素追加到尾部2.头部追加dom元素 // jquery $("parent").prepend($("child")); // javascript,剪切操作 appendchild() parent.insertbefore(a,b) //在 b 之前插入 a3.删除dom元素 // jquery $("child").remove(); // javascript child.remove() //彻底删除 el.removechild(child); //删除child元素,返回被删元素，暂存对象3.替换dom元素 // jquery el.replacewith("<b>paragraph</b>") // javascript el.replacechild(new,old)

添加样式或属性
1.添加css样式 // jquery $("selector").css("color","#fff"); //设置单个属性值 $("selector").css({"color":"#fff","border":"1px",...}); //设置多个属性值 // javascript el.style.css="#fff";2.获取css值 // jquery $("selector").css("color"); //获取属性值 // javascript //只能获取内嵌css属性中的值（style=”…”），而无法获取外部引用css的属性 el.style.color; //返回rgb值3.添加属性 // jquery $("selector").attr("id","main"); //设置单个属性值 $("selector").attr({"id":"main","name":"main",...}); //设置多个属性值 /* attr("attributename",fn(v1,v2))的回调函数, v1为被选择元素的索引(index)，v2为属性的旧值(oldvalue),返回属性新值 */ $("selector").attr("attributename",function(index,oldvalue){ return }); //每次点击按钮，a元素的word自增1 //<a world = "1"></a> $("button").click(function(){ $("a").attr("world",function(index,v){return ~~v+1;}); }) // javascript（attributename 属性名,attributevalue 属性值） el.setattribute("attributename","attributevalue");4.获取节点属性 // jquery $("selector").attr("attributename"); // javascript el.getattribute("attributename");5.移除节点属性 // jquery $("selector").removeattr("attributename"); // javascript el.removeattribute("attributename");

event 事件
1.事件绑定（eventname 事件类型，fn(){} 事件处理函数） // jquery $("selector").on("eventname", fn(){}); // javascript el.addeventlistener("eventname", fn(){});2.解绑事件 // jquery $("selector").on("eventname", fn(){}); // javascript el.removeeventlistener("eventname", fn(){});

显示于隐藏
// jquery $("selector").show(); //显示 $("selector").hide(); //隐藏// javascript el.style.display = ''; //显示 el.style.display = 'none'; //隐藏

页面加载初始化
// jquery $(function(){ //方式一 }) $(document).ready(function(){ //方式二 }) $().ready(function(){ //$() 函数 默认为 $(document) //方式二 }) (function($){ //方式三 - 闭包 })(jquery)// javascript window.onload = function(){ //code }

以上就是js与 jquery实例对比的详细内容。