jQuery学习(二)
操作DOM对象：
修改文本：
jQuery对象的text()和html()方法可以用来获取节点的文本内容和HTML文本。而当你给方法传入参数时，这两个方法可以被用于设置jQuery的文本内容。
还是以之前的代码为例：
1 <div id="test-div"> 2 <p class="color-red">JavaScript</p> 3 <p class="color-green">Python</p> 4 <p class="color-red color-green">Erlang</p> 5 <p class="color-black" name="haskell">Haskell</p> 6 </div>
1 <script> 2 var langs = $('[class^=color]'); 3 langs.each(function(){ 4 var text = "lang_" + $(this).text(); 5 $(this).text(text); 6 }); 7 </script>
这里我们选出了全部的语言，并将每个语言的文本内容加个"lang_"前缀。
修改CSS：
jQuery可以通过css()和addClass()方法来修改DOM对象的CSS样式。
addClass()是直接将一个样式作为参数传入，为DOM设置样式，而css()方法则是将样式通过键值对的方式传入设置样式。
先定义样式：
1 .red_syle{ 2 color:#ff0000; 3 } 4 </style>
对某一jQuery对象通过addClass()方法应用该样式。
1 langs.addClass('red_syle');
上述的编程语言将显示为红色。
1 langs.css('color','#0000ff');
编程语言将显示为蓝色。
注意，css()的优先级要高于addClass()。
显示和隐藏DOM对象，
hide()和show()方法可以用来隐藏和显示DOM对象。
toggle()方法用来切换显示和隐藏状态。
操作DOM节点的属性：attr(),removeAttr()；
1 // <div id="test-div" name="Test" start="1">...</div> 2 <script> 3 var div = $('#test-div'); 4 div.attr('data'); // undefined, 属性不存在 5 div.attr('name'); // 'Test' 6 div.attr('name', 'Hello'); // div的name属性变为'Hello' 7 div.removeAttr('name'); // 删除name属性 8 div.attr('name'); // undefined 9 </script>
jQuery还支持prop()方法。prop()和attr()类似，只是在个别行为上有所差异。
1 var radio = $('#test-radio'); 2 radio.attr('checked'); // 'checked' 3 radio.prop('checked'); // true
对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性，类似于text()方法。
操作DOM结构：
jQuery的append()可以增加新的DOM节点。
1 <div id="test-div"> 2 <p class="color-red">JavaScript</p> 3 <p class="color-green">Python</p> 4 <p class="color-black" name="haskell">Haskell</p> 5 </div>
我们可以通过下列代码在div下增加一个子节点。
1 <script> 2 var div = $('#test-div'); 3 div.append('<p class=color-black>Haskell</p>'); 4 </script>
除了直接传入字符串构造一个节点外，我们可以直接传入一个DOM对象。
1 <script> 2 var h = $(document.createElement('p'));//自己构造DOM对象并转成jQuery对象 3 h.text('Haskell');//设置属性 4 h.attr('class','color-black'); 5 var div = $('#test-div'); 6 div.append(h);//添加节点 7 </script>
当然，可以获取页面中的DOM对象，在通过append()插入。这时，会先在原位置删除该节点，然后在指定位置插入。
prepend()和append()都是插入节点，只不过prepend是将节点插到最前，而append()是插到最后。
同级节点可以用after()和before()来插入。
删除DOM节点可以用remove()。如果一个jQuery对象中包括多个DOM对象，那么将全部被删除。
