jquery 操作

来源：互联网发布：nba淘宝官方旗舰店编辑：程序博客网时间：2024/05/17 23:32

jquery 操作

-选择元素
-读取元素
-修改元素

使用chrome console 实践

<!DOCTYPE html><html><head><title>test</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script></head><body><ul><li>first one</li><li>one</li><li class="nice">one</li><li>one</li><li>one</li></ul><ul><li>one</li><li>one</li><li>one</li><li class="nice">one</li><li>one</li></ul><p>hello world</p><a href="baidu">baidu</a></body></html>

选择元素
1.使用与css选择器类似的方式
$("p") -- 所有元素
$(".nav") -- 所有class="nav"的元素
$("#name") -- 所有id="name"的元素

$("p.nav") -- 所有class="nav"的元素
$("p#name") -- 所有id="name"的元素
$("p:first") -- $("p") 选出来的第一个元素
$("p:last") -- $("p") 选出来的最后一个元素
$("p:even") -- $("p") 选出来的奇数个元素
$("p:odd") -- $("p") 选出来的偶数个元素
$("p:eq(3)") -- $("p") 选出来的第4个元素(index从0开始)

2.属性选择器
$("[href]") -- 选取所有带有 href 属性的元素。
$("[href='#']") -- 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") -- 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") -- 选取所有 href 值以 ".jpg" 结尾的元素。

3.jquery方法
$("p").children() -- $("p")选出来的元素的直接子元素
$("p").parent() -- $("p")选出来的元素的直接父元素
$("p").parents() -- $("p")选出来的元素的所有父元素，包括祖父元素等等，直到<html>
$("p").closest("div") -- $("p")选出来的元素的所有父元素中，关系最近的<div>元素
$("p").find('li') -- $("p")选出来的元素的所有子元素中，所有的<li>元素

$("p").first() -- $("p")选出来的第一个元素
$("p").last() -- $("p")选出来的最后一个元素
$("p").eq(3) -- $("p")选出来的第4个元素，index从0开始
$("p").prev() -- $("p")选出来的N个元素的按先后顺序组成集合，返回这N个元素各自的前一个元素组成的集合，集合中第一个元素的前一个元素不存在，则返回空

读取元素
$("p").text() -- 设置或返回$("p")选出来的元素及其子孙元素的文本内容，如helloworld,helloworld即为要返回的内容，$("p")选出来的元素不只一个，合并所有元素的标签中间的内容，并返回
$("p").html() -- 设置或返回$("p")选出来的元素第一个元素的标签中间的所有内容，helloworld，helloworld即为要返回的内容，$("p")选出来的元素不只一个时，只返回第一个
$("#test").val() -- 设置或返回表单字段的值。如，<input type="text" id="test" value="hello">在网页上显示为文本框内有hello值，此时调用$("#test").val()返回hello
$("a").attr("href") -- 设置或返回元素的属性值
$("p").css("color") -- 读取选中的元素css属性color值，若选择的元素有多个，返回第一个的

修改元素
$("p").after("hi") -- 在$("p")选出来的每一个元素后边添加after括号中的内容
$("body").append("hi") -- 在$("body")选出的元素的子元素后边添加after括号中的内容
$("p").before("hi") -- 同after()，只不过是加在前面
$("body").prepend("hi") -- 同append()，只不过是加在前面

$("ul").empty() -- 将选中的元素的文本内容和子孙元素全部清空
$("ul").remove() -- 将选中的元素删除
$("ul").removeClass("color") -- 将选中元素指定的class移除，未指定class的，移除所有class
$("ul").removeAttr("name") -- 将选中元素指定的属性移除，未指定属性的，不移除

$("p").addClass("classname") -- 给选中的元素添加class
$("p").css("color","red") -- 给选中的元素添加css属性，设置多个css属性，使用{"color":"red","font-size":"20px"}