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("我们都爱笑");

识别不了里面的HTML代码

div.text(div.text()+"我们都爱笑");

获得文本的值

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

注意特殊情况：

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

操作页面的元素 A

//创建了新的元素

var p=$(" List Item0 ")

//增加子元素

---现有元素之后

$("#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();

jQuery操作页面元素属性和内容相关推荐

利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
查看本章节查看作业目录需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变当用户单击"+" ...
jq追加html属性,jQuery 操作 HTML 元素和属性的方法
jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容: text().html() 以及 val()方法 My Test JQuery $( ...
js第7章DOM案例：获取操作的元素、元素内容操作、元素属性操作、classList的使用、获取节点、节点追加、删除节点和节点属性
目录 1.获取操作的元素 document对象的方法 document对象的属性 Element对象的方法和属性 2. 元素内容操作 3.元素属性操作 4.classList的使用 5. 获取节点 6 ...
jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
操作页面元素WebElement—Selenium自动化测试指南（4）
5.5.7 XPath(xPathToFind) 如果以上查找方法都无法定位到指定对象,那么可以按XPath进行查找.例如,百度首页有文本框,如图5-35所示. 图5-35 百度搜索文本框其HT ...
Jquery导出页面表格table的内容为Excel，PDF，DOC格式
Jquery导出页面表格table的内容为Excel,PDF,DOC格式文档地址:http://www.jqueryfuns.com/resource/2381 1.引入jquery的js–这里就不 ...
jQuery实现页面元素智能定位
原文:jQuery实现页面元素智能定位源代码下载地址:http://www.zuidaima.com/share/1550463635950592.htm
html jq移到出现内容,jquery操作html元素之（获得内容和属性）
jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易. 提示:DOM = Docu ...
jQuery修改页面元素的属性
作为一个后台开发者,在web开发的时候会常常遇到修改前台页面的属性的问题.这两天我发现jQuery的$("#id").attr("prop","值&q ...

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

jQuery操作页面元素属性和内容相关推荐

最新文章

热门文章