jQuery 拥有可操作HTML元素和属性的强大方法。
jQuery DOM 操作
获取内容 -text()、html()以及val()
text()设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容(包括html标记)
val() 设置或返回表单字段的值
通过 jQuery text() 和 html() 方法来获得内容
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text:"+$("#test").text());
});
$("#btn2").click(function(){
alert("HTML"+$("#test").html());
})
});
这是段落中的粗体文本
显示文本
显示
HTML
通过 jQuery val() 方法获得输入字段的值
$("#btn3").click(function(){
alert("Value"+$("#test1").val());
})
姓名:
显示值
获取属性 -attr()
$("#btn4").click(function(){
alert($("#baidu").attr("href"));
});
显示href
设置内容 - text()、html() 以及 val()
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容(包括 HTML 标记)
val() 设置或返回表单字段的值
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello World!");
});
$("#btn2").click(function(){
$("#test2").html("Hello World!!!");
});
$("#btn3").click(function(){
$("#test3").val("Hello Mary!!!");
});
});
这是段落。
这是另一个段落
设置文本
设置HTML
设置值
text()、html() 以及 val() 的回调函数
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回你希望使用的字符串。
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "old text:"+origText+"New Text: Hellow world!(index+"+i+")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "old Html:"+origText+" New HTML: Hello World(index"+i+")";
});
});
});
这是粗体文本。
这是另一段粗体文本
显示旧|新文本
显示旧|新HTML
设置属性-attr()
JQuery att()方法也可以设置/改变属性值
$(document).ready(function(){
$("#btn1").click(function(){
$("#baidu").attr("href","http://www.jianshu.com");
});
});
改变href的值
attr()方法也允许同时设置多个属性
同时设置href和title属性:
$("#btn5").click(function(){
$("#baidu").attr({
"href":"http://www.w3school.com.cn/jquery/",
"title":"W3School jQuery 教程"
});
})
改变href和title
attr()的回调函数
jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
jQuery-添加元素
通过jQuery,可以很容易地添加新元素/内容。
添加新的HTML内容
append() -在被选元素的结尾添加元素
prepend() -在被选元素的开头插入内容
after() -在被选元素之后插入元素
before() -在被选元素之前插入内容
jQuery append()方法
jQuery append()方法在被选元素的结尾插入内容
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append("Appended text");
});
$("#btn2").click(function(){
$("ol").append("
Appended item");});
});
This is a paragraph.
This is a another paragraph.
- List item 1
- List item 2
- List item 3
追加文本
追加列表项
jQuery prepend()方法
jQuery prepend()方法在被选元素的开头插入元素
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("Prepended text");
});
$("#btn2").click(function(){
$("ol").prepend("
Prepended item");});
});
This is a paragraph.
This is a another paragraph.
- List item 1
- List item 2
- List item 3
追加文本
追加列表项
通过 append() 和 prepend() 方法添加若干新元素
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。
function appendText(){
var txt1="
Text1.
";var txt2=$("
var txt3=document.createElement("p");
txt3.innerHTML="Text3.";
$("body").append(txt1,txt2,txt3);
}
This is a paragraph.
追加文本
jQuery after() 和 before() 方法
jQuery after()方法在被选元素之后插入内容
jQuety before()方法在被选元素之前插入内容
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("Before");
});
$("#btn2").click(function(){
$("img").after("After");
});
});
在图片前面添加文本
在图片后面添加文本
通过 after() 和 before() 方法添加若干新元素
fter() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):
function afterText()
{
var txt1="I "; // 以 HTML 创建元素
var txt2=$("").text("love "); // 通过 jQuery 创建元素
var txt3=document.createElement("big"); // 通过 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
}
在图片后面添加文本
jQuery -删除元素
通过jQuery,可以很容易地删除已有的HTML元素。
删除元素/内容
如需要删除元素和内容
remove() -删除被选元素(及其子元素)
empty() -从被选元素中删除子元素
jQuery remove() 方法
Query remove() 方法删除被选元素及其子元素。
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
This is some text in the div.
This is a paragraph in the div.
This is another paragraph in the div.
删除 div 元素
jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
用法和remove()一样
过滤被删除的元素
Query remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有
元素:
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
This is a paragraph in the div.
This is another paragraph in the div.
This is another paragraph in the div.
删除 class="italic" 的所有 p 元素
jQuery-获取并设置CSS类
通过jQuery,可以很容易地对CSS元素进行操作。
addClass() -向被选元素添加一个或多个类
removeClass() -从被选元素删除一个或多个类
toggleClass() -对被选元素进行添加/删除等切换操作
css() -设置或返回样式属性
jQuery addClass() 方法
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
可以在addClass()方法中规定多个类
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass()方法
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
jQuery toggleClass() 方法
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
jQuery -css()方法
css()方法设置或返回被选元素的一个或多个属性。
返回CSS属性
如需返回指定的CSS属性的值,需使用
css("propertyname");
下面的例子将返回首个匹配元素的 background-color 值:
$("p").css("background-color");
设置CSS属性
如果需要设置指定的CSS属性,
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值:
$("p").css("background-color","yellow");
设置多个 CSS 属性
如需设置多个 CSS 属性,请使用如下语法:
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size:
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery - 尺寸
通过 jQuery,很容易处理元素和浏览器窗口的尺寸。
jQuery尺寸方法
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
$("button").click(function(){
var txt="";
txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "";
txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery - 更多的 width() 和 height()
下面的例子返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度:
$("button").click(function(){
var txt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + "\n";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});
下面的例子设置指定的
$(document).ready(function(){
$("button").click(function(){
$("#div1").width(500).height(500);
})
})