1.给html元素添加事件有几种方式?
(1)通过元素属性:直接在标签内部加<p id="5" onclick="function()">
(2)通过对象属性:var a=document.getElementById("5"); a.onClick=function(){ }
(3)通过添加事件监听:0
W3C方式:var a=document.getElementById("5"); a.addEventListener("click",function(),true||false)
IE方式:var a=document.getElementById("5"); a.attachEvent("onClick",function())
2.给html某元素内部增加一个元素,删除一个元素
3.js数组有哪些属性和常用方法?
3个属性:
属性 | 描述 |
---|---|
constructor | 返回创建数组对象的原型函数。 |
length | 设置或返回数组元素的个数。 |
prototype | 允许你向数组对象添加属性或方法。 |
常用方法:
concat() 方法:用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
语法:array1.concat(array2,array3,...,arrayX)
copyWithin()方法:用于从数组的指定位置拷贝一个或多个元素到数组的另一个指定位置中。
语法:array.copyWithin(target, start, end)
every() 方法:every() 方法使用指定函数检测数组中的所有元素:
语法:array.every(function(){})
如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
注意: every() 不会对空数组进行检测。every() 不会改变原始数组。
find() 方法:返回传入一个测试条件(函数)符合条件的数组第一个元素的值。
语法:array.find(function())
findIndex() 方法:返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
语法:array.findIndex(function())
forEach方法:forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
语法:array.forEach(function())
push方法:向数组的末尾添加一个或多个元素,并返回新的长度。
语法:array.push(item1, item2, ..., itemX)
pop方法:删除数组的最后一个元素并返回删除的元素。
语法:array.pop()
shift方法:把数组的第一个元素从其中删除,并返回第一个元素的值。
语法:array.shift()
unshift方法:向数组的开头添加一个或更多元素,并返回新的长度。
语法:array.unshift(item1,item2, ..., itemX)
splice方法:splice() 方法用于添加或删除数组中的元素。
语法:array.splice(index,howmany,item1,.....,itemX)从index开始,删除howmany个,添加item1.。。。。
sort方法:对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。
要是按数字的大小进行排序,必须用一个函数来指定是升序还是降序。
var points = [40,100,1,5,25,10];//升序
points.sort(function(a,b){return a-b});
toString():把数组转换为字符串,并返回结果。
reverse() 方法:用于颠倒数组中元素的顺序。
map() 方法:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。注意: map() 不会对空数组进行检测。 map() 不会改变原始数组。
some() 方法:用于检测数组中的元素是否满足指定条件(函数提供)。some() 方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
4.jQuery的$到底是什么?
$就是jQuery的缩写
而jQuery就是jQuery库提供的一个函数.(好像也不仅仅只是函数, 因为还有 $.ajax(options) 这样的使用,等同 jQuery.ajax(options))
这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素, 函数作用之一就是GetElementByID的代替,但()内不仅可以是ID,还可以是各类选择器
比如:$(document)就是 选取整个文档对象
那是不是只可以用$来代替,不是。为了防止命名冲突,jQuery库提供了另外的机制来给jQuery函数起另外的别名。
例如:
var jq = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
就可以在代码里用jq 代替jQuery 和 $ 了。
所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。
方法是您能够执行的动作(比如添加或修改元素) && 属性是您能够获取或设置的值(比如节点的名称或内容)。
DOM常用方法(获取元素,增删元素,获取属性,修改属性)
获取元素
getElementById() | 返回带有指定 ID 的元素。 |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
增删改插 子节点
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
创建新元素
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
createAttribute() | 创建属性节点。 |
获取、修改属性值
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修改为指定的值。 |
removeAttribute() | 把指定属性删除 |
HTML DOM - 修改
修改 HTML DOM 意味着许多不同的方面:
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件(处理程序)
1.修改HTML内容 改变元素内容的最简单的方法是使用 innerHTML 属性。除了 innerHTML 属性,您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
2.改变 HTML 样式 元素节点.style.color=(" 值 "); document.getElementById("p2").style.color="blue";
3.改变 HTML 属性 元素节点.setAttribute(属性名,属性值);
4.创建新的 HTML 元素
4.1createElement()首先必须创建该元素(元素节点),然后把它追加到已有的元素上。分别获得目标节点节点p、新节点 s,然后p.rappendChild(s);
4.2insertBefore() 分别获得父亲节点p、儿子节点s,新节点s1然后p.insertBefore(s1,s);
4.3替换已有的元素 replaceChild()分别获得父亲节点p、儿子节点s,新节点s1然后p.replaceChild(s1,s);
5.删除已有的 HTML 元素 分别获得父亲节点p、儿子节点s,然后p.removeChild(s);
HTML DOM 导航
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。
例如: var x=document.getElementsByTagName("p");获取所有p标签,返回一个每个元素都是p标签的数组
HTML DOM 节点列表长度
length 属性定义节点列表中节点的数量。数组长度 x.length;
导航节点关系
您能够使用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档结构中进行导航。