首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery 操作 HTML 元素和属性的方法

Posted in jQuery onNovember 12, 2018

jQuery拥有操作 HTML 元素和属性的强大方法。

1. 获取HTML 元素的内容和属性

(1) 获得内容:  text()、html() 以及 val()方法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
 <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" > 
  $(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('这是一个<b>神奇</b>的世界啊');
    alert($("#myDiv1").html());
   });
   //val() - 设置或返回表单字段的值
   $("#btnVal").click(function(){
    alert($("#myInput1").val());
   });  
   $("#btnValSet").click(function(){
    $("#myInput1").val('好好学习，天天向上');
    alert($("#myInput1").val());
   });
  });
 </script>
</head>
<body>
 <button type="button" id="btnText">text()方法获取内容</button>
 <button type="button" id="btnHtml">html()方法获取内容</button>
 <button type="button" id="btnVal">val()方法获取内容</button><br/>
 <button type="button" id="btnTextSet">text()方法设置内容</button>
 <button type="button" id="btnHtmlSet">html()方法设置内容</button>
 <button type="button" id="btnValSet">val()方法设置内容</button>
 <div id="myDiv1">这是一个神奇的 <b>世界</b>啊 </div>
 <input type="text" id="myInput1" value="大家好"></p>
</body>
</html>

jQuery 操作 HTML 元素和属性的方法jQuery 操作 HTML 元素和属性的方法

jQuery 操作 HTML 元素和属性的方法 jQuery 操作 HTML 元素和属性的方法

jQuery 操作 HTML 元素和属性的方法 jQuery 操作 HTML 元素和属性的方法

(2) 获取属性:  attr()方法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
 <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" > 
  $(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"));
   });
  });
 </script>
</head>
<body>
 <button type="button" id="btn_attr1">attr()方法获取属性</button><br/>
 <button type="button" id="btn_attr2">attr()方法设置属性</button>
 <a href="https://www.baidu.com" id="myHref">超链接</a>
</body>
</html>

jQuery 操作 HTML 元素和属性的方法

jQuery 操作 HTML 元素和属性的方法

2. 添加元素：append() 和 prepend() 方法，after() 和 before() 方法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
 <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" > 
  $(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="<b>程序员</b>";     
    var txt2=$("<i></i>").text("是厉害的人");  
    var txt3=document.createElement("<h1>"); 
    txt3.innerHTML="好用的jQuery!";   
    $("#myInput1").after(txt1,txt2,txt3);
   });
   **/
  });
 </script>
</head>
<body>
 <button type="button" id="btn_append">append()方法</button>
 <button type="button" id="btn_prepend">prepend()方法</button><br/>
 <button type="button" id="btn_before">before()方法</button>
 <button type="button" id="btn_after">after()方法</button>
 <div id="myDiv1" style="background-color:green">这是一个神奇的 <b>世界</b>啊 </div>
 <input type="text" id="myInput1" value="大家好"/>
</body>
</html>

jQuery 操作 HTML 元素和属性的方法 jQuery 操作 HTML 元素和属性的方法

jQuery 操作 HTML 元素和属性的方法 jQuery 操作 HTML 元素和属性的方法 jQuery 操作 HTML 元素和属性的方法

 3. 删除元素：remove() 方法，empty() 方法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
 <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" > 
  $(function(){ 
   //remove() 方法删除被选元素及其子元素
   $("#btn_remove").click(function(){
    $("#myDiv1").remove();
   });
   //empty() 方法删除被选元素的子元素。
   $("#btn_empty").click(function(){
    $("#myDiv2").empty();
   });
  });
 </script>
</head>
<body>
 <button type="button" id="btn_remove">remove()方法</button>
 <button type="button" id="btn_empty">empty()方法</button><br/>
 <div id="myDiv1" style="background-color:green">这是一个神奇的 <b>世界</b>啊 </div>
 <div id="myDiv2" style="background-color:yellow">这是一个神奇的 <b>世界</b>啊 </div>
</body>
</html>

jQuery 操作 HTML 元素和属性的方法

jQuery 操作 HTML 元素和属性的方法

jQuery 操作 HTML 元素和属性的方法

4. 获取并设置 CSS 类：addClass() 方法，removeClass() 方法，toggleClass() 方法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
 <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" > 
  $(function(){ 
   //addClass() - 向被选元素添加一个或多个类
   $("#btn_addClass").click(function(){
    $("#myDiv1").addClass('blue');
   });
   //removeClass() - 从被选元素删除一个或多个类
   $("#btn_removeClass").click(function(){
    $("#myDiv1").removeClass('blue');
   });
   //toggleClass() - 对被选元素进行添加/删除类的切换操作
   $("#btn_toggleClass").click(function(){
    $("#myDiv1").toggleClass('blue');
   });
  });
 </script>
</head>
<style type="text/css">
.blue
{
 font-size:16px;
 background-color:yellow;
}
</style>
<body>
 <button type="button" id="btn_addClass">addClass()方法</button><br/>
 <button type="button" id="btn_removeClass">removeClass()方法</button><br/>
 <button type="button" id="btn_toggleClass">toggleClass()方法</button>
 <div id="myDiv1">这是一个神奇的 <b>世界</b>啊 </div>
</body>
</html>

jQuery 操作 HTML 元素和属性的方法 jQuery 操作 HTML 元素和属性的方法 jQuery 操作 HTML 元素和属性的方法

jQuery 操作 HTML 元素和属性的方法 jQuery 操作 HTML 元素和属性的方法

5. css() 方法：返回 CSS 属性、设置 CSS 属性、设置多个 CSS 属性

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
 <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" > 
  $(function(){ 
   //返回指定的 CSS 属性的值
   $("#btn_css1").click(function(){
    alert('myDiv1的背景颜色：'+$("#myDiv1").css("background-color"));
   });
   //设置指定的 CSS 属性
   $("#btn_css2").click(function(){
    $("#myDiv1").css("background-color","green");
   });
   //设置多个 CSS 属性
   $("#btn_css3").click(function(){
    $("#myDiv1").css({"background-color":"pink","font-size":"20px"});
   });
  });
 </script>
</head>
<body>
 <button type="button" id="btn_css1">获取css属性的值</button><br/>
 <button type="button" id="btn_css2">设置css属性</button><br/>
 <button type="button" id="btn_css3">设置多个css属性</button><br/>
 <div id="myDiv1" style="background-color:yellow">这是一个神奇的 <b>世界</b>啊 </div>
</body>
</html>

jQuery 操作 HTML 元素和属性的方法 jQuery 操作 HTML 元素和属性的方法 jQuery 操作 HTML 元素和属性的方法

6. 处理尺寸的重要方法：width() 和 height() 方法，innerWidth() 和 innerHeight() 方法，outerWidth() 和 outerHeight() 方法。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
 <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" > 
  $(function(){ 
   //width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
   //height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
   //innerWidth() 方法返回元素的宽度（包括内边距）。
   //innerHeight() 方法返回元素的高度（包括内边距）。
   //outerWidth() 方法返回元素的宽度（包括内边距和边框）。
   //outerHeight() 方法返回元素的高度（包括内边距和边框）。
   $("#btn_css1").click(function(){
    $("#myDiv2").html("width: "+$("#myDiv1").width());
    $("#myDiv2").html($("#myDiv2").html()+"<br/>height: "+$("#myDiv1").height());
    $("#myDiv2").html($("#myDiv2").html()+"<br/>innerWidth: "+$("#myDiv1").innerWidth());
    $("#myDiv2").html($("#myDiv2").html()+"<br/>innerHeight: "+$("#myDiv1").innerHeight());
    $("#myDiv2").html($("#myDiv2").html()+"<br/>outerWidth: "+$("#myDiv1").outerWidth());
    $("#myDiv2").html($("#myDiv2").html()+"<br/>outerHeight: "+$("#myDiv1").outerHeight());
   });
  });
 </script>
</head>
<body>
 <button type="button" id="btn_css1">获取css属性的值</button><br/>
 <div id="myDiv1" style="background-color:yellow;padding:10px;margin:3px;border:1px solid blue;">Div区域</div>
 <div id="myDiv2" ></div>
</body>
</html>

jQuery 操作 HTML 元素和属性的方法

总结

以上所述是小编给大家介绍的jQuery 操作 HTML 元素和属性的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

jQuery 操作 HTML 元素和属性的方法

- Author -

在代码的世界里游走

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jquery+ajax实现省市区三级联动 （封装和不封装两种方式）
May 15 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
详解webpack引用jquery（第三方模块）的三种办法
Aug 21 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 #jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 #jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 #jQuery
jquery使用FormData实现异步上传文件
Oct 25 #jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 #jQuery
jQuery pagination分页示例详解
Oct 23 #jQuery
评语(336) 倡议书(159) 保证书(97) 计划书(118) 制度(225) 寄语(276) 感谢信(72) 请假条(31) 活动总结(790) 接收函(23)
You might like
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
vue如何引用其他组件（css和js）
2017/04/13 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
python实现进程间通信简单实例
2014/07/23 Python
python3抓取中文网页的方法
2015/07/28 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
通过实例了解python property属性
2019/11/01 Python
Python中bisect的使用方法
2019/12/31 Python
如何用python免费看美剧
2020/08/11 Python
python创建文本文件的简单方法
2020/08/30 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
美国折扣宠物药房：Total Pet Supply
2018/05/27 全球购物
编辑个人求职信范文
2013/09/21 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
认购协议书范本
2014/04/22 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
初中毕业生感言
2015/07/31 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
关于社会实践的心得体会（2016最新版）
2016/01/25 职场文书
2019大学生实习报告
2019/06/21 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
MySQL如何解决幻读问题
2021/08/07 MySQL
Java中try catch处理异常示例
2021/12/06 Java/Android