jQuery获取内容和属性
jQuery 提供一系列与 DOM (DOM = Document Object Model(文档对象模型))相关的方法,这使访问和操作元素和属性变得很容易,
用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
pop方法和attr方法的区别:
对于 HTML 元素本身就带有的固有属性(W3C 标准里包含的属性,或者说在 IDE 里能够智能提示的属性,就叫做固有属性),在处理时,使用 prop 方法。对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法。
prop()方法的结果:
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是空字符串。
attr()方法的结果:
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是 undefined。
具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()
attr() 方法也用于设置/改变属性值。attr() 方法也允许您同时设置多个属性。。,方法 attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
举例(设置/改变属性值):
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
举例(回调函数返回):
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery添加元素/内容
添加新内容的四个 jQuery 方法:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
append/prepend 是在被选元素内部插入。
after/before 是在元素外面追加。区别举例:
append:
<p>
<span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>
结果是这样的:
<p>
<span class="s1">s1</span>
<span class="s2">s2</span>
</p>
after:
<p>
<span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>
结果是这样的:
<p>
<span class="s1">s1</span>
</p>
<span class="s2">s2</span>
通过 append() 和 prepend() 方法添加若干新元素:
function appendText()
{
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p"); // 使用 DOM 创建文本 text with DOM
txt3.innerHTML="文本。";
$("body").append(txt1,txt2,txt3).prepend(txt1,txt2,txt3); // 追加新元素
}
jQuery 删除元素
删除元素和内容,一般可使用以下两个 jQuery 方法:
- remove() - 删除被选元素(及其子元素)——
remove() 方法也可接受一个参数,允许对被删元素进行过滤。比如:
$("p").remove(".italic"); // 删除所有class=italic的p元素
-
empty() - 从被选元素中删除子元素
JQuery获取并设置 CSS 类
jQuery 拥有若干进行 CSS 操作的方法。比如下面四种方法:
- addClass() - 向被选元素添加一个或多个类:
$("button").click(function(){ $("#div1").addClass("important blue"); });
- removeClass() ——从被选元素删除一个或多个类
- toggleClass() ——对被选元素进行添加/删除类的切换操作(有则删除,没有就添加)
- css() —— 设置或返回样式属性。css() 返回属性的语法:
css("propertyname");
css() 设置单个属性语法:
css("propertyname","value");
css() 设置多个 CSS 属性语法:
css({"propertyname":"value","propertyname":"value",...});
jQuery 尺寸
jQuery 提供多个处理尺寸的重要方法:
- width()——设置或返回元素的宽度(不包括内边距、边框或外边距)。
- height()——设置或返回元素的高度(不包括内边距、边框或外边距)。
- innerWidth()——返回元素的宽度(包括内边距)。
- innerHeight()——返回元素的高度(包括内边距)。
- outerWidth()——返回元素的宽度(包括内边距和边框)。
- outerHeight()——返回元素的高度(包括内边距和边框)。
这些方法对应于元素的尺寸: