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

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

巴特西

js和jquery获取属性的区别

最新文章

热门文章