jQuery再学习之三、jQuery操作

前言

jQuery也有自己的方式操作属性、css、值等。

1          使用jQuery操作元素属性

1.1        attr(…) ：读取元素属性，例：

$("...").attr("type")

读取元素的type属性值

1.2        attr({xx:yy,xx:yy}) ：设置元素属性值(注意大括号)，例：

$("...").attr({id:"testId", name:"testName"})

设置元素的id和name属性值

1.3        removeAttr(…) ：删除元素属性，例：

$("...").removeAttr("id")

删除元素的id属性

2          使用jQuery操作元素css类

2.1        addClass(…) ：添加css类，例：

$("...").addClass("title")

为元素添加名为title的css类

2.2        remove(…) ：删除css类，例：

$("...").removeClass("title")

将元素的名为title的css类移除

2.3        toggleClass(…) ：如果存在该类就删除，否则添加，例：

$("...").toggleClass("title")

如果元素存在名为title的css类，就移除该类，否则，就添加该css类

3          使用jQuery操作css属性

3.1        $("#yy").css("color") ：读取css属性，读取id为yy的元素的样式的color属性

3.2        $("#yy").css({color:"red", font:"30px"}) ：设置css属性，设置id为yy的元素的样式的color和font属性（注意大括号）

4          使用jQuery操作html代码

4.1        $("...").html() ：读取第一个元素的html代码，例：

$("body").html()

读取body节点下的html代码，如果是数组则读取第一个元素的html代码

4.2        $("...").html("content") ：设置所有匹配元素的html代码，例：

$("body").html("kkkkkkkk")

设置body节点下的html代码为kkkkkkk

5          使用jQuery操作文本代码

5.1        $("...").text() ：读取所有匹配元素的text文本，例：

$("div").text()

读取所有div节点下的text文本代码

5.2        $("...").text("content") ：设置所有匹配元素的text文本，例：

$("div").text("kkkkkkkk")

设置所有div节点下的text代码为kkkkkkk

6          使用jQuery读取元素的value值

6.1        $("...").val() ：读取第一个匹配元素的当前值，例：

$("#txtName").val()

读取txtName元素的值

6.2        $("...").val("content") ：设置所有匹配元素的当前值，例：

$("input").val("kkkkkkkk")

设置所有input节点下的当前值为kkkkkkk

7          使用jQuery对文档进行操作

7.1        $("...").append("..."); ：向每一个匹配元素内追加内容，例：

$("#yy").append("<input type='text' />");

向id为yy的元素的内部追加一个文本框

7.2        $("...").appendTo("..."); ：将内容追加到匹配的元素，例：

$("<input type='text' />").appendTo("#yy")

效果同上面一样

7.3        prepend ：向每一个匹配元素内的前端位置追加内容

7.4        prependTo ：追加内容到每一个匹配元素内的前端位置

7.5        $("...").after("..."); ：在…的后面添加内容（同级），例：

$("#yy").after("<input type='text' />");

在id为yy的元素后添加一个文本框

7.6        $("...").before("..."); ：在…的前面添加内容（同级），例：

$("#yy").before("<input type='text' />");

在id为yy的元素前面添加一个文本框

7.7        $("...").insertAfter("..."); ：添加…到元素后面（同级）

7.8        $("...").insertBefore("..."); ：添加…到元素前面（同级）

7.9        $("#yy").replaceWith("<input type='text' />"); ：将id为yy的元素替换成文本框

7.10   $("...").remove("..."); : 从dom中删除匹配的元素，例：

$("#yy").remove();

删除id为yy的元素

$("div").remove(".title");

删除css类名为title的div元素

8          使用jQuery获取元素位置、宽度、高度相关信息

8.1        offset(){top,left} ：获取相对窗口偏移量对象，例：$("#yy").offset().top

8.2        position(){top,left} ：获取相对父窗口的偏移量对象，例：$("#yy").position().top

8.3        scrollTop([val])、scrollLeft([val]) ：获取设置顶部及左边偏移量

8.4        width([val])、height([val]) ：获取设置宽度高度