HTML5移动开发之路（36）——jQuery中的DOM操作

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（36）——jQuery中的DOM操作

1、查询

利用选择器查找节点

使用 html() / text() / attr() 输出节点文本和属性值。

注意：下拉列表使用 val()

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
  4. <script>
  5. $(function(){
  6. $(‘#b1‘).click(function(){
  7. //$(‘#d1‘).html(‘java‘);
  8. //将节点的属性读出来
  9. //$(‘#d1‘).attr(‘style‘);
  10. //$(‘#d1‘).attr(‘style‘,‘font-size:30pt‘);
  11. $(‘#d1‘).attr(‘class‘,‘s1‘);
  12. });
  13. });
  14. </script>
  15. <style>
  16. .s1{
  17. color:red;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="d1">hello</div>
  23. <ul>
  24. <li>item1</li>
  25. <li id="i1">item2</li>
  26. <li>item3</li>
  27. </ul>
  28. <input type="button" id="b1" value="点我"/>
  29. </body>
  30. </html>

2、创建

$(html)

3、插入节点

append();

prepend();

after();

before();

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
  4. <script>
  5. $(function(){
  6. $(‘#b1‘).click(function(){
  7. var $node = $(‘<li>item4</li>‘);
  8. $(‘ul‘).append($node);
  9. //$(‘ul‘).append(‘<li>item4</li>‘); 和上面是等价的
  10. });
  11. });
  12. </script>
  13. <style>
  14. .s1{
  15. color:red;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div id="d1">hello</div>
  21. <ul>
  22. <li>item1</li>
  23. <li id="i1">item2</li>
  24. <li>item3</li>
  25. </ul>
  26. <input type="button" id="b1" value="点我"/>
  27. </body>
  28. </html>

4、删除节点

remove();

remove(selector);

empty();清空内容

[javascript] view plain copy

print?

  1. $(‘#b1‘).click(function(){
  2. //$(‘ul li:eq(1)‘).remove();
  3. $(‘ul li‘).remove(‘li[id=i1]‘);
  4. $(‘ul li:eq(1)‘).empty();
  5. });

5、复制节点

clone();

clone(true); 使复制的节点也具有行为

6、属性操作

读取：attr(‘ ‘);

设置：attr(‘ ‘, ‘ ‘);

或者一次设置多个属性attr({" ", " "});

删除：removeAttr(‘ ‘);

[javascript] view plain copy

print?

  1. $(‘#b1‘).click(function(){
  2. $(‘#d1‘).attr({"class":"s1","style":"font-size:40pt"});
  3. });

7、样式操作

获取和设置：attr("class", " ");

追加：addClass(‘ ‘, ‘ ‘);

切换样式：toggleClass(‘ ‘, ‘ ‘);

是否有某个样式hasClass(‘ ‘);

css(‘  ‘, ‘  ‘);

css({ ‘  ‘: ‘  ‘,  ‘   ‘: ‘  ‘});

[javascript] view plain copy

print?

  1. $(‘#b1‘).click(function(){
  2. $(‘div:first‘).addClass(‘s1 s2‘);
  3. $(‘div:first‘).removeClass(‘s2‘);
  4. $(‘div:first‘).toggleClass(‘s1‘);
  5. });

8、设置和获取html,文本和值

html() / html(‘  ‘)

text() /  text(‘  ‘)

val() ;  设置和读取元素的值

9、遍历

children()

next();

prive();

siblings():所有兄弟

10、综合实例

[html] view plain copy

print?

  1. <script>
  2. $(function(){
  3. $(‘#b1‘).click(function(){
  4. //$(‘#d1‘).html(‘java‘);
  5. //将节点的属性读出来
  6. $(‘#d1‘).attr(‘style‘);
  7. $(‘#d1‘).attr(‘style‘,‘font-size:30pt‘);
  8. $(‘#d1‘).attr(‘class‘,‘s1‘);
  9. });
  10. $(‘#b1‘).click(function(){
  11. var $node = $(‘<li>item4</li>‘);
  12. $(‘ul‘).append($node);
  13. //$(‘ul‘).append(‘<li>item4</li>‘); 和上面是等价的
  14. });
  15. $(‘#b1‘).click(function(){
  16. //$(‘ul li:eq(1)‘).remove();
  17. $(‘ul li‘).remove(‘li[id=i1]‘);
  18. $(‘ul li:eq(1)‘).empty();
  19. });
  20. $(‘#b1‘).click(function(){
  21. var $node = $(‘ul li:eq(2)‘).clone();
  22. $(‘ul‘).append($node);
  23. var $node = $(‘ul li:eq(2)‘).clone(true);
  24. $(‘ul‘).append($node);
  25. });
  26. $(‘ul li:eq(2)‘).click(function(){
  27. //可以使用this来访问符合$(‘selecotr‘)查询条件的节点
  28. //alert(this.innerHTML);
  29. alert($(this).html());
  30. });
  31. $(‘#b1‘).click(function(){
  32. $(‘#d1‘).attr({"class":"s1","style":"font-size:40pt"});
  33. });
  34. $(‘#b1‘).click(function(){
  35. $(‘div:first‘).addClass(‘s1 s2‘);
  36. $(‘div:first‘).removeClass(‘s2‘);
  37. $(‘div:first‘).toggleClass(‘s1‘);
  38. });
  39. $(‘#b1‘).click(function(){
  40. alert($(‘input[type=text]‘).val();
  41. alert($(‘select‘).val());
  42. //单选和多选框不能这样写
  43. alert($(‘:radio‘).val());
  44. alert($(‘:checkbox‘).val());
  45. //要这样去写
  46. var $node = $(‘:radio‘);
  47. $node.each(function(){
  48. //if($(this).attr(‘checked‘)){
  49. //  alert($(this).val());
  50. //}
  51. if(this.checked){
  52. alert(this.value);
  53. }
  54. });
  55. });
  56. $(‘#b1‘).click(function(){
  57. var $items = $(‘ul‘).children();
  58. //如果查询返回的是多个节点，可以使用length属性返回节点的个数
  59. alert($items.length);
  60. //如何遍历
  61. $items.each(function(i){
  62. //$(this)html();
  63. alert(this.innerHTML);
  64. });
  65. });
  66. });
  67. </script>
  68. <style>
  69. .s1{
  70. color:yellow;
  71. }
  72. .s2{
  73. border:1px solid black;
  74. }
  75. </style>
  76. <body>
  77. <div>hello</div>
  78. <ul>
  79. <li>item1</li>
  80. <li id="i1">item2</li>
  81. <li>item3</li>
  82. </ul>
  83. <div id="d1" style="background-color:red;">hello</div>
  84. <input type="button" value="clickMe" id="b1"/>
  85. <input type="text" name="name"/><br/>
  86. male:<input type="radio" name="sex" value="m"/>
  87. female:<input type="radio" name="sex" value="f"/>
  88. fishing:<input type="checkbox" name="intrest" value="fishing"/>
  89. cookinng:<input type="checkbox" name="intrest" value="cooking"/>
  90. sleeping:<input type="checkbox" name="intrest" value="sleeping"/>
  91. <select>
  92. <option value="bj">beijing</option>
  93. <option value="sh">shanghai</option>
  94. <option value="tj">tianjing</option>
  95. </select>
  96. </body>
时间： 2024-07-31 14:23:21

HTML5移动开发之路（36）——jQuery中的DOM操作的相关文章

dom core,html dom,css dom,jquery 中的dom操作

前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名")/attr("属性名"))获取属性值, html dom一般利用属性的形式(element.属性名)获取对应属性值,形式相对简洁.此外,针对于css相关的对象,还有css dom 前端开发中的节点有三种:元素节点:文本节点和属性节点 js一般对于dom core和html dom都支

Jquerry：jquery中的DOM操作&lt;一&gt;

之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:DOM Core.HTML-DOM.CSS-DOM.我们很多情况下用到的getElementById().getElementByTagName().getAttribute()和setAttribute()等方法都是DOM Core的组成部分.而document.forms(获取表单对象).elem

锋利的jQuery ——jQuery中的DOM操作（三）

一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery选择器来选中元素,获取元素节点. 2)查找属性节点 利用jQuery选择器查找到需要的元素后,用attr()方法来获取它的各种属性的值. ②创建节点 1>创建元素节点 创建节点利用$(html),加入元素用append()还可以连写. 2>创建文本节点 创建文本节点直接在创建的html元素里面直接

第三章（jQuery中的DOM操作）

3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute() ) //获取表单对象 docuement.getElementsByTagName("form"); //获取某元素的src属性 element.getAttribute("src"); ②HTML DOM 专属HTML_DOM属性,提供一些更简明的记号来描述各种H

jquery中的DOM操作

DOM操作分为:DOM核心.HTML-DOM.CSS-DOM 1.节点操作 查找 查找元素节点:jquery选择器 查找属性节点:attr("")方法,参数为要查询的属性的名字 创建 创建元素节点:$("html")方法,参数为HTML标记字符串,如:<p></p> 注意:(1)动态创建的新元素节点不会被自动添加到文档中,需要用其他方法插入文档中(2)创建元素时注意标签闭合,可以用$("<p></p>&quo

JQuery中的Dom操作和事件

(一)JQuery中的事件 1.常规事件,把js事件中的on去掉 复合事件:hover(function(){},function(){}) ---- 相当于把鼠标移入移出事件和在一起执行 toggle(function(){},function(){},....)可以写多个,点击事件循环执行 未来元素:对象.live("事件名",function(){});   --- 对未来创建的元素进行操作 列子:点击按钮,创建元素,并给创建的元素添加点击事件 //对象.append():在什么

jQuery之第3章 jQuery中的DOM操作

DOM操作分为3个方面: DOM Core(核心).HTML-DOM 和 CSS-DOM 1.查找节点: 查找元素节点: var $li = $("ul li:eq(1)"); var li_txt = $li.text(); 查找属性节点: var $p = $("p"); var p_title = $p.attr("title"); 注意: attr() 获取指定元素节点属性的值. 2.创建节点: 创建元素节点: var $li = $(&

2017-6-3 JQuery中的Dom操作和事件

---恢复内容开始--- (一)JQuery中的事件 1.常规事件,把js事件中的on去掉 复合事件:hover(function(){},function(){}) ---- 相当于把鼠标移入移出事件和在一起执行 toggle(function(){},function(){},....)可以写多个,点击事件循环执行 未来元素:对象.live("事件名",function(){});   --- 对未来创建的元素进行操作 列子:点击按钮,创建元素,并给创建的元素添加点击事件 //对象

1. jQuery中的DOM操作

1)查找节点 通过jQuery选择器来完成 2)创建节点 创建元素节点:var newTd = $("<td></td>") 创建文本节点:在创建元素节点时直接把文本内容写出来.var newTd = $("<td>文本内容</td>") 3)插入节点: append() 在每个匹配元素里面的末尾处插入参数内容.作为它的最后一个子元素. 参数 一个或多个DOM 元素,DOM元素数组,HTML字符串,或者jQuery对象