前端基础之JavaScript_2 - Web

TOP

前端基础之JavaScript_2(二)

2019-09-17 19:09:54 【大中小】浏览:93次

cript 能够对页面中的所有事件做出反应

2、查找标签

直接查找

document.getElementById    //根据ID获取一个标签
document.getElementsByClassName    //根据class属性获取标签合集
document.getElementsByTagName   //根据标签名获取标签合集

间接查找

parentElement   　　   //父节点标签元素
children              //所有子标签
firstElementChild     //第一个子标签元素
lastElementChild      //最后一个子标签元素
nextElementSibling    //下一个兄弟标签元素
previousElementSibling  //上一个兄弟标签元素

三、节点操作：

创建节点：
语法：createElement(标签名)
添加节点：
语法：追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode);
把增加的节点放在某个节点的前面。
somenode.insertBefore(newnode,某个节点);
删除节点：
语法：获取要删除的元素，通过父元素调用该方法删除
somenode.removeChild(要删除的节点）
替换节点
语法：somenode.replaceChild(newnode,某个节点);

属性节点：
#获取文本节点的值：

var divEle = document.getElementById('d1');
divEle.innerText;
divEle.innerHTML;

#设置文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

获取值操作：
语法：elementNode.value
使用以下标签：input、select、textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>
    <form action="">
        <p>username: <input type="text"></p>
        <p>password: <input type="password"></p>
        <p><select name="" id="">
            <option value="">湖北省</option>
            <option value="">内蒙古</option>
            <option value="">上海</option>
        </select></p>
    </form>
</body>
</html>

class的操作：

className 获取所有样式类名（字符串）

classList.remove(cls)  删除制定类
classList.add(cls)  添加类
classList.contains(cls)  判断是否包含这个类，存在返回true，不存在返回false
classList.toggle(cls)  有就删除，否则添加。

指定CSS操作
```
obj.style.backgroundColor="red"
```
JS操作CSS属性的规律：
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
```
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
```
利用删除、增加标签里的内来来控制样式变化：
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
```
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
```

三、事件　

　　事件，顾名思义，比如当用户点击某个HTML元素时候启动一段java script代码，用来触发某一个功能的过程。

　常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

一些经常用到的事件示例：

onclick（鼠标点击事件）：
```
<!DOCTYPE html>
<html l
```

首页上一页 1 2 3 4 下一页尾页 2/4/4
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：【js】vue 2.5.1 源码学习（三）..	下一篇：深入V8引擎-默认Platform之mac篇(..

2、查找标签

三、节点操作：

指定CSS操作

三、事件

三、事件　