DOM | JQuery | |
---|---|---|
获取节点 | ||
创建节点 | ||
获取子节点 | ||
获取父节点 | ||
设置节点属性 | ||
获取节点属性 | ||
改变 CSS |
DOM 与 jQuery 之间的转换
1. jQuery 对象转 DOM 对象
- var $li = $("li");
- // 第一种方法 (推荐使用)
- $li[0]
- // 第二种方法
- $li.get(0)
- // 其实 jQuery 对象转 DOM 对象的实质就是取出 jQuery 对象中封装的 DOM 对象.
2.DOM 对象转 jQuery 对象
联想记忆: 我有钱 [美元], 所以我的功能就更强大.
- var $obj = $(domObj);
- // $(document).ready(function(){
- }); 就是典型的 DOM 对象转 jQuery 对象
字符串转 dom 和 jQuery
1. 字符串转 dom
- function parseDom(str) {
- var elem = document.createElement("div");
- elem.innerhtml = str;
- return elem.childNodes;
- };
- var elem = parseDom('<h1 class="postTitle"><a href="#">string 转 Dom</a></h1>');
- console.log(elem[0]);
2. 字符串转 jQuery
- var elem = $('<h1 class="postTitle"><a href="#">string 转 Dom</a></h1>');
- console.log(elem[0]);
获取节点
dom
(1) 通过 id 获取
- var value = document.getElementById("id");
- console.log(value);
(2) 通过 class 获取
- var values = document.getElementsByClassName("class");
- console.log(values);
- for (let i = 0; i <values.length; i++) {
- const element = values[i];
- console.log(element);
- }
(3) 通过 name 获取
- var values = document.getElementsByName("name");
- console.log(values);
- for (let i = 0; i < values.length; i++) {
- const element = values[i];
- console.log(element);
- }
(4) 通过 标签名 获取
- var values = document.getElementsByTagName("TagName");
- console.log(values);
- for (let i = 0; i < values.length; i++) {
- const element = values[i];
- console.log(element);
- }
(5) 通过 jQuery 选择器获取
- var value = document.querySelector("#id");
- console.log(value);
- var values = document.querySelectorAll("其它选择器");
- console.log(values);
- for (let i = 0; i < values.length; i++) {
- const element = values[i];
- console.log(element);
- }
- jQuery
(1) 通过 id 获取
- var values = $("#id");
- console.log(values);
(2) 通过 class 获取
- var values = $(".class");
- console.log(values);
- for (let i = 0; i < values.length; i++) {
- const element = values[i];
- console.log(element);
- }
(3) 通过 name 获取
- var values = $("[name='name']");
- console.log(values);
- for (let i = 0; i < values.length; i++) {
- const element = values[i];
- console.log(element);
- }
(4) 通过 标签名 获取
- var values = $("TagName");
- console.log(values);
- for (let i = 0; i < values.length; i++) {
- const element = values[i];
- console.log(element);
- }
创建节点
- dom
- var elem = document.createElement("div");
- console.log(elem);
- jQuery
- var elem = $('<div></div>');
- console.log(elem[0]);
来源: http://www.bubuko.com/infodetail-3069036.html