今天继续学习锋利的JQuery，第三章后半段

书中3.2.9中

$(“p”).addClass(“other”)和$(“p”).attr(“class”,”other”)，两个都是设置和获取样式的操作，两个区别在于，如果p标签之前有一个样式”class1”,那么第一个方法是在原有样式追加一个other样式，而attr则是直接修改样式，还有attr不止能获取样式，还能获取元素的属性，例如：获取属性$(“a”).attr(“href”)和设置属性$(“a”).attr(“href”,”http://www.xxx.com”)

 

接下来删除样式removeClass()没啥说的，注意切换样式的属性toggle(),这个属性不止在本章用到后面打也会有，这个不只能切换样式，还能切换方法等，主要用来控制重复的切换行为，例如：点击切换幻灯片，每次点击的操作都是一样的，就可以用这个toggle(),还有一个属性是专门切换class用的叫：toggleClass();

 

判断含有某个样式，使用hasClass() ,可以判断，返回布尔值，但是其实大家都知道使用“is()”也是可以判断，其实在JQ内部hasClass()这个方法就是调用的is()，方法，所以个人意见可以直接都用is()判断就行了，没必要使用这个，(*^__^*)嘻嘻……

 

3.2.10 设置获取HTML、文本和值，下面简单明了的说明下

 

属性名称

使用举例

区别说明

html()

$(“p”).html();获取

$(“#id>a”).html(“<em>正在连接</em>”);用来设置标签中的html内容

相当于JS中的innerHTML()，用来获取标签及内容，可以用于XHTML，不可以用于XML

text()

$(“#id>a”).text();获取文字

$(“#id>a”).text(“你好”)设置文字

相当于JS中的innerText()，用来获取或者设置某个标签中的文字

val()

<input id="pw"  name="pw" type="password"value="请输入密码"/> $(“#pw”).value();获取；$(“#pw”).value(“提示输入密码”)设置

相当于Js中的value(),用来获取或者设置有value属性的标签的值

简单普及下语义模糊的html标签,知道的可以忽略不看这行：html中<em></em>强调标签<i></i>斜体标签<u></u>下划线标签，显示效果下图（蓝框不是效果哦），火狐中显示

                             

3.2.11遍历节点

本章中讲到的，一句话总结每个方法：children(),遍历指定元素的子元素

next(),获取元素后面紧邻的同辈元素

prev(),获取元素前面的紧邻的同辈元素

siblings() ,获取元素前后所有同辈元素

closest();从元素本身开始逐级向上寻找匹配元素，返回第一个元素节点，找不到返回空JQ对象

parent(),获取集合中每个匹配的元素的父级元素，只返回一个元素节点

parents(),获取集合中每个匹配的元素的祖先元素，返回多个父级节点

 

3.2.12 CSS-DOM操作

$(“p”).css(“color”);获取元素的单个样式（样式可以是内部，外部，引用的）

$(“p”).css(“font-size”,”16px”)，设置元素样式，此样式会添加成行内样式，样式书写注意：如果不加引号，那么必须写成：fontSize骆驼命名法，如果加了引号就两者书写均可以。

$(“p”).height()获取元素高度值，$(“p”).height(“500”)不写单位默认是像素，如果需要使用”em”

单位，需要这样写：$(“p”).height(“300em”);

注意：1.在JQ1.2版本之后，height也可以用来回去window和document的高度值

2.css(“height”)获取的高度和height()获取的高度区别：

经过试验测试：如果一个div有高度设置，使用上述两个都是获取设置的高度值，如果没有设置高度，里面有内容，则会获取到实际高度。唯一的区别就是前者弹出的数值有单位px，后者是纯数值。

代码：

 

<scripttype="text/javascript">

 //<![CDATA[

 $(function(){

           alert($("#divh").css("height"));

            alert($("#divh").height());

           

           alert($("#divnoh").css("height"));

            alert($("#divnoh").height());        

  });

 

 //]]>

 </script>

 

<div id="divh"style="height:200px; padding-top:20px; background-color:red;">

 <ul>

           <li title='苹果'>苹果</li>

           <li title='橘子'>橘子</li>

           <li title='菠萝'>菠萝</li>

         </ul>

 </div>

 

 <div id="divnoh" style="background-color:green;">

    <ul>

           <li title='苹果'>苹果</li>

           <li title='橘子'>橘子</li>

           <li title='菠萝'>菠萝</li>

         </ul>

 </div>