这是一个快速学习JavaScript的学习笔记4
2019-12-24 13:53:19 jQueryjQuery 和 HTML DOM
DOM 是 Document Object Model（文档对象模型）的缩写。
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。
| 描述 | JQuery | JavaScript | |
|---|---|---|---|
| 创建节点 | $("<div>') | document.createElement("div“） | |
| 选择元素 | $(CSS选择器） |
querySelector(CSS选择器）；
document.querySelectorAll(CSS选择器）； getElementById(); getElementsByTagName(); getElementsByClassName(); |
|
| 更改元素CSS |
修改单个CSS:$("p").css("backgroundColor", "red")
修改多个CSS： $("p").css({ "color":"white", "background-color":"#98bf21", "font-family":"Arial", "font-size":"20px", "padding":"5px" }); |
元素.style.backgroundColor="red" | |
| 更改元素属性 |
元素.prop("disabled",true);
元素.attr("disabled",true); |
元素.disabled=true;
元素.setAttribute("disabled",true); |
|
| 获取元素属性 |
元素.prop("disabled");
元素.attr("disabled"); |
元素.getAttribute(”disabled") | |
| 标签里添加 HTML 标签或文本 | 元素.html("<em>target4</em>") | 元素.innerHTML="<em>target4</em>" | |
| 标签里只改变文本而不增加标签 | 元素.text() |
元素.innerText或者元素.textContent(不同浏览器不同方法）;
元素.文本子元素.nodeValue |
|
| 设置或返回表单字段的值 | 元素.val() | value | |
| 删除元素 | 元素自身.remove() |
父元素.removeChild(子元素）；
子元素.parentNode.removeChild(子元素）； |
|
| 末尾增加元素 |
新元素.appendTo(父元素） 父元素.append(新元素） |
父元素.appendChild(新元素） | |
| 指定位置增加元素 | 父元素.insertBefore(插入元素,参照元素） | ||
| 替换元素 | 父元素.replaceChild(插入元素,替换元素) | ||
| 克隆元素 | 元素.clone(); |
元素.cloneNode(true):深克隆；
元素.cloneNode(false):浅克隆； |
|
| 父元素 | 元素.parent() | 元素.parentNode | |
| 子元素 |
元素.children()
元素.children("CSS选择器") |
元素.childNodes（返回NodeList对象）
元素.firstChild; 元素.lastChild; |
|
| 后代元素 |
元素.find("CSS选择器")
示例:$('li.item-ii').find('li')，返回被选元素的后代元素，一路向下直到最后一个后代 |
||
| 兄弟元素 |
元素.next();
元素.prev(); |
元素.nextSibling;
元素.previousSibling; |
|
| 伪类选择器选定子元素 |
$("button:nth-child(3)")
选择属于其父元素的第3个子元素的每个<button> 元素。 $(".target:odd") 选择奇数位置元素； $(".target:even") 选择偶数位置元素； |
||
| 显示元素 | 元素.show() | 元素.style.display=“block" | |
| 隐藏元素 | 元素.hide() | 元素.style.display=“none" | |
| 页面资源全装载完成后触发 | ${window}.on("load",function(){}); | window.onload=function(){}; | |
| DOM加载完成后触发 | ${document}.read(function(){}); | ||
| 对象定义 | var $pin = $( "#main" ); | var main=document.getElementById('main') | |
| 访问元素集合指定索引值 | $('li').eq(2) （第二个li元素） | nodeList[i]或nodeList.item(i) | |
| 集合中的第一个元素 | .first() | ||
| 集合中的最后一个元素 | .last() | ||
| 为数组每个匹配元素规定运行的函数 |
$(selector).each(function(index,value){}) $.each( object, function(index,value){}) |
for循环遍历执行 | |
| 事件 | 元素.click（function(){...}) |
1、元素.onclick=function(){...} 2、元素.addClickListener('click',function(){...}) |
|
| 设置或返回元素的宽度（不包括内边距、边框或外边距） | width() | width | |
| 设置或返回元素的高度（不包括内边距、边框或外边距） | height() | height | |
| 返回元素的宽度（包括内边距） | innerWidth() | clientWidth | |
| 返回元素的高度（包括内边距） | innerHeight() | clientHeight | |
| 返回元素的宽度（包括内边距和边框） | outerWidth() | offsetWidth | |
| 返回元素的g高度（包括内边距和边框） | outerHeight() | offsetHeight | |
| 返回视口宽度/高度 | $(window).width()/$(window).height() | 内边距=0情况下的document.documentElement.clientWidth | |
| 返回文档宽度/高度 | $(document).width()/$(document).height() | ||
| 获取垂直滚动的距离 | $(document).scrollTop() | document.documentElement.scrollTop | |
| 获取水平滚动的距离 | $(document).scrollLeft() | document.documentElement.scrollLeft | |
| 被选元素相对于文档(document)的偏移坐标 |
offset().top,offset().left |
offsetTop,offsetLeft(offsetParent是默认body时，或者是效果相当于body的定位元素时） |
发现错误？想参与编辑？
在 GitHub 上编辑此页！
如果您有什么问题，欢迎加入Python/Javascript学习讨论群询问
Python/Javascript学习QQ群号：217840699