jQuery学习(二)

操作DOM对象：

修改文本：

jQuery对象的text()和html()方法可以用来获取节点的文本内容和HTML文本。而当你给方法传入参数时，这两个方法可以被用于设置jQuery的文本内容。

还是以之前的代码为例：

 <div id="test-div">
 <p class="color-red">JavaScript</p>
 <p class="color-green">Python</p>
 <p class="color-red color-green">Erlang</p>
 <p class="color-black" name="haskell">Haskell</p>
 </div>

 <script>
 var langs = $('[class^=color]');
 langs.each(function(){
     var text = "lang_" + $(this).text();
     $(this).text(text);
 });
 </script>

这里我们选出了全部的语言，并将每个语言的文本内容加个"lang_"前缀。

修改CSS：

jQuery可以通过css()和addClass()方法来修改DOM对象的CSS样式。

addClass()是直接将一个样式作为参数传入，为DOM设置样式，而css()方法则是将样式通过键值对的方式传入设置样式。

先定义样式：

 .red_syle{
 color:#ff0000;
 }
 </style>

对某一jQuery对象通过addClass()方法应用该样式。

 langs.addClass('red_syle');

上述的编程语言将显示为红色。

 langs.css('color','#0000ff');

编程语言将显示为蓝色。

注意，css()的优先级要高于addClass()。

显示和隐藏DOM对象，

hide()和show()方法可以用来隐藏和显示DOM对象。

toggle()方法用来切换显示和隐藏状态。

操作DOM节点的属性：attr(),removeAttr()；

 // <div id="test-div" name="Test" start="1">...</div>
 <script>
 var div = $('#test-div');
 div.attr('data'); // undefined, 属性不存在
 div.attr('name'); // 'Test'
 div.attr('name', 'Hello'); // div的name属性变为'Hello'
 div.removeAttr('name'); // 删除name属性
 div.attr('name'); // undefined
 </script>

jQuery还支持prop()方法。prop()和attr()类似，只是在个别行为上有所差异。

 var radio = $('#test-radio');
 radio.attr('checked'); // 'checked'
 radio.prop('checked'); // true

对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性，类似于text()方法。

操作DOM结构：

jQuery的append()可以增加新的DOM节点。

 <div id="test-div">
 <p class="color-red">JavaScript</p>
 <p class="color-green">Python</p>
 <p class="color-black" name="haskell">Haskell</p>
 </div>

我们可以通过下列代码在div下增加一个子节点。

 <script>
 var div = $('#test-div');
 div.append('<p class=color-black>Haskell</p>');
 </script>

除了直接传入字符串构造一个节点外，我们可以直接传入一个DOM对象。

 <script>
 var h = $(document.createElement('p'));//自己构造DOM对象并转成jQuery对象
 h.text('Haskell');//设置属性
 h.attr('class','color-black');
 var div = $('#test-div');
 div.append(h);//添加节点
 </script>

当然，可以获取页面中的DOM对象，在通过append()插入。这时，会先在原位置删除该节点，然后在指定位置插入。

prepend()和append()都是插入节点，只不过prepend是将节点插到最前，而append()是插到最后。

同级节点可以用after()和before()来插入。

删除DOM节点可以用remove()。如果一个jQuery对象中包括多个DOM对象，那么将全部被删除。