这是一个快速学习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