iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery中DOM属性使用实例详解下篇
  • 153
分享到

jQuery中DOM属性使用实例详解下篇

2024-04-02 19:04:59 153人浏览 泡泡鱼
摘要

目录DOM属性(下).html().val().attr().removeAttr()DOM属性(下) .html() 获取集合中第一个匹配元素的HTML内容 在一个 HTML 文档

DOM属性(下)

.html()

获取集合中第一个匹配元素的HTML内容

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多个元素,那么只有第一个匹配元素的 HTML 内容会被获取。

$('div.demo-container').html();

html()方法还可以设置每一个匹配元素的html内容。

我们可以使用 .html() 来设置元素的内容,这些元素中的任何内容会完全被新的内容取代。

$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');

.val()

获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。主要用于<input>标签

获取内容

$(".input").val();

设置内容

$(".input").val("username")

.attr()

获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。

.attr()方法只获取第一个匹配元素的属性值。

使用 Jquery的 .attr() 方法得到了一个元素的属性值主要有两个好处:

  • 方便:它可以直接被jQuery对象访问并且链式调用其他jQuery方法。
  • 浏览器兼容:一些属性在不同浏览器中得到不同的值。 甚至在同一个浏览器的不同版本中。 .attr() 方法减少了兼容性问题。
<!DOCTYPE html>
<html>
<head>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
  <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
  <img />
  <img />
  <img />
  <div><B>Attribute of ajax</B></div>
<script>
$("img").attr({
  src: "images/hat.gif",
  title: "jQuery",
  alt: "jQuery LoGo"
});
$("div").text($("img").attr("alt"));
</script>
</body>
</html>

.removeAttr()

为匹配的元素集合中的每个元素中移除一个属性(attribute)。

input.removeAttr("title")

以上就是jQuery中DOM 属性使用实例详解下篇的详细内容,更多关于jQuery DOM 属性的资料请关注编程网其它相关文章!

--结束END--

本文标题: jQuery中DOM属性使用实例详解下篇

本文链接: https://www.lsjlt.com/news/166392.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery中DOM属性使用实例详解下篇
    目录DOM属性(下).html().val().attr().removeAttr()DOM属性(下) .html() 获取集合中第一个匹配元素的HTML内容 在一个 HTML 文档...
    99+
    2024-04-02
  • jQuery中DOM属性使用实例详解上篇
    目录DOM属性(上).addClass().removeClass().toggleClass().hasClass()DOM属性(上) .addClass() 为每个匹配的元素添加...
    99+
    2024-04-02
  • React中的ref属性的使用示例详解
    目录ref 简介1. 字符串形式的ref2. create形式的ref3. 回调函数形式的ref总结:ref 简介 React提供的这个ref属性,表示为对组件真正实例的引用,其实就...
    99+
    2023-05-17
    React ref属性使用 React ref属性
  • js中hasOwnProperty的属性及实例用法详解
    1、js不会保护hasOwnProperty被非法占用,如果一个对象碰巧存在这个属性, 就需要使用外部的hasOwnProperty 函数来获取正确的结果。 2、当检查对象上某个属性...
    99+
    2024-04-02
  • React组件实例三大属性statepropsrefs使用详解
    目录一、 State1.概念2.State的简单用法3. JS绑定事件4.react 绑定事件5.react this指向问题6.修改state值7.代码简写二、props...
    99+
    2024-04-02
  • react组件实例属性props实例详解
    目录react组件实例属性propspropsprops简单使用props批量操作props属性类型限制props属性限制的简写函数组件使用props补充:React之组件实例的三大...
    99+
    2023-01-30
    react组件实例属性props react props
  • react组件实例属性state详解
    目录react组件实例属性statestatestate简写补充:react中的state详解statesetState有两种格式react组件实例属性state state 有状态...
    99+
    2023-02-02
    react组件实例属性state react state属性 react组件实例
  • Rust中的derive属性示例详解
    目录1. Rust中的derive是什么?2. derive的出现解决了什么问题?3. derive如何使用?4. 有哪些常用的derive属性?1. Rust中的derive是什么...
    99+
    2023-05-16
    Rust中derive属性 Rust derive属性
  • Vue.js实现watch属性的示例详解
    目录1.写在前面2.watch的实现原理3.立即执行的watch与回调执行时机立即执行的回调函数回调函数的执行时机4.过期的副作用函数和cleanup5.写在最后1.写在前面 在上篇...
    99+
    2024-04-02
  • Vue监听属性图文实例详解
    目录 什么是监听属性?监听属性和计算属性的区别?监听属性的使用深度监听立即调用写在最后 什么是监听属性? 所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应,监听属性...
    99+
    2024-04-02
  • Vueextends属性的用法示例详解
    目录引言App.vueSon.vueHelloWorld.vue小结引言 最近在看抖音——《小山与 bug》,看到一个很神奇的 Vue 继承组件的方法,后来...
    99+
    2024-04-02
  • Python中类的声明,使用,属性,实例
    类的定义: 定义类 在Python中,类的定义使用class关键字来实现 语法如下: class className: "类的注释" 类的实体 (当没有实体时 使用pass代替) 下面定义一个鸟类; class ...
    99+
    2023-01-31
    实例 属性 声明
  • JDK19新特性使用实例详解
    目录前提新特性列表新特性使用详解Record模式Linux/RISC-V移植外部函数和内存API虚拟线程向量APIswitch匹配模式结构化并发前提 JDK19于2022-09-20...
    99+
    2024-04-02
  • Echarts中legend属性使用的方法详解
    目录orientx/y(left/top)样式设置itemGapitemHeighttextStyleselecteddata补充:自定义legend属性总结Echarts的lege...
    99+
    2024-04-02
  • jquery中ajax方法的参数属性及作用实例分析
    这篇“jquery中ajax方法的参数属性及作用实例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起...
    99+
    2024-04-02
  • Vue中router-link常用属性使用案例讲解
    目录Vue中router-link常用属性使用router-link属性vue中的router-link属性详解router-link标签router-link属性值详解Vue中ro...
    99+
    2023-01-05
    Vue中router-link属性 Vue中router-link属性使用
  • vue3name属性的使用技巧详解
    目录引言使用步骤引言 如果你在 vue3 开发中使用了 <script setup> 语法的话,对于组件的 name 属性,需要做一番额外的处理。 对于 vue@3.2....
    99+
    2024-04-02
  • ajax在js中和jQuery中的用法实例详解
    目录原生 JS 怎么发送一个 get 请求怎么发送一个 post 请求发送一个带有参数的 get 请求发送一个带有参数的 post 请求jQuery $.get 几个参数,怎么使用$...
    99+
    2024-04-02
  • css中float属性的使用示例
    这篇文章将为大家详细讲解有关css中float属性的使用示例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、什么是浮动?浮动,顾名思义,就是漂浮的意思。指的是一个元素脱离文档流,悬浮在父元素之上的现象。...
    99+
    2023-06-08
  • CSS中margin属性的使用案例
    这篇文章主要为大家展示了“CSS中margin属性的使用案例”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS中margin属性的使用案例”这篇文章吧。 设...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作