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> }); |
