首页
所有分类
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实现点击关注和取消功能
Jul 03 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery实现动态操作table行
Nov 23 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
连接查询(1) 三角函数(1) 模板引擎(1) 动态代理(1) 优先队列(1) Dijkstra(1) Carbon(1) pongo2(1) element-ui(1) 迪杰斯特拉(1)
You might like
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python入门篇之字典
2014/10/17 Python
python tornado微信开发入门代码
2018/08/24 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
用Python解数独的方法示例
2019/10/24 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python集合操作方法详解
2020/02/09 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
解释i节点在文件系统中的作用
2013/11/26 面试题
学校食品安全实施方案
2014/06/14 职场文书
自我管理的活动方案
2014/08/25 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
法制教育观后感
2015/06/17 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android