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 相关文章推荐
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jquery实现广告上下滚动效果
Mar 04 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
You might like
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python 产生token及token验证的方法
2018/12/26 Python
Python最小二乘法矩阵
2019/01/02 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
工程造价自荐信
2013/10/09 职场文书
座谈会主持词
2014/03/20 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
美化环境标语
2014/06/20 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书