jQuery操作页面元素属性和内容

操作页面元素的属性 A

$("#bu1").click(function(){

//获得元素对象

var tex=$("#inp1");

//获得元素对象的属性

var te=tex.attr("type");

var cl =tex.attr("class");

//获得元素固有的属性值

var val =tex.attr("value");

console.log(te+"------"+cl+"-----"+val);

//获得文本框实时输入的值

var val2=tex.val();

// alert(val2);

}

操作页面元素的属性 B

tex.attr("type","button");

tex.attr("value","测试按钮");

//支持json数据格式

tex.attr({"type":"button","value":"测试按钮"});

var ch= $("#fav").attr("checked");

var flag=$("#fav").prop("checked",true);

操作页面的文本和值 A

//获得div元素对象

var div =$("#div1");

//获得元素的内容 含有HTML的标签的

var ht=div.html();

console.log(ht);

//只是获得文本内容， 不含有HTML标签

var te =div.text();

console.log(te);

//获得文本框的值

var val=$("#inp1").val();

console.log(val);

操作页面的文本和值 B

可以识别里面的html代码

div.html("<b>我们都爱笑</b>");

识别不了里面的HTML代码

div.text(div.text()+"<b>我们都爱笑</b>");

获得文本的值

$("#inp1").val("sxt");

注意特殊情况：

Select 、textarea 两个标签获得值得时候需要用val()

操作页面的元素 A

//创建了新的元素

var p=$("<p> <b>List Item0</b> </p>")

//增加子元素

---现有元素之后

$("#div1").append(p);

//把p元素增加到 div里面

p.appendTo("#div1");

//添加内部的子元素 ---现有元素之前

$("#div1").prepend(p);

p.prependTo("#div1");

//平级的添加元素---现有元素之前

p.insertBefore("#div1");

$("#div1").before(p);

//平级的添加元素---现有元素之后

p.insertAfter("#div1");

$("#div1").after(p);

操作页面的元素 B

/***********替换指定的节点******************/

$("div p:nth-child(1)").replaceWith(p);

p.replaceAll("div p:nth-child(5)");

/**********删除指定的节点元素******************/

//删除指定的元素

$("#div1").remove();

$("div p:nth-child(3)").remove();

//清空内容

$("#div1").empty();

$("div p:nth-child(2)").empty();