碎言博客

这是一个快速学习JavaScript的学习笔记4

J.sky 2019-12-24 13:53:19 jQuery

jQuery 和 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