jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客- | ImapBox

jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-

03 六月
星期三, 03 六月 2020 11:37 Last Updated on 星期三, 03 六月 2020 11:37 0 Comments

jQuery – 获取内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法。
DOM = Document Object Model（文档对象模型）

  • jQuery 中非常重要的部分，就是操作 DOM 的能力。
  • jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

DOM操作

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() – 设置或返回所选元素的文本内容
  • html() – 设置或返回所选元素的内容（包括 HTML 标记）
  • val() – 设置或返回表单字段的值
  • attr() 方法用于获取属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script> <script>    $(document).ready(function(){    $("#btn1").click(function(){ alert("Text：" + $('#test').text()); });    $("#btn2").click(function(){ alert("html:" + $('#test').html()); }); }); </script> </head> <body> <p id="test">這是段落中的<b>粗文本</b></p> <button id="btn1"> 顯示文本</button> <button id="btn2"> 顯示HTML</button> </html>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200531110852243.gif)

jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-

<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ alert("值为: " + $("#test").val()); }); }); </script> </head> <body> <p>名称: <input type="text" id="test" value="值"></p> <button>显示值</button> </body> </html>

jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#baidu").attr("href")); }); }); </script> </head> <body> <p><a href="//www.baidu.com" id="baidu">百度一下</a></p> <button>显示 href 属性的值</button> </body> </html>

jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-

设置内容和属性

设置内容 – text()、html() 以及 val()

  • text() – 设置或返回所选元素的文本内容
  • html() – 设置或返回所选元素的内容（包括 HTML 标记）
  • val() – 设置或返回表单字段的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('#btn1').click(function(){ $('#test').text('很高兴认识你'); }); $('#btn2').click(function(){ $('#test2').html("<b>很高兴认识你</b>"); }); $('#btn3').click(function(){ $('#test3').val("很高兴认识你"); }); }); </script> </head> <body> <p id="test">变成文本</p> <p id="test2">变成html</p> <p >一只文本框框<input type="text" id="test3" value="框框框"></p> <button id="btn1">设置文本</button> <button id="btn2">设置HTML</button> <button id="btn3">设置值</button> </html>

jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-
text()、html() 以及 val() 的回调函数
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回你希望使用的字符串。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; }); }); }); </script> </head> <body> <p id="test1">这是一个有 <b>粗体</b> 字的段落。</p> <p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p> <button id="btn1">显示 新/旧 文本</button> <button id="btn2">显示 新/旧 HTML</button> </body> </html>

jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-
设置属性 – attr()

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#baidu").attr("href","http://www.weibo.com/jquery"); }); }); </script> </head> <body> <p><a href="//www.baidu.com" id="baidu">百度一下</a></p> <button>修改 href 值</button> <p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p> </body> </html>

添加元素

  • append() – 在被选元素的结尾插入内容

  • prepend() – 在被选元素的开头插入内容

  • after() – 在被选元素之后插入内容

  • before() – 在被选元素之前插入内容
    通过 append() 和 prepend() 方法添加若干新元素

<script> function appendText(){ var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p");  txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 } </script> 
<body> <p>这是一个段落。</p> <button onclick="appendText()">追加文本</button> </body>

after() 和 before() 方法
after() 和 before() 方法能够通过参数接收无限数量的新元素。
可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

删除元素

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

  • remove() – 删除被选元素（及其子元素）
  • empty() – 从被选元素中删除子元素

获取并设置css类

  • addClass() – 向被选元素添加一个或多个类

  • removeClass() – 从被选元素删除一个或多个类

  • toggleClass() – 对被选元素进行添加/删除类的切换操作

  • css() – 设置或返回样式属性

css（）方法

css() 方法设置或返回被选元素的一个或多个样式属性

返回 CSS 属性

css(“propertyname”);

$("p").css("background-color");

设置 CSS 属性

css(“propertyname”,“value”);

$("p").css("background-color","yellow");

设置多个 CSS 属性
css({“propertyname”:“value”,“propertyname”:“value”,…});

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery尺寸

  • width() 设置或返回元素的宽度（不包括内边距、边框或外边距）
  • height() 设置或返回元素的高度（不包括内边距、边框或外边距）
  • innerWidth() 返回元素的宽度（包括内边距）
  • innerHeight() 返回元素的高度（包括内边距）
  • outerWidth() 返回元素的宽度（包括内边距和边框）
  • outerHeight() 返回元素的高度（包括内边距和边框）

jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-

  • jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客- jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客- 1
  • jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客- 评论
  • jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-
    x

    海报

    扫一扫，海报

  • jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客- jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-
  • jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客- 手机看

    到微信朋友圈

    x

    扫一扫，手机阅读

  • jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-打赏

    打赏

    jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-

    周偏偏偏

    “你的鼓励将是我创作的最大动力”

    5C币 10C币 20C币 50C币 100C币 200C币

jQuery学习笔记整理[那就算半只教程吧(◕ܫ◕)]（三）Miracle1203的博客-



 
 
 
 


本页所有内容来自官方网站 http://www.imapbox.com 新闻来源：互联网搜索引擎和新闻站

本网页所有图片由 ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片，下载并得到。

ImageBox 图片批量下载器 工具地址: 网页图片批量下载工具-最新版本下载

非凡下载站地址：http://www.crsky.com/soft/35838.html

本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。

ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载

本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.




文章目录

  • 全球报导 (16311)
  • 全球云计算 (29506)
  • 程序员专区 (1974)
  • Imap 全球通用标准协议 (7)
  • 全球邮局列表 (17)
  • Imapbox 系列软件 (3)
  • 产品一览 (6)
  • 事业方向 (7)
  • 联系我们 (2)

官方链接

imapbox邮箱网盘 imapbox 海外官网 iMapBox百度百科

登录