jQuery HTML

编程语言 jikk345 526℃ 0评论

一、jQuery – 获取内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法。

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

DOM = Document Object Model(文档对象模型)
DOM 定义访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
获得内容 – text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() – 设置或返回所选元素的文本内容
html() – 设置或返回所选元素的内容(包括 HTML 标记)
val() – 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>text() 和 html() 方法来获得内容</title>
  6. </head>
  7. <body>
  8. <p id="test">这是段落中的<b>粗体</b>文本。</p>
  9. <button id="btn1">显示文本</button>
  10. <button id="btn2">显示HTML</button>
  11. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  12. <script>
  13. $(document).ready(function () {
  14. $("#btn1").click(function () {
  15. alert("Text:" + $('#test').text())
  16. });
  17. $("#btn2").click(function () {
  18. alert("Text:" + $('#test').html())
  19. });
  20. })
  21. </script>
  22. </body>
  23. </html>
结果
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>val()方法来获取内容</title>
  6. </head>
  7. <body>
  8. <p><input type="text" id="test" value="清麟"></p>
  9. <button>显示值</button>
  10. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  11. <script>
  12. $(document).ready(function () {
  13. $('button').click(function () {
  14. alert($('#test').val())
  15. })
  16. })
  17. </script>
  18. </body>
  19. </html>
结果
2、获取属性 – attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>attr()获取属性</title>
  6. </head>
  7. <body>
  8. <p><a href="www.qinglin.net" id="test">清麟</a></p>
  9. <button>显示href属性的值</button>
  10. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  11. <script>
  12. $(document).ready(function () {
  13. $('button').click(function () {
  14. alert($('#test').attr("href"))
  15. })
  16. })
  17. </script>
  18. </body>
  19. </html>
结果
二、jQuery – 设置内容和属性
1、设置内容 – text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容:
text() – 设置或返回所选元素的文本内容
html() – 设置或返回所选元素的内容(包括 HTML 标记)
val() – 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>text()、html() 以及 val()设置内容</title>
  6. </head>
  7. <body>
  8. <p id="test1">这是一个原始段落</p>
  9. <p id="test2">这是一个另一个原始段落</p>
  10. <p>输入框:<input type="text" id="test3" value="清麟"></p>
  11. <button id="btn1">设置文本</button>
  12. <button id="btn2">设置html</button>
  13. <button id="btn3">设置值</button>
  14. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  15. <script>
  16. $(document).ready(function () {
  17. $('#btn1').click(function () {
  18. $('#test1').text("Hello,Qinglin!")
  19. });
  20. $('#btn2').click(function () {
  21. $('#test2').text("<b>Hello qinglin</b>")
  22. });
  23. $('#btn3').click(function () {
  24. $('#test3').val("Qinglin")
  25. })
  26. })
  27. </script>
  28. </body>
  29. </html>
结果
2、text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html():
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>text()、html() 以及 val() 的回调函数</title>
  6. </head>
  7. <body>
  8. <p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
  9. <p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
  10. <button id="btn1">显示 新/旧 文本</button>
  11. <button id="btn2">显示 新/旧 HTML</button>
  12. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  13. <script>
  14. $(document).ready(function () {
  15. $('#btn1').click(function () {
  16. $('#test1').text(function (i,origText) {
  17. return "旧文本:" + origText + "新文本:Hello world (index:" + i +")"
  18. })
  19. })
  20. $('#btn2').click(function () {
  21. $('#test2').text(function (i,origText) {
  22. return "旧文本:" + origText + "新 HTML:<b>Hello qinglin!</b> (index:" + i + ")"
  23. })
  24. })
  25. })
  26. </script>
  27. </body>
  28. </html>
结果
3、设置属性 – attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变(设置)链接中 href 属性的值:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>改变(设置)链接中 href 属性的值</title>
  6. </head>
  7. <body>
  8. <p><a href="http://www.baidu.com" id="baidu">默认百度,点击清麟</a></p>
  9. <button>修改href值</button>
  10. <p>点击按钮修改后,可以点击链接查看链接地址是否变化。</p>
  11. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  12. <script>
  13. $(document).ready(function () {
  14. $('button').click(function () {
  15. $('#baidu').attr('href',"http://www.qinglin.net")
  16. })
  17. })
  18. </script>
  19. </body>
  20. </html>
结果
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>同时设置 href 和 title 属性</title>
  6. </head>
  7. <body>
  8. <p><a href="http://www.baidu.com" id="url">百度网址</a></p>
  9. <button>修改href和title</button>
  10. <p>点击按钮修改后,可以查看 href 和 title 是否变化。</p>
  11. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  12. <script>
  13. $(document).ready(function () {
  14. $('button').click(function () {
  15. $('#url').attr({
  16. "href":"http://www.qinglin.net",
  17. "title":"清麟博客"
  18. })
  19. //通过个性的title值来修改链接名称
  20. title = $('#url').attr('title');
  21. $('#url').html(title)
  22. })
  23. })
  24. </script>
  25. </body>
  26. </html>
结果
4、attr() 的回调函数
jQuery 方法 attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>带有回调函数的 attr() 方法</title>
  6. </head>
  7. <body>
  8. <p><a href="http://www.qinglin.net" id="url">清麟博客</a></p>
  9. <button>修改href和title</button>
  10. <p>点击按钮修改后,可以查看 href 和 title 是否变化。</p>
  11. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  12. <script>
  13. $(document).ready(function () {
  14. $('button').click(function () {
  15. $('#url').attr('href',function (i,origValue) {
  16. return origValue + "/xitong"
  17. })
  18. })
  19. })
  20. </script>
  21. </body>
  22. </html>
结果
三、jQuery – 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法:
append() – 在被选元素的结尾插入内容
prepend() – 在被选元素的开头插入内容
after() – 在被选元素之后插入内容
before() – 在被选元素之前插入内容
1、jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>append()被选元素的结尾插入内容</title>
  6. </head>
  7. <body>
  8. <p>这是一个段落。</p>
  9. <p>这是另外一个段落。</p>
  10. <ol>
  11. <li>List item 1</li>
  12. <li>List item 2</li>
  13. <li>List item 1</li>
  14. </ol>
  15. <button id="btn1">添加文本</button>
  16. <button id="btn2">添加列表项</button>
  17. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  18. <script>
  19. $(document).ready(function () {
  20. $('#btn1').click(function () {
  21. $('p').append("<b>追加文本</b>")
  22. })
  23. $('#btn2').click(function () {
  24. $('ol').append('<li>追加列表项</li>')
  25. })
  26. })
  27. </script>
  28. </body>
  29. </html>
结果
2、jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>append()被选元素的结尾插入内容</title>
  6. </head>
  7. <body>
  8. <p>这是一个段落。</p>
  9. <p>这是另外一个段落。</p>
  10. <ol>
  11. <li>List item 1</li>
  12. <li>List item 2</li>
  13. <li>List item 1</li>
  14. </ol>
  15. <button id="btn1">添加文本</button>
  16. <button id="btn2">添加列表项</button>
  17. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  18. <script>
  19. $(document).ready(function () {
  20. $('#btn1').click(function () {
  21. $('p').prepend("<b>追加文本</b>")
  22. })
  23. $('#btn2').click(function () {
  24. $('ol').prepend('<li>追加列表项</li>')
  25. })
  26. })
  27. </script>
  28. </body>
  29. </html>
结果
3、通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。
不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>append() 和 prepend() 方法添加若干新元素</title>
  6. </head>
  7. <body>
  8. <p>这是一个段落</p>
  9. <button onclick="appendText()">追加文本</button>
  10. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  11. <script>
  12. function appendText() {
  13. var txt1 = "<p>文本。</p>"; //使用HTML标签创建文本
  14. var txt2 = $("<p></p>").text("文本。"); //使用jQuery创建文本
  15. var txt3 = document.createElement('p');
  16. txt3.innerHTML = "文本。"; //使用DOM创建文本text with
  17. $("body").append(txt1,txt2,txt3) //追加新元素
  18. }
  19. </script>
  20. </body>
  21. </html>
结果
4、jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>after() 和 before() 方法前后插入内容</title>
  6. </head>
  7. <body>
  8. <img src="未标题-2.png">
  9. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  10. <br><br>
  11. <button id="btn1">之前插入</button>
  12. <button id="btn2">之后插入</button>
  13. <script>
  14. $(document).ready(function () {
  15. $('#btn1').click(function () {
  16. $('img').before("<b>之前</b>")
  17. });
  18. $('#btn2').click(function () {
  19. $('img').after('<i>之后</i>')
  20. });
  21. })
  22. </script>
  23. </body>
  24. </html>
结果
5、通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>通过 after() 和 before() 方法添加若干新元素</title>
  6. </head>
  7. <body>
  8. <img src="未标题-2.png">
  9. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  10. <br>
  11. <br>
  12. <button onclick="afterText()">之后插入</button>
  13. <script>
  14. function afterText() {
  15. var txt1 = '<b>I</b>'; // 使用HTML创建元素
  16. var txt2 = $('<i></i>').text("love "); //使用jQuery创建元素
  17. var txt3 = document.createElement('big'); //使用DOM创素
  18. txt3.innerHTML='Qinglin';
  19. $("img").after(txt1,txt2,txt3) // 在图后添加文本
  20. }
  21. </script>
  22. </body>
  23. </html>
结果
四、jQuery – 删除元素
通过 jQuery,可以很容易地删除已有的 HTML 元素。
1、删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() – 删除被选元素(及其子元素)
empty() – 从被选元素中删除子元素
2、jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>remove() 方法删除被选元素及其子元素</title>
  6. </head>
  7. <body>
  8. <div id="div1" style="height: 100px;width:300px;border: 1px solid black;background-color: yellow">
  9. 这是div中的一些文本。
  10. <p>这是在 div 中的一个段落。</p>
  11. <p>这是在 div 中的另外一个段落。</p>
  12. </div>
  13. <button>移除div元素</button>
  14. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  15. <script>
  16. $(document).ready(function(){
  17. $("button").click(function(){
  18. $('#div1').remove()
  19. })
  20. })
  21. </script>
  22. </body>
  23. </html>
结果
3、jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>remove() 方法删除被选元素及其子元素</title>
  6. </head>
  7. <body>
  8. <div id="div1" style="height: 100px;width:300px;border: 1px solid black;background-color: yellow">
  9. 这是div中的一些文本。
  10. <p>这是在 div 中的一个段落。</p>
  11. <p>这是在 div 中的另外一个段落。</p>
  12. </div>
  13. <button>移除div元素</button>
  14. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  15. <script>
  16. $(document).ready(function(){
  17. $("button").click(function(){
  18. $('#div1').empty()
  19. })
  20. })
  21. </script>
  22. </body>
  23. </html>
结果
4、过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class=”italic” 的所有 <p> 元素:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>remove() 方法删除删除 class和p属性</title>
  6. </head>
  7. <body>
  8. <p>这是一个段落。</p>
  9. <p class="italic">这是另外一个段落。</p>
  10. <p class="italic">这是的另外一个段落。</p>
  11. <button>移除所有 class="italic" 的 p 元素</button>
  12. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  13. <script>
  14. $(document).ready(function(){
  15. $("button").click(function(){
  16. $('p').remove(".italic")
  17. })
  18. })
  19. </script>
  20. </body>
  21. </html>
 结果
五、jQuery – 获取并设置 CSS 类
通过 jQuery,可以很容易地对 CSS 元素进行操作。 切换 CSS 类
1、jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
addClass() – 向被选元素添加一个或多个类
removeClass() – 从被选元素删除一个或多个类
toggleClass() – 对被选元素进行添加/删除类的切换操作
css() – 设置或返回样式属性
2、实例样式表
下面的样式表将用于本页的所有例子:
  1. .important
  2. {
  3. font-weight:bold;
  4. font-size:xx-large;
  5. }
  6. .blue
  7. {
  8. color:blue;
  9. }
例子
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>addClass()向不同的元素添加 class 属性</title>
  6. <style type="text/css">
  7. .important
  8. {
  9. font-weight:bold;
  10. font-size:xx-large;
  11. }
  12. .blue
  13. {
  14. color:blue;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <h1>标题 1</h1>
  20. <h2>标题 2</h2>
  21. <p>这是一个段落。</p>
  22. <p>这是另外一个段落。</p>
  23. <div>这是一些重要的文本!</div>
  24. <br>
  25. <button>为元素添加 class</button>
  26. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  27. <script>
  28. $(document).ready(function(){
  29. $("button").click(function(){
  30. $('h1,h2,p').addClass('blue');
  31. $('div').addClass('important');
  32. });
  33. });
  34. </script>
  35. </body>
  36. </html>
结果
3、jQuery removeClass() 方法
下面的例子演示如何在不同的元素中删除指定的 class 属性:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>addClass()向不同的元素添加 class 属性</title>
  6. <style type="text/css">
  7. .important
  8. {
  9. font-weight:bold;
  10. font-size:xx-large;
  11. }
  12. .blue
  13. {
  14. color:blue;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <h1 class="blue">标题 1</h1>
  20. <h2 class="blue">标题 2</h2>
  21. <p class="blue">这是一个段落。</p>
  22. <p class="blue">这是另外一个段落。</p>
  23. <div>这是一些重要的文本!</div>
  24. <br>
  25. <button>为元素删除class</button>
  26. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  27. <script>
  28. $(document).ready(function(){
  29. $("button").click(function(){
  30. $('h1,h2,p').removeClass('blue');
  31. });
  32. });
  33. </script>
  34. </body>
  35. </html>
结果

4、jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>toggleClass()被选元素进行添加删除类的切换操作</title>
  6. <style type="text/css">
  7. .important
  8. {
  9. font-weight:bold;
  10. font-size:xx-large;
  11. }
  12. .blue
  13. {
  14. color:blue;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <h1 class="blue">标题 1</h1>
  20. <h2 class="blue">标题 2</h2>
  21. <p class="blue">这是一个段落。</p>
  22. <p>这是另外一个段落。</p>
  23. <div>这是一些重要的文本!</div>
  24. <br>
  25. <button>切换class</button>
  26. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  27. <script>
  28. $(document).ready(function(){
  29. $("button").click(function(){
  30. $('h1,h2,p').toggleClass('blue');
  31. });
  32. });
  33. </script>
  34. </body>
  35. </html>
 结果

 六、jQuery css() 方法
1、jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:
下面的例子将返回首个匹配元素的 background-color 值:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>css()返回首个匹配元素</title>
  6. </head>
  7. <body>
  8. <h2>这是一个标题</h2>
  9. <p style="background-color: #FF0000">这是一个段落!</p>
  10. <p style="background-color: #00ff00">这是一个段落!</p>
  11. <p style="background-color: #0000ff">这是一个段落!</p>
  12. <button>返回p元素 background-color</button>
  13. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16. $('button').click(function(){
  17. alert("背景颜色 =" + $("p").css("background-color"))
  18. })
  19. })
  20. </script>
  21. </body>
  22. </html>
结果
2、设置 CSS 属性
如需设置指定的 CSS 属性,请使用如下语法:
下面的例子将为所有匹配元素设置 background-color 值:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>css()返回首个匹配元素</title>
  6. </head>
  7. <body>
  8. <h2>这是一个标题</h2>
  9. <p style="background-color: #FF0000">这是一个段落!</p>
  10. <p style="background-color: #00ff00">这是一个段落!</p>
  11. <p style="background-color: #0000ff">这是一个段落!</p>
  12. <button>返回p元素 background-color</button>
  13. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16. $('button').click(function(){
  17. $('p').css('background-color','yellow')
  18. })
  19. })
  20. </script>
  21. </body>
  22. </html>

 结果
3、设置多个 CSS 属性
如需设置多个 CSS 属性,请使用如下语法:
下面的例子将为所有匹配元素设置 background-color 和 font-size:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>css()返回首个匹配元素</title>
  6. </head>
  7. <body>
  8. <h2>这是一个标题</h2>
  9. <p style="background-color: #FF0000">这是一个段落!</p>
  10. <p style="background-color: #00ff00">这是一个段落!</p>
  11. <p style="background-color: #0000ff">这是一个段落!</p>
  12. <button>返回p元素 background-color</button>
  13. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16. $('button').click(function(){
  17. $('p').css({'background-color':'yellow',"font-size":'200%'})
  18. })
  19. })
  20. </script>
  21. </body>
  22. </html>

 结果
七、jQuery 尺寸

通过 jQuery,很容易处理元素和浏览器窗口的尺寸。
1、jQuery 尺寸方法
jQuery 提供多个处理尺寸的重要方法:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
2、jQuery 尺寸

 3、jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
下面的例子返回指定的 <div> 元素的宽度和高度:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="div1" style="height: 100px;width: 300px;padding: 10px;margin: 3px;border: 1px solid blue;background-color: lightblue"></div>
  9. <button>显示div元素的尺寸</button>
  10. <p>width() - 返回元素的宽度</p>
  11. <p>height() - 返回元素的高度</p>
  12. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  13. <script>
  14. $(document).ready(function(){
  15. $('button').click(function(){
  16. var txt = "";
  17. txt += "div的宽度是:" + $("#div1").width()+"</br>";
  18. txt += "div的高度是:" + $("#div1").height();
  19. $('#div1').html(txt)
  20. })
  21. })
  22. </script>
  23. </body>
  24. </html>
 结果
4、jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
下面的例子返回指定的 <div> 元素的 inner-width/height:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="div1" style="height: 100px;width: 300px;padding: 10px;margin: 3px;border: 1px solid blue;background-color: lightblue"></div>
  9. <button>显示div元素的尺寸</button>
  10. <p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
  11. <p>innerHeight() - 返回元素的高度 (包含内边距)。</p>
  12. <script src="../../../jQuery_code/jquery-3.2.1.min.js"></script>
  13. <script>
  14. $(document).ready(function(){
  15. $('button').click(function(){
  16. var txt = "";
  17. txt += "div的宽度是:" + $("#div1").width() + "</br>";
  18. txt += "div的高度是:" + $("#div1").height() + "</br>";
  19. txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>";
  20. txt+="div 高度,包含内边距: " + $("#div1").innerHeight();
  21. $('#div1').html(txt)
  22. })
  23. })
  24. </script>
  25. </body>
  26. </html>
 结果

 

转载请注明:清麟博客 » jQuery HTML

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址