Chinaunix首页 | 论坛 | 博客

15859020900的ChinaUnix博客

首页　| 　博文目录　| 　关于我

15859020900

  • 博客访问： 77016
  • 博文数量： 59
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 600
  • 用 户 组： 普通用户
  • 注册时间： 2016-08-22 10:54
文章分类

全部博文（59）

文章存档

2016年（59）

我的朋友
最近访客
推荐博文
HTML5移动开发之路（36）——jQuery中的DOM操作

分类： Html/Css

2016-11-04 16:44:06

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

1、查询

利用选择器查找节点

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

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

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.     <head>  
  3.         <script src="">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">hellodiv>  
  23.         <ul>  
  24.             <li>item1li>  
  25.             <li id="i1">item2li>  
  26.             <li>item3li>  
  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?在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.     <head>  
  3.         <script src="">script>  
  4.         <script>  
  5.             $(function(){  
  6.                 $('#b1').click(function(){  
  7.                     var $node = $('<li>item4li>');  
  8.                     $('ul').append($node);  
  9.                     //$('ul').append('<li>item4li>'); 和上面是等价的  
  10.                 });  
  11.             });  
  12.         script>  
  13.         <style>  
  14.             .s1{  
  15.                 color:red;  
  16.             }  
  17.         style>  
  18.     head>  
  19.     <body>  
  20.         <div id="d1">hellodiv>  
  21.         <ul>  
  22.             <li>item1li>  
  23.             <li id="i1">item2li>  
  24.             <li>item3li>  
  25.         ul>  
  26.         <input type="button" id="b1" value="点我"/>  
  27.     body>  
  28. html>  

 

4、删除节点

remove();

remove(selector);

empty();清空内容

 

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

上一篇：HTML5移动开发之路（35）——jQuery中的过滤器详解

下一篇：HTML5移动开发之路（37）——jqMobi快速入门

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6