ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

EducoderjQuery DOM操作 第1关:jQuery获取内容和属性

2022-05-30 00:03:29  阅读:220  来源: 互联网

标签:jQuery console attr DOM 元素 html 如下 获取 EducoderjQuery


任务描述

本关任务:用jQuery获取元素的内容和属性。效果如下:

相关知识

为了完成本关任务,你需要掌握:1.获取元素的内容,2.获取元素的属性。

获取元素的内容

基本的html结构如下:

  1. <p><srtong>我是 srtong 标签</strong>我是文本内容</p>

如何获取p标签的内容呢?这里有两种方法,要注意区分,代码如下:

  1. $("p").text();
  2. $("p").html();

效果图如下:

可以看出:

  • text()是获取所选元素的文本内容,html 标签的内容已经转化;

  • html()是获取所选元素的内容,包括 html 标签。

基本的html结构如下:

  1. <input type="text" placeholder="Educoder平台"/>
  2. <p></p>

如何获取input标签的value值呢?这里有一个专门获取表单value值的方法val(),代码如下:

  1. var val = $("input").val(); //获取表单的 value 值
  2. $("p").text(val);

效果如下:

获取元素的属性

基本的html结构如下:

  1. <div class="box" id="wrap" name="容器" data-count="none">
  2. </div>

如何获取该div的各种属性呢?这里用attr(),代码如下:

  1. console.log($(".box").attr("class"));
  2. console.log($(".box").attr("id"));
  3. console.log($(".box").attr("name"));
  4. console.log($(".box").attr("data-count"));

效果图如下:

标签:jQuery,console,attr,DOM,元素,html,如下,获取,EducoderjQuery
来源: https://www.cnblogs.com/Tim161718/p/16325354.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有