这期内容当中小编将会给大家带来有关使用jQuery怎么操作 HTML元素和属性，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
创新互联公司是一家集网站建设,三台企业网站建设,三台品牌网站建设,网站定制,三台网站建设报价,网络营销,网络优化,三台网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
1. 获取HTML 元素的内容和属性
(1) 获得内容: text()、html() 以及 val()方法
My Test JQuery
$(function(){
//text() - 设置或返回所选元素的文本内容
$("#btnText").click(function(){
alert($("#myDiv1").text());
});
$("#btnTextSet").click(function(){
$("#myDiv1").text('这是一个美好的日子');
alert($("#myDiv1").text());
});
//html() - 设置或返回所选元素的内容（包括 HTML 标记）
$("#btnHtml").click(function(){
alert($("#myDiv1").html());
});
$("#btnHtmlSet").click(function(){
$("#myDiv1").html('这是一个神奇的世界啊');
alert($("#myDiv1").html());
});
//val() - 设置或返回表单字段的值
$("#btnVal").click(function(){
alert($("#myInput1").val());
});
$("#btnValSet").click(function(){
$("#myInput1").val('好好学习，天天向上');
alert($("#myInput1").val());
});
});
text()方法获取内容
html()方法获取内容
val()方法获取内容
text()方法设置内容
html()方法设置内容
val()方法设置内容
这是一个神奇的 世界啊
(2) 获取属性: attr()方法
My Test JQuery
$(function(){
//attr() 方法用于获取属性值，也用于设置/改变属性值。
$("#btn_attr1").click(function(){
alert($("#myHref").attr("href"));
});
$("#btn_attr2").click(function(){
$("#myHref").attr("href","https://www.cnblogs.com");
alert('超链接属性设置为：'+$("#myHref").attr("href"));
});
});
attr()方法获取属性
attr()方法设置属性
超链接
2. 添加元素：append() 和 prepend() 方法，after() 和 before() 方法
My Test JQuery
$(function(){
//append() 方法在被选元素的结尾插入内容（仍然该元素的内部）
$("#btn_append").click(function(){
$("#myDiv1").append(" 是的");
});
//prepend() 方法在被选元素的开头插入内容（仍然该元素的内部）
$("#btn_prepend").click(function(){
$("#myDiv1").prepend("我说 ");
});
//before() 方法在被选元素的开头插入内容
$("#btn_before").click(function(){
$("#myInput1").before("Hello ");
});
//after() 方法在被选元素的开头插入内容
$("#btn_after").click(function(){
$("#myInput1").after("World ");
});
//特别说明：
//append() 和 prepend() 方法能够通过参数接收无限数量的新元素
//after() 和 before() 方法能够通过参数接收无限数量的新元素。
//可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
//举例如下：
/**
$("#btn_after").click(function(){
var txt1="程序员";
var txt2=$("").text("是厉害的人");
var txt3=document.createElement("");
txt3.innerHTML="好用的jQuery!";
$("#myInput1").after(txt1,txt2,txt3);
});
**/
});
append()方法
prepend()方法
before()方法
after()方法
这是一个神奇的 世界啊
