jQuery 拥有可操作 HTML 元素和属性的强大方法。
一、获得值
1、text() 设置或返回所选元素的文本内容
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
2、html() 设置或返回所选元素的内容（包括 HTML 标记）
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
3、val() 设置或返回表单字段的值
$("button").click(function(){
alert("值为: " + $("#test").val());
});
4、attr() 获取属性
$("button").click(function(){
alert("属性为: "+ $("#baidu").attr("href"));
});
二、设置值
$("#btn1").click(function(){
$("#test1").text("Hello world");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world</b>");
});
$("#btn3").click(function(){
$("#test3").val("Baidu");
});
$("#btn4").click(function(){
$("#Baidu").attr(
{
"href" : "http://www.baidu.com",
"title" : "百度"
});
});
-----还可以设置这些方法的回调函数-----
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始值。然后以函数新值返回您希望使用的字符串。
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
$("#Baidu").attr("href", function(i, origValue){
return origValue;
});
三、添加参数
1、append() 在被选元素的结尾插入内容
2、prepend() 在被选元素的开头插入内容
3、after() 在被选元素之后插入内容
4、before() 在被选元素之前插入内容
例子:
$("p").append(" 追加文本");
//不同的方式追加多条新元素
function appendText()
{
var txt1="<p>文本</p>"; // 使用HTML标签创建文本
var txt2=$("<p></p>").text("文本"); // 使用jQuery创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本"; // 使用DOM创建文本
$("body").append(txt1,txt2,txt3); // 追加新元素
}
四、删除元素
1、remove() 方法删除被选元素及其子元素。
2、empty() 方法删除被选元素的子元素。
删除 class="UILabel" 的所有<p>元素： $("p").remove(".UILabel");
五、jQuery 操作 CSS
1、addClass() 向被选元素添加一个或多个类
2、removeClass() 从被选元素删除一个或多个类
3、toggleClass() 对被选元素进行添加/删除类的切换操作
4、css() 设置或返回样式属性
例子：（这里我们拿toggleClass为例）
① 首先设置一下样式表 有TextSize和Color这两个类
<style type="text/css">
.TextSize
{
font-size: x-large;
}
.Color
{
color: red;
}
</style>
② 设置html样式
<h1 class="Color">标题1111</h1>
<p>段落段落</p>
<div>文本哈哈哈</div>
<br>
<button>添加/删除类</button>
③ 设置jquery脚本
<script>
$(document).ready(function()
{
$("button").click(function()
{
$("h1,p,div").toggleClass("Color TextSize");
});
});
</script>
六、jQuerycss() 方法
直接拿例子来说：
<p id="p1" style="background-color: blue">段落1111</p>
<p id="p2" style="background-color: yellow">段落2222</p>
<br><button>按钮</button>
① 返回 CSS 属性
$("button").click(function()
{
alert("返回的值"+$("#p2").css("background-color"));
});
② 设置（多个） CSS 属性
$("button").click(function()
{
$("#p1,#p2").css({
"background-color":"red",
"font-size":"200%"});
});
七、jQuery尺寸
1、width()
设置或返回元素的宽度（不包括内边距、边框或外边距）
2、height()
设置或返回元素的高度（不包括内边距、边框或外边距）
3、innerWidth()
返回元素的宽度（包括内边距）
4、innerHeight()
返回元素的高度（包括内边距）
5、outerWidth()
返回元素的宽度（包括内边距和边框）
6、outerHeight()
返回元素的高度（包括内边距和边框）
例子：
jquery代码：
var txt="";
txt+="div 宽度: " + $("#div1").width();
txt+="div 高度: " + $("#div1").height();
txt+="div 宽度，包含内边距: " + $("#div1").innerWidth();
txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth();
txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
$("#div1").html(txt);
html代码：
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
网友评论