一、获取元素:
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
后续会陆续更新。。。。。。