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>

DOM操作标签，事件绑定，jQuery框架的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. DOM操作标签、事件绑定、jQuery框架/类库

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' # 动态创建一个a标签并添加到页面指定 ...

  3. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  4. DOM标签操作与事件与jQuery查找标签

    目录 DOM之操作标签 创建标签对象 标签对象的属性 innerText与innerHTML 标签内部追加内容 属性操作 事件 常用事件 事件绑定 事件案例 jQuery简介 查找标签 基本选择器 属 ...

  5. jQuery之元素操作及事件绑定

    1.操作元素之属性: ①attr读:("selector").attr("属性名"):=>getAttribute("属性名"):改: ...

  6. jquery的链式操作以及事件绑定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery中的DOM操作——《锋利的JQuery》

    jQuery封装了大量DOM操作的API,极大提高了操作DOM节点的效率. 1.查找节点 通过我们上一节介绍了JQuery选择器,可以非常轻松地查找节点元素.不过,这时得到的是jQuery对象,只能使 ...

  8. 前端javascript之BOM、DOM操作、事件

    BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...

  9. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

随机推荐

  1. IOC 初始化源代码阅读之我见

    由于本人的能力有限,只能说出自己的见解,如有错漏什么的,请大家批评指出.由于代码封装太多,这里只列出了我认为的部分最重要的代码,一些简单的封装代码,不在下面列出.由于代码太过于复杂,在本次博客中,只列 ...

  2. Failed to write HTTP message，Could not write JSON错误

    今天遇到使用@ResponseBody注解返回json数据时报错 Failed to write HTTP message: org.springframework.http.converter.Ht ...

  3. torch.optim.SGD参数详解

    随机梯度下降法 $\theta_{t} \leftarrow \theta_{t-1}-\alpha g_{t}$ Code: optimzer = torch.optim.SGD(model.par ...

  4. jsp技术之隐藏域

    隐藏域 hidden:隐藏域属性,不显示到页面上,但是会提交的表单项 注意:表单中增加了一个隐藏域,是用户的id.稍后修改联系人信息,提交表单时需要使用到 <!-- hidden:隐藏域,不显示 ...

  5. 【Linux-vim】vim文件：查看某几行，把某几行复制到另一个文件中

    一.查看文件的某几行1.使用cat命令(1)查看文件的前10行: cat filename |head -n 10(2)查看文件后10行: cat filename |tail -n 10(3)查看文 ...

  6. 又快又好！巧用ChartJS打造你的实用折线图

    又快又好!巧用ChartJS打造你的实用折线图 最终效果 本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线. 要实现最终效果,我们要分三步走: 生成折线图: 生 ...

  7. css使div居中

    每次想要使div居中都会设置position:absolute;,发现设置其他控件位置时会出现问题,所以采用以下办法: margin:0 auto;

  8. formData请求接口传递参数格式

    element ui组件方法的传递 //引入 组件. <el-upload class="avatar-uploader" :action="action" ...

  9. CVE-2022-22947 SpringCloud GateWay SpEL RCE

    CVE-2022-22947 SpringCloud GateWay SpEL RCE 目录 CVE-2022-22947 SpringCloud GateWay SpEL RCE 写在前面 环境准备 ...

  10. SpringCloud Alibaba入门之Nacos(SCA)

    SpringCloud Alibaba Spring Cloud Alibaba 致力于提供微服务开发 的一站式解决方案.此项目包含开发分布式应用微服务的必需组件,方便开发者通过 Spring Clo ...