首页 > 其他分享 >JS与前端的交互

JS与前端的交互

时间:2022-12-06 21:23:17浏览次数:34  
标签:jQuery aEle 对象 标签 前端 js 操作 JS 交互

JS与前端的交互

BOM操作

BOM是指浏览器对象模型,它使js能够与浏览器交互
window.open('网址','','打开的窗口尺寸')  打开新窗口
window.close()  关闭当前窗口
navigator对象
	navigator.userAgent  用来向浏览器表明身份的,通常用在爬虫领域
history对象
    history.forward()   前进一页
    history.back()  后退一页
    
window.location.href  获取当前页面所在网址,也可以再加赋值符号和网址跳转
window.location.reload  刷新当前页面
alert()  警告框
confirm()  确认框
prompt()  提示框

计时相关操作

setTimeout(函数名,时长,参数)  设置一个定时任务(时长用的毫秒)
clearTimeout()  取消任务(需要用一个变量接受上面的,然后将变量作为参数传进来)
    
setInterval(函数名,时长)  每隔多长时间执行一次(循环定时任务)
clearInterval()  取消(需要用一个变量接受上面的,然后将变量作为参数传进来)

DOM操作

是文档操作模型,通过它可以访问HTML文档的所有元素

标签操作

直接查找标签

'''
1.js中变量名的命名风格推荐使用驼峰式
2.js代码查找到的标签如果需要反复使用是以使用变量接收
'''
1.id查找
    document.getElementById('id值')  # 结果是标签本身
2.通过类名查找
    document.getElementsByClassName('类名')  # 结果是数组,里面含有标签本身
3.通过标签名查找
    document.getElementsByTagName('标签名')  # 结果是数组,里面含有多个标签

间接查找标签

间接查找标签需要有一个父标签参照物,基于该参照物可以直接用点的方式操作下面的方法
parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

1.js代码创建标签
	let aEle = document.createElement('a')
2.js代码操作标签属性
    aEle.href = 'https://www.jpmn5.cc/'  // 只能添加默认的属性
    setAttribute()  //兼容默认属性和自定义属性
    getAtt9ribute()  // 获取属性
    removeAttribute()  // 删除属性
3.js代码操作标签文本
    aEle.innerText = '许木学长'  // 设置\替换标签内部的文本,不识别标签语法
    aEle.innerText  // 获取标签内部所有的文本内容

    aEle.innerHEML  // 获取标签内部所有的标签包括文本
    aEle.innerHTML = '文本'  // 替换\设置标签内的文本,识别标签语法

获取值的操作

1.针对用户输入和用户选择的标签
    标签对象.value
2.针对用户上传的文件数据
    标签对象.files   // fileList [文件对象、文件对象]
    标签对象.files[0]  // 文件对象

class与css操作

1. js操作标签css样式
    标签对象.style.属性名
2. js操作标签class属性
    标签对象.classList.add()  // 添加类
    标签对象.classList.contains()  // 类存在返回true,否则返回false
    标签对象.classList.remove()  // 删除类
    标签对象.classList.toggle()  // 类存在则删除否则添加

事件

我们可以简单地将事件理解为通过js代码给html标签绑定一些自定义的功能
常见事件
    onclick    当用户点击某个对象时调用的事件句柄
    onfocus    元素获得焦点
    onblur     元素失去焦点
    onchange   域的内容被改变
    
绑定事件的方式一
    <button onclick="showMsg()">方式一</button>
    <script>
            function showMsg() {
                let msg = prompt('这是方式一?');
                console.log(msg)
            }
	</script>

绑定事件的方式二 
    <input type="button" value="方式二" id="d1">
        <script>
            let inputEle = document.getElementById('d1');
            inputEle,onclick = function () {
                alert('这是方式二')
            }

jQuery类库

1.加载速度快
2.选择器更多更好用
3.一行代码走天下
4.支持ajax请求(重点)
5.兼容多浏览器

准备工作
	1.下载核心文件到本地引入(没有网络也可以使用)
    	<script src="jQuery3.6.js"></script>
 	2.CDN网络资源加载(必须有网络才可以使用)
    	https://www.bootcdn.cn/
      # CDN就是内容分发网络 
jQuery导入之后需要使用关键字才可以使用
	默认的关键字就是jQuery,为了使用方便其被简化为 $
    
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快

标签对象与jQuery对象

1.不同的对象能够调用的方法是不同的
	在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换
	标签对象转jQuery对象		
    	$(标签对象)
 	jQuery对象转标签对象
    	jQuery对象[0]

标签:jQuery,aEle,对象,标签,前端,js,操作,JS,交互
From: https://www.cnblogs.com/zyg111/p/16960582.html

相关文章

  • js、jQuery
    BOM操作BOM(BrowserObjectModel)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”window.open()window.open('https://www.sogo.com/','','width=800px,l......
  • JSP指令-概述、page指令
    JSP指令-概述 指令作用:用于配置JSP页面,导入资源文件格式: <%@指令名称属性名1=属性值1属性名2=属性值2...%>JSP指令用来设置整个JSP页面......
  • SpringMVC —— 请求参数(传递json数据)
    接收请求中的json数据         注解     json格式(POJO)  json数组(POJO)   @RequestBody与@RequestParam区别  ......
  • 数据库(js部分讲解)
    BOM操作BOM(BrowserObjectModel)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”window.open() window.open('https://www.sogo.com/','','width=800......
  • JS之BOM与DOM
    目录BOM操作计时器相关操作(重要)DOM操作查找标签操作节点获取值操作class与css操作事件事件实战案例BOM操作所有浏览器都支持window对象。它表示浏览器窗口。*如果文......
  • 前端开发 5 BOM操作与DOM操作
    今日内容详细目录今日内容详细BOM操作window的子对象navigator对象screeen对象history对象location对象弹出框警告框确认框提示框计时相关DOM操作查找标签操作节点获取值......
  • js 字符串与ArrayBuffer互转
    1.情景展示在js当中,如何将字符串转成ArrayBuffer?如何将ArrayBuffer转成字符串?2.字符串转ArrayBuffer/***将类型化数组转字符串Int8Array:8位有符号整数,长度1个字......
  • js base64与字符串互相转换
    1.情景展示在js当中,如何把base64字符串解码成字符串?如何把字符串进行base64编码?2.base64编码将字符串转base64格式window.btoa(str)  3.base64解码将base64格......
  • js2
    今日内容概要BOM操作DOM操作jQuery类库今日内容详细BOM操作BOM(BrowserObjectModel)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”window.o......
  • JS—节流与防抖
     一、js防抖和节流在进行窗口的resize、scroll、输出框内容校验等操纵的时候,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常之差。那么为了前端......