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

 

 

 

 

 

 

后續會陸續更新。。。。。。