jQuery操做dom

参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操做dom
jQuery操做dom事件
jQuery插件
jQuery操做Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131

$( function (){             //1.操做元素属性      //1.1 设置或返回被选元素的属性值    attr：attr(name)获取值，attr(name,value)设置name的值为value      $( "img" ).attr( "src" ); //获取img的src属性的值      $( "img" ).attr( "src" , "b.jpg" ); //将img的src属性设置为b.jpg      $( "img" ).attr({          src: "b.jpg" ,          title: "test"      }); //同时将img的src属性设置为b.jpg，title设置为test      $( "img" ).attr( "title" , function (){          return "test2" ;      }); //将匿名函数返回的值设置到title中      //1.2 删除属性 removeAttr(name)      $( "img" ).removeAttr( "title" ); //删除img的title属性             //2.操做元素内容      //2.1 获取元素内容      var strHtml = $( "#div1" ).html(); //获取div1的html元素      var strText = $( "#div1" ).text(); //获取div1的text文本内容      //2.2 设置元素内容      var strHtml = $( "#div1" ).html( "<span>span</span>" ); //设置div1的html元素为<span>span</span>      var strText = $( "#div1" ).text( "demo" ); //设置div1的文本内容为demo             //3.获取元素的值val,val()获取元素的值    val(value);//设置元素的值      $( "#select1" ).val(); //获取select选中的option的值      $( "#input1" ).val( "" ); //清空input1的值             //4.操做元素样式      $( "p" ).css( "color" ); //获取p的color值      $( "p" ).css( "color" , "red" ); //设置p的color值为red      $( "p" ).css({color: "red" ,background: "green" }); //设置p的color值为red,background的值为green             //5.操做class      //添加class      $( "img" ).addClass( "p2 p3" ); //这是追加，不是覆盖。好比原来的<p class="p1">,执行完addClass后为<p class="p1 p2 p3">      //切换class      $( "img" ).toggleClass( "i" ); //toggleClass也是追加，例如：      //好比原来是<img class="p2 p3" src="a.jpg" alt="aa">，执行完toggleClass后为<img class="p2 p3 i" src="a.jpg" alt="aa">      //删除class      $( "img" ).removeClass( "i" ); //移除class，这里表示在class="p2 p3 i"的基础上移除了i，结果为class="p2 p3"      $( "img" ).removeClass(); //不传参数则会删除全部class。结果就是class=""                    //6.内部插入节点      //在当前元素追加内容      $( "p" ).append( "<b>Hello</b>" ); //向p段落追加<b></b>      //把全部匹配的元素追加到另外一个指定的元素元素集合中。      $( "p" ).appendTo($( "#div1" )); //把全部p段落，追加到#div1中      //向匹配的元素前置内容：放在匹配元素的最前面      $( "p" ).prepend( "<b>Hello</b>" ); //在p元素内容的最前面添加<b>Hello</b>      //把所选元素追加到另外一个元素中的最前面      $( "p" ).prependTo( "#foo" ); //把全部p追加到#foo元素的最前面                        //7.外部插入节点      //在匹配的元素以后插入同级html内容      $( "p" ).after( "<b>Hello</b>" ); //源：<p>I</p> 插入后<p>I</p><b>Hello</b>      //在匹配的元素以后插入dom元素      $( "p" ).after( $( "#foo" )[0] ); //源：<b id="foo">Hello</b><p>I</p> 插入后的p为：<p>I</p><b id="foo">Hello</b>      //在每一个匹配的元素以前插入html内容。      $( "p" ).before( "<b>Hello</b>" ); //源：<p>I</p> 插入后<b>Hello</b><p>I</p>      //在匹配的元素以前插入dom元素      $( "p" ).before( $( "#foo" )[0] ); //源：<b id="foo">Hello</b><p>I</p> 插入后的p为：<b id="foo">Hello</b><p>I</p>      //把全部匹配的元素插入到另外一个、指定的元素元素集合的后面。      $( "p" ).insertAfter( '#foo' ); //源：<p>I</p><div id="foo">Hello</div> 插入后的p为：<div id="foo">Hello</div><p>I</p>      //把全部匹配的元素插入到另外一个、指定的元素元素集合的前面。      $( "p" ).insertBefore( "#foo" ); //源：<div id="foo">Hello</div><p>I</p> 插入后的p为：<p>I</p><div id="foo">Hello</div>         //8.复制节点：clone()克隆而且选中该元素      //只复制元素，不复制元素的事件。      //源内容：<b>Hello</b><p>, how are you?</p>      $( "b" ).clone().prependTo( "p" ); //结果为：<b>Hello</b><p><b>Hello</b>, how are you?</p>   第二个b标签是没有事件的      //复制元素和元素的事件。        $( "button" ).click( function (){ //源内容：<button>Clone Me!</button>        $( this ).clone( true ).insertAfter( this );      }); //复制了按钮，而且具备一样的事件                //9.替换节点      //替换单个元素为html元素      //案例：将全部的p替换成b      $( "p" ).replaceWith( "<b>b</b>" ); //源：<p>p1</p><p>p2</p><p>p3</p> 替换后：<b>b</b><b>b</b><b>b</b>      //替换单个元素为html元素，值为函数返回值      //案例：将全部的p替换成b      $( "p" ).replaceWith( function (){ return "<a>a</a>" }); //源：<p>p1</p><p>p2</p><p>p3</p> 替换后：<a>a</a>      //替换全部元素      //把全部的p替换成<b>替换后</b>      $( "<b>替换后</b>" ).replaceAll( "p" ); //源：<p>p1</p><h1>h1</h1> 替换后：<b>替换后</b><h1>h1</h1>         //10.包裹节点      //使用html代码包裹整个元素      //用<div class='wrap'></div>将全部的p包裹起来      $( "p" ).wrap( "<div class='wrap'></div>" );      //使用指定元素包裹整个元素      $( "p" ).wrap(document.getElementById( 'content' ));      //使用回调函数包裹整个元素      $( '.inner' ).wrap( function () {        return '<div class="' + $( this ).text() + '" />' ;      });      //使用html包裹匹配元素的内容      //将p里的元素内容，用<b></b>包裹起来      $( "p" ).wrapInner( "<b></b>" ); //源：<p>helloWord</p> 包裹后<p><b>helloWord</b></p>      //使用指定元素包裹匹配内容      $( "p" ).wrapInner(document.createElement( "b" ));      //使用回调函数包裹匹配内容      $( 'p' ).wrapInner( function () {        return '<b></b>' ;      });         //11.遍历元素      //html内容为<img/><img/>      //遍历src属性为a.jpg      $( function (){          $( "img" ).each( function (index, el) { //index为每一个元素的索引，el为当前元素(也能够直接用this)              console.info(index,el, this ); //el和this是相等的              this .src = "a.jpg" ; //设两个图片的src属性          });                  });      //遍历后结果为<img src="a.jpg"/><img src="a.jpg"/>             //12.删除元素      //remove()：从DOM中删除全部匹配的元素。      //删除p元素      $( "p" ).remove(); //源：<p>Hello</p> how are <p>you?</p>   删除后：how are      $( "p" ).remove( ".p1" ); //源：<p>Hello</p> how are <p class="p1">you?</p>   删除后：<p>Hello</p> how are      //empty()：删除匹配的元素集合中全部的子节点。      //源内容：<p>Hello, <span>Person</span> <a href="#">and person</a></p>      $( "p" ).empty(); //删除后：<p></p>    });

来自为知笔记(Wiz)