DOM

事件绑定

当触发事件时,会执行一段代码(这段代码我们通常封装成一个事件处理函数)

如何为一个元素绑定事件

步骤:

获取元素对象
声明一个事件处理函数
给元素对象添加事件监听器,也就是调用addEventListener方法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button class="btn1">打印触发的事件对象</button><script>//获取元素对象var btnObj = document.getElementsByClassName('btn1')[0];console.log(btnObj);//getElementsByClassName返回元素集合,所以要用索引来获取其中的某一个元素//声明一个事件处理函数function btn1Checked(event){console.log(event);alert("btn1被点击啦");}function btn1Checked2(event){console.log(event);alert("btn1再次被点击");}//给btn1添加事件监听器btnObj.addEventListener('click',btn1Checked);//为click事件绑定第二个事件btnObj.addEventListener('click',btn1Checked2);/*2.为元素的特定属性设置事件处理函数特定属性:带有on开头的属性元素对象.事件属性名 = function(){//代码}注意:这个方法可以为一个元素绑定多个事件但是一个事件只能绑定一个处理函数*/btnObj.onmouseout = function(){alert("鼠标移开btn1了");}</script></body>
</html>

注意:

onclick与click的用法区别

 //获取元素对象var btnObj = document.getElementsByClassName('btn1')[0];console.log(btnObj);//getElementsByClassName返回元素集合,所以要用索引来获取其中的某一个元素//声明一个事件处理函数function btn1Checked(event){console.log(event);alert("btn1被点击啦");}//给btn1添加事件监听器btnObj.addEventListener('click',btn1Checked);/*2.为元素的特定属性设置事件处理函数特定属性:带有on开头的属性元素对象.事件属性名 = function(){//代码}注意:这个方法可以为一个元素绑定多个事件但是一个事件只能绑定一个处理函数*/btnObj.onclick = function(){alert("btn1被点击啦");}

getElementsByClassName返回元素集合,所以要用索引来获取其中的某一个元素
```
var btnObj = document.getElementsByClassName('btn1')[0];
```

this的作用

var divObj = document.getElementsByTagName('div')[0];
function fn1(){//this添加这个监听的dom对象this.style.width = '200px';this.style.height = '200px';this.style.backgroundColor = 'red';}//this添加这个监听的dom对象divObj.addEventListener('mouseover',fn1)

增删改节点

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {width: 200px;height: 200px;}.box1 {background-color: antiquewhite;}.box2 {background-color: brown;}.box3 {background-color: black;}</style></head><body><div class="box1"></div><div class="box3"></div><script>增删改 节点  代码!!!增删改 节点  代码!!!</script></body>
</html>

准备:

创建元素:
- document.createElement(‘标签名’)
添加属性:
- 新添加的元素对象.属性名 = ‘属性值’

let newElement = document.createElement('div');
newElement.className = 'box2';//className不需要加'.'

注意:

属性名className 后面的属性值不需要加 ’ . ’
例如:
- newElement.className = ‘. box2’;是错误的
- newElement.className = ‘box2’;是正确的

添加子元素

1.获取父元素对象
- body 直接用document.body
2.为父元素添加一个子元素对象
- 父元素对象.appendChild(子元素对象)

document.body.appendChild(newElement);

prepend向父元素头部添加子节点

document.body.prepend(newElement)

删除当前元素

remove()删除当前元素
要删除的元素对象.remove()

let box1 = document.getElementsByClassName('box1')[0]box1.remove()

替换

replaceWith 用一个节点替换另一个节点
要被替换的节点对象.replaceWith(newNote)

let box1 = document.getElementsByClassName('box1')[0]
box1.replaceWith(newElement);

jQuery 部分

01_jQuery的引用和使用

$是jQuery的核心函数,jQuery的所有功能都是通过这个函数来进行的
通过$获取jQuery对象 $(‘选择器名称’)
jQuery对象实际上是一个数组(类似数组)，可以访问里面的数组元素
- 注意:这个数组元素就是DOM对象
dom对象转换为jQuery对象
- 将dom对象作为参数传入 $( )函数中
- 注意单引号 ’ ’ 例如:let btn = (‘.btn’)

js中获取dom对象	let boxObj = document.getElementsByClassName(‘box’)[0];
通过$获取jQuery对象	let $boxs = $(‘.box’)
获取jQuery对象中的DOM对象	$boxs[0]
通过get获取DOM对象	get(0)
dom对象转换为jQuery对象	let $box = $(boxObj);
eq(index)函数返回index索引对应dom元素的jQuery对象	$boxs.eq(0)

02_设置样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box {width: 200px;height: 200px;}</style></head><body><div class="box" style="height: 150px;background-color: aqua;"></div><div class="box" style="width: 150px;"></div><script src="js/jquery-3.6.2.min.js"></script><script>let $boxs = $('div')     </script>    </body>
</html>

css函数读取样式

//css函数读取样式  读取jQuery对象中的第一个dom元素的属性值console.log($boxs);console.log($boxs.css('width'));console.log($boxs.css('height'));//可以传入一个样式名数组console.log($boxs.css(['height','width']));

css函数设置样式

//css函数设置样式  为jQuery对象中的所有dom元素都设置上样式 $boxs.css('width','400px')$boxs.css('background-color','red')$boxs.css('background-color',function(index,value){//index 当前数组成员的索引console.log('index:',index);//value 当前数组成员对应的 background-color的属性值console.log('value:',value);//返回值   新的属性值return index % 2 === 0 ? 'green':'red'; })

03_操作类

当我们修改jQuery对象时,他会自动修改jQuery对象中的所有元素,这个称为jQuery的隐式迭代

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{width: 200px;height: 200px;}.active{background-color: aquamarine;}.box2{border: 2px solid brown;}</style></head><body><div class="box active"></div><div class="box active box2"></div><script src="js/jquery-3.6.2.min.js"></script><script>/*当我们修改jQuery对象时,他会自动修改jQuery对象中的所有元素这个称为jQuery的隐式迭代*/let $boxs = $('.box')  </script></body>
</html>

添加类	$boxs.addClass(‘box2’)
删除类	$boxs.removeClass(‘active’)
开关类有就删除,没有就添加啊	$boxs.toggleClass(‘box3’)
判断是否存在某个类	console.log($boxs.hasClass(‘box3’));

04_设置属性

设置属性和设置样式有些相识

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{width: 200px;height: 200px;}.active{background-color: aquamarine;}.box2{border: 2px solid brown;}</style></head><body><div class="box active" my-hhh='hhhh'></div><div class="box active box2"></div><input type="text" value="111" disabled><script src="js/jquery-3.6.2.min.js"></script><script>let $boxs = $('.box')  let $input = $('input')</script></body>
</html>

读取属性读取jQuery中的第一个元素的属性值	console.log($boxs.attr(‘class’));
读取自定义属性	console.log(‘读取自定义属性’,$boxs.attr(‘my-hhh’));
设置属性	$input.attr(‘value’,‘222’)
删除属性	$boxs.removeAttr(‘my-hhh’)

js的disabled

js设置属性 disabled表示禁用被禁用的 input 元素是无法使用和无法点击的

//注意:jQuery对象的数组元素是DOM对象$input[0].disabled = true//设置为true禁用$input[0].disabled = false//设置为false可用

jQuery的disabled

disabled表示禁用被禁用的 input 元素是无法使用和无法点击的
- ```
$input.attr('disabled',false)//设置为可使用
```

一起打印复选框和单选框对应的值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="checkbox" value="111">西瓜<input type="checkbox" value="222">苹果<input type="radio" name="sex" value="男" checked/>男<input type="radio" name="sex" value="女"/>女<button class="btn">打印</button><script src="js/jquery-3.6.2.min.js"></script><Script>let $btn = $('.btn')$btn.on('click',function(){$('input:checked').each(function(index,element){// console.log($(element).val());//$(element) 转换为jQuery对象console.log($(this).val());})})</Script></body>
</html>

```
let $btn = $('.btn')
```
- dom对象转换为jQuery对象
  - 将dom对象作为参数传入 $( )函数中
  - 注意单引号 ’ ’
  - 这里的btn是class名,所有需要 .

$btn.on('click',function(){})

jQuery对象 : $btn
- $btn.on( )调用自己的on( )方法

相似的例子解读

/*使用on函数绑定事件on('事件名称','事件处理函数')*///1.声明事件处理函数function click1(event){//event事件对象 , 是在触发事件时,浏览器生成的事件对象console.log(event);console.log('click1');}// 2.给jQuery对象绑定事件$box.on('click',click1)

可以使用匿名函数
$box.on(‘click’,click1)中不需要函数名click1,将click1直接替换成function(){}

$('input:checked').each(function(index,element){})

each : 遍历属性中有checked的 input元素

相似例子解读

const $lis = $('ul>li')$lis.each(function(index,element){//第一个参数 index 索引console.log(index);//第二个参数 element 是指dom对象console.log(element);//$(element)将dom对象转换为jQuery// $(element).css('color','red')// 索引为偶数的li颜色为红色,奇数的为绿色$(element).css('color',index % 2 === 0 ? 'red': 'green')})

```
// console.log($(element).val());//$(element) 转换为jQuery对象console.log($(this).val());
```
- 在each方法中element和this指同一个对象(input元素),且都是dom对象,所有需要$( )进行转换成jQuery对象
- val( )方法:获取input元素的value值

华清远见重庆中心——前端阶段个人总结相关推荐

华清远见-重庆中心-前端阶段技术总结
华清远见-重庆中心-前端阶段技术总结 HTML Hyper Text Markup Language 超文本标记语言超文本:超级文本/超链接文本,超越了文本的限制,如多媒体文件.超链接等. 标记:也 ...
华清远见-重庆中心-前端阶段技术总结/个人总结
目录认识前端客户端/服务器模式使用方法特点浏览器/服务器模式使用方法特点学习前端的重要性浏览器作用主流/推荐的浏览器前端学习网站推荐编写软件 HTML部分定义标签标 ...
华清远见-重庆中心-前端阶段个人总结
为什么要学习WEB前端基础由于JavaEE是BS模式,必须要使用浏览器渲染页面,程序都需要页面呈现数据. 所以后台开发,需要知道如何将数据显示在页面中. 学习WEB基础,就是学习开发网页. 网页是一 ...
华清远见-重庆中心-前端阶段总结
HTML Hyper Text Markup Language 超文本标记语言超文本:超级文本/超链接文本,超越了文本的限制,如多媒体文件.超链接等标记:也可以称为标签,用<>括起来的 ...
华清远见-重庆中心-框架阶段技术总结/知识点梳理
文章目录华清远见-重庆中心-框架阶段技术总结/知识点梳理/个人总结框架 Java主流框架 Spring 概念组成名词解释 IOC DI Spring控制台应用 1.创建一个普通的Maven项目 ...
华清远见-重庆中心-前端技术阶段
花了两周多的时间对HTML.CSS.JavaScript和jQuery进行系统性的学习,学习完了后打算花一点时间对之前学习的内容进行复习巩固与总结,划分熟悉程度进行不同程度的梳理,顺便记录. 复习 H ...
华清远见-重庆中心-前端技术总结/知识点梳理/个人总结/面试题解析
HTML 1.1什么是HTML 超文本:有视频,音频,图片等,超越文本超文本标记语言(Hyper Text Markup Language) 标记语言:有一套标签 1.2标签是由<>包 ...
华清远见重庆分中心——前端阶段技术个人总结
目录前端自学网站好用的网站 HTML 常用标签文字图片img 列表ul/ol/li 无序列表ul 有序列表ol 表格table 多媒体音频audio 视频video 水平线hr 换行br a ...
华清远见-重庆中心-JavaWeb阶段技术总结/知识点梳理/个人总结
文章目录 JavaWeb B/S与C/S模式网站网页网络服务器 Tomcat 下载目录结构 Maven 使用IDEA创建基于Maven的Web项目 1.新建webapp模板 2.设置项目名称和 ...

华清远见重庆中心——前端阶段个人总结

DOM

事件绑定

如何为一个元素绑定事件

步骤:

注意:

this的作用

增删改节点

准备:

注意:

添加子元素

prepend向父元素头部添加子节点

删除当前元素

替换

jQuery 部分

01_jQuery的引用和使用

02_设置样式

css函数读取样式

css函数设置样式

03_操作类

04_设置属性

js的disabled

jQuery的disabled

一起打印复选框和单选框对应的值

华清远见重庆中心——前端阶段个人总结相关推荐

最新文章

热门文章

华清远见重庆中心——前端阶段个人总结

DOM

事件绑定

如何为一个元素绑定事件

步骤:

注意:

this的作用

增删改 节点

准备:

注意:

添加子元素

prepend向父元素头部添加子节点

删除当前元素

替换

jQuery 部分

01_jQuery的引用和使用

02_设置样式

css函数读取样式

css函数设置样式

03_操作类

04_设置属性

js的disabled

jQuery的disabled

一起打印复选框和单选框对应的值

华清远见重庆中心——前端阶段个人总结相关推荐

最新文章

热门文章

增删改节点