当前位置： 首页 > news >正文

jquery基础之操作节点对象

news 2025/7/12 14:51:14

jquery操作节点（元素）对象

捕获-DOM操作，获取内容，值

         获取内容：1.text（）获取元素的文本内容
                         2.html（）获取元素的文档内容
                         3.val（）获取元素的value属性
                         4.attr（）获取元素自定义的DOm属性(声明出来的就能获取)
                         5.prop（）获取元素的固有属性（无论声明不声明都能获取）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){console.log("文本内容："+$("div-1").text())console.log("文档内容："+$("div-1").html())$("#btn1").click(function(){console.log($("#input-1").val())})console.log($("#input-1").attr("name"))console.log($("#input-1").attr("disabled"))console.log($("#input-1").prop("value"))console.log("attr获取："+$("#input-1").attr("abc"))console.log("prop获取abc："+$("#input-1").prop("abc"))})</script><body><div id="div-1"><p id="pid" style="color: red;">红色段落</p></div><button id="btn1">打印文本框内容</button><input type="text" name="user" id="input-1" abc="abc"/></body>
</html>

设置-DOM操作，设置内容，值

        1.text("文本内容")设置文本内容
         2.html("文档内容")设置文档内容
         3.val("value值")    设置表单控件的值
         4attr("属性名","属性值")设置自定义属性
          5.prop("属性名"，"属性值")设置固有属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("p").text("<p style='color:red;'>红色文字</p>")})$("#btn2").click(function(){$("p").html("<p style='color:red;'>红色文字</p>")})$("#btn3").click(function(){$("#input-1").val("20")})$("#btn4").click(function(){$("#p1").attr("abc",123)})$("#btn5").click(function(){$("#ckbox").prop("checked",true)})})</script></head><body><p>段落</p><button id="btn1">点击设置文本内容</button><button id="btn2">点击设置文档内容</button> <br /><input type="text" name="user" id="input-1" /> <br /><button id="btn3">点击设置文本框内容</button><p id="p1">段落二</p><button id="btn4">点击设置属性abc为123</button><input type="checkbox" id="ckbox" /><button id="btn5">点击选中</button></body>
</html>

练习实现计算器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//实现计算器工程var input='';var s=0;$("button").click(function(){s=$(this).text()console.log(s);if(s!="ac"&&s!="="){$("#inp1").val(input+=s)}else if(s=="ac"){input=''$("#inp1").val(" ")}else{input=$("#inp1").val()if(input!=''){$("#inp1").val(eval(input))}}})})</script><style type="text/css">button{width: 50px;height: 70px;}input{width: 220px;}</style></head><body><input type="text"  id="inp1"  /><br /><table border="1" whidth="200px" height="300px"><tr><td><button >7</button></td><td><button >8</button></td><td><button >9</button></td><td><button >+</button></td></tr><tr><td><button >4</button></td><td><button >5</button></td><td><button >6</button></td><td><button >-</button></td></tr><tr><td><button >1</button></td><td><button >2</button></td><td><button >3</button></td><td><button >*</button></td></tr><tr><td><button >ac</button></td><td><button >0</button></td><td><button >=</button></td><td><button >/</button></td></tr></table></body>
</html>

添加元素

1.在元素内部添加子元素
             append（）元素内部结尾处追加
             prepend()在元素首部插入

2.在元素外部添加同级元素
             * after()在元素之后插入
             * before()在元素之前插入

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){var element1="<span style='color:green;'>尾部内容1</span>"var element2="<span style='color:blue;'>尾部内容2</span>"
//				$("p").append("<span style='color:red;'>尾部内容</span>")//可以一次追加多个元素，元素之间用，隔开$("#pid").append(element1,element2)})$("#btn2").click(function(){$("p").prepend("<span style='color:red;'>首部内容</span>")})$("#btn3").click(function(){$("p").before("<span style='color:red;'>前内容</span>")})$("#btn4").click(function(){$("p").after("<span style='color:red;'>后内容</span>")})})</script></head><body><p id="pid">段落内容</p><button id="btn1">点击尾部追加内容</button><button id="btn2">点击首部追加内容</button><button id="btn3">点击在p前添加内容</button><button id="btn4">点击在p后添加内容</button></body>
</html>

删除元素

1.remove（）删除被选元素及其子元素
             另一种用法：可以接收一个参数，允许对被删除的元素进行过滤，                               参数可以是任何jquery选择器语法
                 $("p").remove(".pp")删除所有含有class属性是pp的元素

 2.empty（）从被选元素中删除子元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("#div-1").remove()})$("#btn2").click(function(){$("#div-1").empty()})$("#btn3").click(function(){
//				$(".pp").remove() 删除所有class属性为pp的元素
//$("p.pp").remove()		删除p元素中所有class属性为pp的元素$("p").remove(".pp")})})</script></head><body><div id="div-1" style="border: 1px solid #000000;width: 150px;height: 150px;"><p class="pp">1段</p><p class="pp">2段</p><p>3段</p></div><button id="btn1">点击删除div及其子元素</button><button id="btn2">点击清空div</button><button id="btn3">点击删除pp</button></body>
</html>

操作css类

1.addClass（）向被选元素添加一个或多个类

2.removeClass（）向被选元素删除一个或多个类

3.toggleClass（）对被选元素的类进行添加、删除的操作

 4.css（）设置或获取样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){
//			多个类中间用空格隔开$("div:first").addClass("important blue")})$("#btn2").click(function(){
//			多个类中间用空格隔开$("div:first").removeClass("important blue")})$("#btn3").click(function(){
//			多个类中间用空格隔开$("div:last").toggleClass("important blue")})})</script><style type="text/css">.important{font-weight: bold;font-size: xx-large;}.blue{color: blue;}</style></head><body><div>这是一些文本</div><div>这是一些文本</div><button id="btn1">点击向第一个div添加类</button><button id="btn2">点击向第一个div移除</button><button id="btn3">点击向第2个div添加或移除</button></body>
</html>

css（）

1.只填写一个参数，参数为样式名时，获取样式的值
         * $("#p1").css("color")获取id属性为p1的元素文字颜色是什么。

2.传入两个参数，第一个样式名，第二个样式值

3.传入多组样式名样式值，可以同时为元素添加多个样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){alert($("p:first").css("background-color"))})$("#btn2").click(function(){$("p:eq(1)").css("background-color","yellow")})$("#btn3").click(function(){$("p:eq(2)").css({"backgroundColor":"gray","fontSize":"30px"})})})</script></head><body><p style="background-color: red;">这是第一个段落</p><p style="background-color: blue;">这是第二个段落</p><p style="background-color: green;">这是第三个段落</p><button id="btn1">点击获取第一个段落的背景颜色</button><button id="btn2">点击将第二个段落的背景颜色设置为黄色</button><button id="btn3">点击将第三个段落的背景颜色设置为灰色并且将文字大小改为30px</button></body>
</html>

 盒模型尺寸

                     1.width()
                     2.height()
                     元素自身宽高
                     3.innerWidth()
                     4.innerHeight()
                     元素内填充+自身的宽高
                     5.outerWidth()
                     6outerHeight()
                     元素边框+内填充+自身的宽高
                     7.outerWidth(true)
                     8.outerHeight(true)
                     元素外填充+元素边框+内填充+自身的宽高

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {$("#btn1").click(function() {var ptxt = "";ptxt += "div的width:" + $("#div1").width() + "<br\>"ptxt += "div的height:" + $("#div1").height() + "<br\>"ptxt += "div的innerwidth:" + $("#div1").innerWidth() + "<br\>"ptxt += "div的innerheight:" + $("#div1").innerHeight() + "<br\>"ptxt += "div的outwidth:" + $("#div1").outerWidth() + "<br\>"ptxt += "div的outheight:" + $("#div1").outerHeight() + "<br\>"ptxt += "div的outwidth:true" + $("#div1").outerWidth(true) + "<br\>"ptxt += "div的outheight:true" + $("#div1").outerHeight(true) + "<br\>"$("p").html(ptxt)})})</script><style type="text/css">#div1 {border: 5px solid blue;background-color: aqua;width: 300px;height: 100px;/*内填充可以设置四个方向的內填充，方向为上右下左*/padding: 20px 10px 40px 30px;/*外填充可以设置四个方向的值,方向与内填充相同*/margin: 10px 50px 20px 100px;}</style></head><body><div id="div1"></div><button id="btn1">点击获取宽高</button><p></p></body></html>

相关文章：

jquery基础之操作节点对象

jquery操作节点&#xff08;元素&#xff09;对象 捕获-DOM操作&#xff0c;获取内容&#xff0c;值 获取内容&#xff1a;1.text&#xff08;&#xff09;获取元素的文本内容 2.html&#xff08;&#xff09;获取元素的文档内容 …...

编程日记 2023/5/18 10:05:30

对于Java的深入理解及其特点--面试

前言 计算机语言千千万&#xff0c;每一种语言都有其自己的特点、擅长的领域。在学习了Java之后才对Java有了进一步的理解。 面试问一&#xff1a; 你是如何理解Java这门语言的&#xff1f; 这里我们应该从下面几个点去总结 1、Java语言具有的属性 2、他的特点在哪 Java语…...

编程日记 2023/4/17 1:32:22

Linux GPSD的使用

目录 1: GPSD 运行状态查看 2：停止GPSD 服务 3： GPSD运行输出(协议的识别) 4：开启的服务...

编程日记 2023/5/12 15:51:19

ArrayList无参构造添加元素源码解读

一、ArrayList无参构造add方法源码阅读 Test//无参构造源码阅读 public void testArrayListNoConstructorAdd(){ArrayList<Integer> arrayList new ArrayList<>();ArrayList<Integer> list new ArrayList<>();arrayList.add(1);arrayList.add(12);a…...

编程日记 2023/4/15 14:53:12

手写简易 Spring（二）

文章目录手写简易 Spring&#xff08;二&#xff09;1. 扩展 BeanFactory 接口2. 实现资源加载器&#xff0c;从 Spring.xml 解析和注册 Bean 对象1. 核心实现类 XmlBeanDefinitionReader3. 实现应用上下文&#xff0c;自动识别、资源加载、扩展机制1. 应用上下文2. 核心实现类…...

编程日记 2023/4/24 22:39:36

排列问题DFS入门

1、题目描述&#xff08;全排列&#xff09; 输入一个正整数n&#xff0c;输出1~n的全排列。 输入格式 一个正整数n。 输出格式 所有1~n的全排列&#xff0c;每个排列占一行。 样例输入 3 样例输出 1 2 3 1 3 2 2 1 3 2 3 1 3 1 2 3 2 1 算法思路 题目要求输出n的全…...

编程日记 2023/5/12 15:52:43

【每日一题Day159】LC1638统计只差一个字符的子串数目 | 枚举

统计只差一个字符的子串数目【LC1638】 给你两个字符串 s 和 t &#xff0c;请你找出 s 中的非空子串的数目&#xff0c;这些子串满足替换 一个不同字符 以后&#xff0c;是 t 串的子串。换言之&#xff0c;请你找到 s 和 t 串中 恰好 只有一个字符不同的子字符串对的数目。 比…...

编程日记 2023/5/16 8:32:52

【07 Metadata and VendorTag】

1. Metadata结构及分类 一个 metadata 通过tag，value及 type 来描述。不同的 metadata 分成三类 controls，dynamic 及 static 2. MTK Metadata IMetadata Mtk metadata containerIMetadataConverter Provide mutual conversion for Android camera_metadata and MTK Imetada…...

编程日记 2023/5/16 8:36:59

Golang中Model的使用

导语我们都知道在Golang中我们一般都是设置GOPATH目录&#xff0c;这个目录主要存放我们的第三方包&#xff0c;这个方式一直不是很方便&#xff0c;今天给大家介绍Go 1.11版本中推出的GoModul使用方法&#xff0c;学过java的同学&#xff0c;可能对maven包有所了解&#xff0c…...

编程日记 2023/5/17 3:00:06

交友项目【基础环境搭建】

目录 1&#xff1a;交友项目架构介绍 1.1&#xff1a;前后端分离的概述 1.2&#xff1a;YAPI介绍&#xff08;虚拟机中已经配好&#xff09; 基本信息 使用 安装跨域拓展&#xff08;浏览器上安装跨域处理插件&#xff09; 2&#xff1a;虚拟机工具项目搭建 2.1&#xff1…...

编程日记 2023/5/16 8:38:23

入职时，公司要求自己带电脑，每月给100元补贴，如果不接受就不能入职！

为了节约成本&#xff0c;公司能做出什么事&#xff1f;一位网友遇到了这样的事&#xff1a;入职时&#xff0c;公司要求自己带电脑&#xff0c;每个月给100元补贴&#xff0c;如果不接受就得放弃入职&#xff0c;这样的公司有没有坑&#xff1f;有人问&#xff1a;连基本的公司…...

编程日记 2023/5/18 10:05:39

20道经典Redis面试题

20道经典Redis面试题 前言 整理了20道经典Redis面试题&#xff0c;希望对大家有帮助。 1. 什么是Redis&#xff1f;它主要用来什么的&#xff1f; Redis&#xff0c;英文全称是Remote Dictionary Server&#xff08;远程字典服务&#xff09;&#xff0c;是一个开源的使用A…...

编程日记 2023/5/12 16:15:05

十分钟带你看懂接口测试，2023最全超大型接口测试攻略

一、什么是接口测试&#xff1f; 所谓接口&#xff0c;是指同一个系统中模块与模块间的数据传递接口、前后端交互、跨系统跨平台跨数据库的对接。而接口测试&#xff0c;则是通过接口的不同情况下的输入&#xff0c;去对比输出&#xff0c;看看是否满足接口规范所规定的功能、…...

编程日记 2023/5/17 23:34:27

【设计模式】创建型-单例模式

文章目录一、单例模式二、单例模式的八种实现方式2.1、饿汉式&#xff08;静态常量&#xff09;2.2、饿汉式&#xff08;静态代码块&#xff09;2.3、懒汉式&#xff08;线程不安全&#xff09;2.4、懒汉式&#xff08;线程安全&#xff0c;同步方法&#xff09;2.5、双重检查2…...

编程日记 2023/5/16 8:39:41

Python 练习 六

1、(最大数的出现)编写程序读取整数,找出它们中的最大值&#xff0c;然后计算它的出现次数。假设输入以数字0结束。假设你输入的是“352555 0";程序找出的最大数是5&#xff0c;而5的出现次数是4。(提示:维护两个变量max和 count。变量max存储的是当前最大数&#xff0c;而…...

编程日记 2023/5/17 3:01:25

「SQL面试题库」 No_22 员工奖金

&#x1f345; 1、专栏介绍 「SQL面试题库」是由 不是西红柿 发起&#xff0c;全员免费参与的SQL学习活动。我每天发布1道SQL面试真题&#xff0c;从简单到困难&#xff0c;涵盖所有SQL知识点&#xff0c;我敢保证只要做完这100道题&#xff0c;不仅能轻松搞定面试&#xff0…...

编程日记 2023/5/16 8:41:08

瞒不住了，Prefetch 就是一个大谎言

本文正在参加「金石计划」 Prefetch 是一个谎言 我们知道&#xff0c;现在的应用程序已经发展到可以拆分为多个 JavaScript包了&#xff0c;为了获得更好的用户体验&#xff0c;这些 bundle 包通常需要预获取&#xff0c;即 prefetch! 但是现在的prefetch 效果有多糟糕我想你…...

编程日记 2023/5/16 8:42:46

这个时候了，你还不会不知道JavaMail API吧

一、概述 1.1 简述 JavaMail API 顾名思义&#xff0c;提供给开发者处理电子邮件相关的编程接口&#xff0c;它是Sun发布的用来处理email的API&#xff0c;其提供独立于平台且与协议无关的框架来构建邮件和消息传递应用。JavaMail API 提供了一组抽象类&#xff0c;用于定义组…...

编程日记 2023/5/12 16:18:38

JavaScript var let区别

文章目录JavaScript var & let区别变量作用域变量提升变量重复声明全局对象属性for循环中的作用域JavaScript var & let区别 var和let都是用来声明变量的关键字。 变量作用域 var声明的变量作用域是函数作用域或全局作用域&#xff0c;而let声明的变量作用域是块级作…...

编程日记 2023/4/16 18:28:57

Thinkphp 6.0容器和依赖注入

本节课我们来学习一下依赖注入的用法&#xff0c;以及容器的用法。 一&#xff0e;依赖注入 1. 手册对依赖注入比较严谨的说明&#xff0c;具体如下&#xff1a; 依赖注入其实本质上是指对类的依赖通过构造器完成自动注入&#xff0c;例如在控制器架构方法和操作 方法中一旦对参…...

编程日记 2023/5/18 10:07:22

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2025/7/1 10:09:55

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/6/17 15:33:10

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/6/15 19:02:54

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/7/11 4:08:56

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/7/8 21:35:16

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/7/7 20:05:25

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/7/10 2:41:40

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/7/6 13:29:31

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/6/21 2:45:17

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/7/11 0:32:35