DOM操作标签

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

基本使用

动态创建一个标签
var 变量名 = document.createElement('标签（a,p,div....）')

例如：
var aEle = doucument.createElement('a') 创建一个a标签
<a></a>

还可以给我们创建的a标签设置属性：
aEle.href = 'www.baidu.com' 设置href属性
相当于:<a href='www.baidu.com'></a>

aEle.innerText = '点我'     设置文本内容
相当于:<a href='www.baidu.com'>点我</a>

将它添加到页面的指定位置：
假设我们网页中有个id为div1的div。我们将刚刚的a标签添加到这个div中:
var divEle = document.getElementById('div1')  查找标签
divEle.append(aEle) 在尾部追加

<div id='div1'>
  <a href='www.baidu.com'>点我</a>
</div>

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

divEle.getAttribute("age")		获取指定属性
divEle.removeAttribute("age") 移除指定属性
"""

innerText与innerHTML的区别

     <div id="main" class="clearfix">
            <div id="child1"></div>
            <div id="child2"></div>
    		<p>p标签</p>
        </div>
        innerText与innerHTML的区别 
        var divEle = document.getElementById('main')

	获取值的时候 

  	innerText只会获取文本内容
        divEle.innerText
        'p标签'


        innerHTML获取文本和标签
        divEle.innerHTML
        '\n        <div id="child1"></div>\n        <div id="child2"></div>\n\t\t<p>p标签</p>\n    '


 	设置值的时候 

  	innerText不识别标签语法 
        divEle.innerText = '<a>a标签</a>'
        '<a>a标签</a>'

        会把div中内容全部清空然后放入文本内容
        页面中html代码：
        <div id="main" class="clearfix">
          "<a>a标签</a>"
        </div>



        innerHTML识别标签语法
        divEle.innerHTML = '<a>a标签</a>'
        '<a>a标签</a>'
        页面中html代码：
        <div id="main" class="clearfix">
          <a>a标签</a>
        </div>

获取值操作

input、option、textarea...
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, 推荐做法, 可以为一个事件类型绑定多个回调函数

<html>

<button onclick="triggerClick1()">使用 元素 onclick 属性绑定事件 (不推荐: html 和 js 耦合)</button>
<br>

<button id="btn2">在 js 中为元素的 onclick 属性赋值函数 (不推荐: 只能绑定一个函数, 多次绑定, 之前的会失效)</button>
<br>

<button id="btn3">使用 addEventListener 为元素绑定事件 (推荐)</button>
<br>


<script>


    function triggerClick1() {
        console.log('使用 元素 onclick 属性绑定事件')
    }

    let btn2 = document.getElementById('btn2');
    btn2.onclick = function () {
        console.log('在 js 中为元素的 onclick 属性赋值函数 11111111')
    };
    // 第二次赋值, 会让之前绑定的函数失效
    // 其实本质是给元素的 onclick 属性赋值
    btn2.onclick = function () {
        console.log('在 js 中为元素的 onclick 属性赋值函数 22222222')
    };

    let btn3 = document.getElementById('btn3');
    /*  
        addEventListener()，事件监听，用于向指定的元素添加事件监听
        第一个参数: 事件名 (注意: 是单纯的 click, 而不是 onclick 没有 'on')
        第一个参数event：指事件的类型（如’click’,‘mousedown’）
        第二个参数function：事件触发后调用的函数
        第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；值为true时，捕获传递。
     */
    btn3.addEventListener('click', function () {
        console.log('在 js 中调用元素的 addEventListener 函数, 以绑定事件 (推荐做法)')
    })
</script>
</html>

小案例

	<p>省市:
          <select name="" id="pro">

          </select>
	</p>

	<p>市区:
          <select name="" id="city">

          </select>
	</p>
	<script>
          let proEle = document.getElementById('pro');
          let cityEle = document.getElementById('city');
          // 1.自定义数据(以后有现成的组件实现)
          let data = {
              "河北": ["廊坊", "邯郸"],
              "北京": ["朝阳区", "海淀区"],
              "山东": ["威海市", "烟台市"],
              "安徽": ["合肥市", "芜湖市"],
              "上海": ["静安", "黄埔"],
              "深圳": ["龙湖", "罗湖"]
          };
          // 2.获取自定义对象中所有的key并添加到省市下拉框中
          for (let proVal in data) {
              // 2.1.创建option标签
              opEle = document.createElement('option');
              opEle.innerText = proVal;
              opEle.value = proVal
              // 2.2.添加到第一个下拉框中
              proEle.append(opEle)
          }
          // 3.文本域变化事件
          proEle.onchange = function () {
              // 3.0.先清空市区下拉框中的内容
              cityEle.innerHTML = '';
              let currentPro = this.value;
              let currentCityList = data[currentPro];
              // 3.1.循环获取市区数据
              for (let i=0;i<currentCityList.length;i++){
                  // 3.2.创建option标签
                  opEle = document.createElement('option');
                  opEle.innerText = currentCityList[i];
                  opEle.value = currentCityList[i]
                  // 3.3.添加到第一个下拉框中
                  cityEle.append(opEle)
              }
          }
	</script>

jQuery

jQuery简介

jQuery是轻量级的JavaScript库。它封装了很多预定义的对象和实用函数，能够帮助使用者优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的优势

    1.轻量级的JavaScript库：jQuery非常轻巧，以1.9.1为例，开发版仅有263KB，而精简版经过UglifyJS压缩后，大小只有91KB。
    2.强大的选择器：jQuery支持css1到css3几乎所有的选择器，以及jQuery独创的高级复杂的选择器。另外还通过插件支持XPath选择器。
    3.出色的DOM操作：jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关的程序时更方便。jQuery可以轻松的完成原本十分复杂的操作。
    4.可靠的事件处理：jQuery的事件处理机制吸收了JavaScript的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进、以及非入侵式编程方面，jQuery也做的非常不错。
    5.完善的Ajax：jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用问题。
    6.不污染的顶级变量：jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出操作权，绝对不会污染其他的对象。使得jQuery可以与其他的js库共存，在项目中放心的引用而不需要担心后期的冲突。
    7.浏览器兼容性：jQuery能够在IE6.0+、FF3.6+、Safari 5.0+、Opera和Chrome等浏览器下正常运行。jQuery同时修复了一些浏览器之间的差异，使得开发都不必在项目中建立浏览器兼容库。注意：从jQuery 2.0开始，不再支持IE8.0一下版本。
    8.链式操作：jQuery中最具有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。
    9.隐式迭代：当用jQuery找到带有".myClass"类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅的减少了代码量。
    10.丰富的插件支持： jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。
    11.完善的文档：jQuery的文档非常丰富。
    12.开源：jQuery是一个开源产品，任何人都可以自由使用并提出改进意见。

导入jQuery

1.CDN加速服务(在head中加入)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

2.jQuery官网下载本地导入

jQuery基本选择器

id选择器：$(“#id的属性值”)

获取与指定id属性值匹配的元素
$("#div1")

类选择器：$(“.class的属性值”)

获取与指定的class属性值匹配的元素
$(".p1")

标签选择器：$(“标签名”)

获取所有匹配标签名称的元素
$("a")

组合选择器：$(“选择器1，选择器2”)

$("#d1,.p1")
选择id为d1的，或class为p1的元素

jQuery层级选择器

后代选择器：$(“选择器1 选择器2”)

选择选择器1内部的所有选择器2
$("#d1 a")
选择id为d1的元素里面所有的a标签

子选择器：$(“选择器1 > 选择器2”)

选择选择器1内部的所有子选择器2
$("#d1>a")
选择id为d1的元素里所有子元素a

相邻选择器：$(“选择器1 + 选择器2”)

选择选择器1后面紧跟着的选择器2
$("#d1+a")
选择id为d1的元素后面紧跟的元素a

兄弟选择器: $(“选择器1 ~ 选择器2”)

选择选择器1后面的所有选择器2
$("#d1~a")
选择id为d1的元素后面的所有a标签

jQuery属性选择器

$(“[属性名]”)

包含指定属性的
$("[type]")
选择所有有type属性的元素

$(“[属性名=’值’]”)

包含指定属性且等于指定值的
$("[class='p1']")
选择使用有class属性且属性值为p1的元素

$(“[属性名!=’值’]”)

包含指定属性不等于指定值的
$("[class!='p1']")
选择使用有class属性但是属性值不为p1的元素

$(“选择器[属性名]”)

$(".div1[id]")
选择class为div1的并且有id属性的元素

jQuery过滤选择器

过滤器名	jQuery语法	说明	返回
:first	$(‘li:first’)	选取第一个元素	单个元素
:last	$(‘li:last’)	选取最后一个元素	单个元素
:not(selector)	$(‘li:not(.red)’)	选取class不是red 的li元素	集合元素
:even	$(‘li:even’)	选择索引(0开始)是偶数的所有元素	集合元素
:odd	$(‘li:odd’)	选择索引(0开始)是奇数的所有元素	集合元素
:eq(index)	$(‘li:eq(2))	选择索引(0开始)等于index 的元素	单个元素
:gt(index)	$(‘li:gt(2)’)	选择索引(0开始)大于index的元素	集合元素
:lt(index)	$(‘li:lt(2)’)	选择索引(0开始)小于index的元素	集合元素
:header	$(‘:header’)	选择标题元素，hl ~h6	集合元素
:animated	$(‘:animated’)	选择正在执行动画的元素	集合元素
:focus	$(‘:focus’)	选择当前被焦点的元素	集合元素

内容过滤选择器

过滤器名	jQuery语法	说明	返回
:contains(“text”)	$(‘:contains(“ycku.com”)’)	选取含有”ycku.com”文本的元素	元素集合
:empty	$(‘:empty’)	选取不包含子元素或空文本的元素	元素集合
:has(selector)	$(‘:has(.red)’)	选取含有class是red的元素	元素集合
:parent	$(‘:parent’)	选取含有子元素或文本的元素	元素集合

筛选器方法

# 同级别往下查找
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") 直到id为i2的才停止
# 同级别网上查找
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
# 查找父标签
$("#id").parent()
$("#id").parents() 
$("#id").parentsUntil() 
# 查找儿子和兄弟
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有标签)

计时器

		<style type="text/css">
			body {
				font-family:"微软雅黑";
				margin:20px;
				padding:0;
				text-align:center;
			}
			input {
				position:relative;
				left:50%;
				transform:translateX(-50%);
				padding:10px 20px;
				display:block;
				outline:none;
				background-color:#FFFFFF;
				border:1px solid #000000;
				cursor:pointer;
				margin-top:15px;
				font-size:18px;
				font-family:"微软雅黑";
				transition:all 0.15s;
			}
			input:hover,input:hover {
				background-color:#333333;
				color:#FFFFFF;
			}
		</style>
	</head>
	<body>
		<span id="txt">00时00分00秒00</span>
		<input type="button" value="开始计时">
		<input type="button" value="结束计时">
	</body>
	<script type="text/javascript">
		var timer;
		var count = 0;
		var clickStart = 0;
                var txt = document.getElementById('txt');
		var aInput = document.getElementsByTagName('input'); /*查找所有的input标签*/
		aInput[0].onclick = function() {
		    clickStart++;
			// clickStart  == 0 || clickStart  == 2
		    if (clickStart %2 == 0 ) {
		        clearInterval(timer);
		        aInput[0].value = '继续计时';
		        clickStart = 0;
		    } else {
		        timer = setInterval(function() {
		                var h = parseInt(count / 1000 / 60 / 60);
		                var m = parseInt(count / 1000 / 60) % 60;
		                var s = parseInt(count / 1000) % 60;
		                var ms = parseInt(count / 10) % 100;
		                h = h < 10 ? '0' + h : h;
		                m = m < 10 ? '0' + m : m;
		                s = s < 10 ? '0' + s : s;
		                ms = ms < 10 ? '0' + ms : ms;
		                txt.innerHTML = h + '时' + m + '分' + s + '秒' + ms;
		                count += 10;
		            }
		            , 10)
		        aInput[0].value = '暂停计时';
		    }
		}
		
		aInput[1].onclick = function() {
		    count = 0;
		    clickStart = 0;
		    clearInterval(timer);
		    txt.innerHTML = '00时00分00秒00';
		    aInput[0].value = '开始计时'
		}
	</script>

本文链接：https://www.cnblogs.com/chunyouqudongwuyuan/p/16207017.html

DOM操作标签，事件绑定，jQuery框架