jQuery__修改页面的外观效果

修改页面的外观效果

CSS主要作用就是通过样式风格来修改页面的表现，但由于浏览器对CSS3支持程度不同，使得CSS特性不能很好的体现（即同样的效果在不同的浏览器中可能看不到）。jQuery出色的解决了这个问题，它通过封装好的JS代码，使各种浏览器都能很好的使用CSS3标准，极大的丰富了CSS的效果。
1、CSS

1）          css(name) (用于获取当前元素样式的属性值)

返回值：String

参数：name（String）要访问的属性名称

例：取得第一个段落的color样式的属性的值

HTML代码

<p style="color:red">这个一个测试的段落</p>

jQuery代码

$("p").click(function(){        alert($("p").css("color")); });

 

2）、css(properties)（把一个“名/值对”对象设置为所有匹配元素的样式属性）

这是一种在所有匹配的元素上设置大量样式属性的最佳方式

返回值：jQuery

参数：properties(Map) 要设置为样式属性的名/值对

例：将所有段落的字体颜色设为红色，并且背景为蓝色

jQuery代码：

$("p").css({color:"red",background:"blue"});

注意：如果属性名称包含“-“，则必须使用引号。

 

2、css(name,value) (在所有匹配的元素中，设置一个样式属性的值)

数字将自动转化为像素值

返回值：jQuery

参数：name(value) 属性名

例：将所有段落字体设为红色

jQuery代码：

$("p").css("color","red");

 

3、尺寸

1）hight(val) （为每个匹配的元素设置css高度(hidth)属性的值）

如果没有明确指定单位（如：em或%）则用px

例：设置所有段落高度为100

jQuery代码：

$("p").height(100);

2）width(val) (为每个匹配的元素设置css宽度（width）属性的值)

jQuery代码：

$("p").width(100);

 

2、更改页面的内容

通过API，jQuery可以方便的修改页面的内容，包括文本的内容，插入新的图片，表单的选项，甚至整个页面的结构。

1)    html() （取得第一个匹配元素的html内容）

返回值：String

例：获取第一个匹配元素为div的内容

jQuery代码：

$("p").click(function(){        alert($("p").html()); });

 

2）text() 取得所有匹配元素的内容

结果是由所有匹配元素包含的文本内容组合起来的文本。

返回值：String

例：获得所有div元素的内容

jQuery代码：

$("div").click(function(){           alert($("div").text());        });

 

2)    html（val）（设置每一个匹配元素的html内容）

返回值：jQuery

例：替换所有div元素的内容

jQuery代码：

$("div").html("<p>Hello</p>");

 

3)    text(val) (设置所有匹配元素的文本内容)

与html()类似，但将编码html”<”和”>”替换成相应的HTML 实体

jQuery代码：

$("p").text("<b>Some</b> new text.");

 

3、表单的操作

1）val() （获得第一个匹配元素的当前值）

如果是多选，将返回一个数组，其包含所有值

返回值：Array,String

例：获得单个select的值和多选select的值

HTML代码：

<select id="single">     <option>music</option>     <option>book</option>  </select>  <select id="multiple" multiple="multiple">     <option>java</option>     <option>c#</option>     <option>php</option>     <option>html</option>  </select>    <input type="submit" id="OK" value="提交"/>    <p></p>

jQuery代码：

$("#OK").click(function(){        $("p").append($("#single").val()+$("#multiple").val());     });

例：获取一组radio被选中的值

HTML代码：

<input type="radio" name="sex" value="man"/>man    <input type="radio" name="sex" value="woman"/>woman    <button id="btnOK" value="提交" size="20"></button>

jQuery代码：

$("#btnOK").click(function(){        alert($('input[name=sex][checked]').val()); });

设置radio单选组的第二个元素为当前选中元素

$("input[name=sex]").get(1).checked=true;

 

例：获取一组checkbox被选中的值

HTML代码：

<input type="checkbox" name="love" value="music"/>music    <input type="checkbox" name="love" value="java"/>java    <input type="checkbox" name="love" value="game"/>game    <button id="btnOK" value="提交" size="20"></button>

jQuery代码：

$("#btnOK").click(function(){        var check="";        var item = $("input[name=love][checked]");        item.each(function(){            var isCheck=this.value;            check+=isCheck;        });        alert(check);     });

设置checkbox多选组的第一个和第二个元素为当前选中元素

$("input[name=love]").get(0).checked=true;     $("input[name=love]").get(1).checked=true;

2）val(val) （对所有匹配的元素进行设值）

例：设置文本框的值

<input type="text" />     $("input").val("hello jQuery");

为文本框设置多个值

$("input").val(["check1","check2"]);

例：对select设定一个当前选项值(即时加载页面是选中的值)

HTML代码：

<select id="single">     <option>music</option>     <option>book</option>  </select>  <select id="multiple" multiple="multiple">     <option>java</option>     <option>c#</option>     <option>php</option>     <option>sql</option>  </select>

jQuery代码：

$("#single").val("book"); $("#multiple").val(["java","sql"]);

通过select下标值为其选择一个当前选项

$("#single")[0].selectedIndex=0;

注：这里的0是固定写法，$("#single")[0]返回的是option对象。

在单选、复选框中设置当前选项的值（注：在单选和复选框中必须有value属性值）