jQueryHtml


获取元素的内容和属性

//下面这个点击按钮获取属性值
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

jQuery attr() 方法用于获取属性值。

//获取元素的href值
$("button").click(function(){
  alert($("#runoob").attr("href"));
});

设置内容和属性

这个和获取是一样的,我们只要吧值传进去就可以设置了

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});

回调函数

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});

设置属性

//设置单个属性
$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});
//设置多个属性
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

添加元素

$("p").append("追加文本");

总结:
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。

删除元素


删除时可以选择性的删除

$("p").remove(".italic");

操作css类

//添加多个类
$("body div:first").addClass("important blue");
//获取css属性
$("p").css("background-color");
//设置css属性
$("p").css("background-color","yellow");
//也可以设置多个
$("p").css({"background-color":"yellow","font-size":"200%"});

获取元素的尺寸


$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

文章作者: 小游
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 小游 !
  目录