4.29python

前端值JavaScript(3)

DOM操作标签

在起变量名的时候，如果该变量指向的是一个标签，那么变量名建议使用：
	xxxEle
		eg:aEle\pEle\divEle\spanEle

// 动态创建一个a标签并添加到页面指定位置
var aEle = document.createElement('a')  // 创建a标签
aEle.href = 'https://www.sogo.com/'  // 设置href属性
aEle.innerText = '点我去搜狗'  // 设置文本内容
var divEle = document.getElementById('d1')  // 查找标签
divEle.append(aEle)  // 内部追加标签

/*
1.标签可以有默认属性 
	比如 id class 等 设置的时候可以直接通过点的方式:
		divEle.id = 'd1'
2.也可以有自定义属性
	比如 username password 等 设置的时候需要使用setAttribute:
		divEle.setAttribute('username','jason')

3.		
setAttribute() 既可以设置自定义属性也可以设置默认属性
divEle.getAttribute("age")		获取指定属性
divEle.removeAttribute("age") 移除指定属性
*/

// innerText与innerHTML
	获取值的时候 
  		innerText只会获取文本内容
    	innerHTML获取文本和标签
 	设置值的时候 
  		innerText不识别标签语法 
    	innerHTML识别标签语法

获取值操作

1.获取普通值数据
	标签对象.value
2.获取文件数据
	标签对象.value  // 只能获取到文件路径，没有实际应用
	标签对象.files  // 结果是一个数组，可以通过索引获取具体文件对象

属性操作

'''类属性操作'''
标签对象.classList  # 查看所有的类属性
标签对象.classList.add()  # 添加类属性
标签对象.classList.remove()  # 移除类属性
标签对象.classList.contains()  # 判断是否含有某个类属性
标签对象.classList.toggle()  # 有则移除 无则添加

'''样式操作'''
标签对象.style.属性名
	divEle.style.height = '800px'

事件绑定

js 作为脚本语言, 可以为页面上的元素绑定事件, 有 3 种方式
在 html 中, 声明 onclick 属性, 值为函数调用, 不推荐, html 和 js 耦合, 不利于维护
在 js 中, 对元素赋值 onclick 属性, 值为函数声明, 不推荐, 只能赋值一个回调函数, 多次赋值, 之前的会失效
在 js 中, 为元素添加 addEventListener, 推荐做法, 可以为一个事件类型绑定多个回调函数

// 如何给标签绑定事件
方式1：标签内绑定事件
	<p onclict="showMsg()">快来点我，点我，点我！！！</P>
	<script>
        function showMsg() {
            alert('猴急猴急的干啥 一会儿让你好看!!!')
        }
  	</script>

方式2：js获取标签后绑定事件
	<p>快来点我 点我 点我!!!</p>
  	<script>
  	var pEle = document.getElementsByTagName('p')[0];
        pEle.onclick = function () {
            alert('我来了 准备好了吧')
        }
    </script>

/*
补充:事件函数中有一个固定的关键字 this指代当前被操作对象本身
*/

常用事件

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

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

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

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