jQuery HTML - 捕获
- 获得内容 - text(), html()以及val()
- text(): 设置或返回所选元素的文本内容
- html(): 设置或返回所选元素的内容(++包括HTML内容++)
- val(): 设置或返回表单字段的值
- 属性获取 - attr()
该方法用于获取属性值
注意:
prop()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是空字符串。
attr()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是undefined。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
jQuery HTML - 设置内容和属性
- 设置内容 - text(), html()以及val()
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
text(), html()以及val()的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
- 设置属性 - attr()
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
attr() 也提供回调函数, 回调函数有两个参数: 被选元素列表中当前元素的下表, 以及原始(旧的)值
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery HTML - 添加元素
- append() 方法
在被选元素的结尾插入内容(仍然该元素的内部) - prepend() 方法
在被选元素的开头插入内容
通过append() 和 prepend() 方法添加若干新元素
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效)
function appendText(){
var txt1 = "<p>文本<p>";
var txt2 = $("<p></p>").text("文本");
var txt3 = document.createElement("p");
txt3.innerHtml = "文本";
$("body").append(txt1, txt2, txt3);
}
- after() 方法
在被选元素之后插入内容 - before() 方法
在被选元素之前插入内容
通过 after() 和 before() 方法添加若干新元素
++同上++
jQuery HTML - 删除元素
- remove() 方法
删除被选元素++及其子元素++ - empty() 方法
删除被选元素的子元素
过滤被删除的元素
remove() 方法可以接受一个参数, 允许您对被删元素进行过滤
<head>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有 class="italic" 的 p 元素。</button>
</body>
jQuery HTML - 获取并设置css类
- addClass() 方法
$("button").click(function{
//在添加类时, 可以选取多个元素
//注意: blue和important时两个样式, 此处已略
$("h1,h2,p").addClass("blue");
//也可以在addClass() 方法中规定多个类
$("div").addClass("important blue")
})
- removeClass() 方法
- toggleClass() 方法
该方法对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
})
jQuery HTML - css()方法
css() 方法设置或返回被选元素的一个多个样式属性
- 返回 css 属性
返回指定的 css 属性的值, 语法如下
css("propertyname");
$("p").css("background-color");
- 设置 css 属性
设置指定的 css 属性, 语法如下
css("propertyname","value")
$("p").css("background-color","yellow");
- 设置多个css属性
$("p").css({
"background-color": "yellow",
"font_size": "200%"
})
jQuery 遍历 - 祖先
DOM树
- parent() 方法
返回被选元素的直接父元素, 该方法只会向上一级对 DOM 树进行遍历 - parents() 方法
返回被选元素的所有祖先元素, 它一路向上直到文档的根元素
你也可以使用可选参数来过滤对象元素的搜索
$(document).ready(function(){
$("span").parents("ul")
})
- parentsUntil() 方法
返回介于两个给定元素之间的所有祖先元素
jQuery 遍历 - 后代
- children() 方法
返回被选元素的所有直接子元素
你也可以使用可选参数来过滤对子元素的搜索
$(function(){
//返回类名为 "1" 的所有 <p> 元素, 并且它们是<div>的直接子元素
$("div").children("p.1");
})
- find() 方法
返回被选元素的后代元素, 一路向下直到最后一个后代
$(function(){
//返回属于<div>后代的所有<span>元素
$("div").find("span");
})
jQuery 遍历 - 同胞(siblings)
同胞拥有相同的父元素
- siblings() 方法
返回被选元素的所有同胞元素
你也可以使用可选参数来过滤对同胞元素的搜索
下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素
$(document).ready(function(){
$("h2").siblings("p");
});
- next() 方法
返回被选元素的下一个同胞元素 - nextAll() 方法
返回被选元素的所有跟随的同胞元素 - nextUntil() 方法
返回介于两个给定参数之间的所有跟随的同胞元素
$(function(){
//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
$("h2").nextUnitl("h6")
})
- prev(), prevAll() 和 prevUntil() 方法
工作方式与上面的方法类似, 只不过方向相反而已: 它们返回的是前面的同胞元素
jQuery 遍历 - 过滤
- first() 方法
返回被选元素的首个元素
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素
$(function(){
$("div p").first();
})
- last() 方法
方法返回被选元素的最后一个元素 - eq() 方法
返回被选元素中带有指定索引号的元素, 其中索引是从0开始的
$(function(){
$("p").eq(1);
})
- filter() 方法
允许你规定一个标准, 不匹配这个标准的元素会被从集合中删除, 匹配的元素会被返回
$(function(){
//返回带有类名"url"的所有<p>元素
$("p").filter(".url");
})
- not() 方法
返回不匹配标准的所有元素, 与 filter() 相反
网友评论