js和jquery获取属性的区别

一、获取元素：

js获取元素：

根据id获取：document.getElementById("id");　　
根据类名获取：document.getElementsByClassName("className");
根据标签获取：document.getElementsByTagName("tagName");

jquery获取元素：

根据id获取：$("#id"); 　　
根据类名获取：$(".class");
根据标签获取：$("tag");

二、事件

js的各种事件比jquery都多了一个on,比如说js的鼠标点击事件：onclick=function(){};

而jquery只需要click(function(){})

三、获取父节点、兄弟结点等

js获取结点：（js不能直接获取除某一个结点之外的所有节点，比如说：tab栏切换，有另一种写法，见js的tab栏切换案例）

　　var test = document.getElementById("test");
　　var parent = test.parentNode; // 父节点
　　var chils = test.childNodes; // 全部子节点
　　var first = test.firstChild; // 第一个子节点
　　var last = test.lastChile; // 最后一个子节点　
　　var previous = test.previousSibling; // 上一个兄弟节点
　　var next = test.nextSbiling; // 下一个兄弟节点

jquery获取结点：

    $("#test1").parent(); // 父节点
    $("#test1").parents(); // 全部父节点
    $("#test1").parents(".mui-content");
    $("#test").children(); // 全部子节点
    $("#test").children("#test1");
    $("#test").contents(); // 返回#test里面的所有内容，包括节点和文本
    $("#test").contents("#test1");
    $("#test1").prev();  // 上一个兄弟节点
    $("#test1").prevAll(); // 之前所有兄弟节点
    $("#test1").next(); // 下一个兄弟节点
    $("#test1").nextAll(); // 之后所有兄弟节点
    $("#test1").siblings(); // 所有兄弟节点
    $("#test1").siblings("#test2");
    $("#test").find("#test1");

 三、下拉框事件

js下拉框事件：
$("course").addEventListener("change", function () {})
jquery下拉框事件：
$("course").change(function(){})

四、获取值或内容

js获取值或内容：
    如获取input的值：document.getElementById("ID").value
    如获取div的内容：document.getElementById("ID").innerText
                   document.getElementById("ID").innerHtml

jquery获取值或内容：

　　如获取input的值：$("id").val() 
   如获取div的内容：$("id").text(); $("id").html(); 

四、获取offset值

js:document.getElementById("id").offsetLeft
jquery:$("#id").offset().left

 

后续会陆续更新。。。。。。