当前位置：移动技术网 > IT编程>开发语言>JavaScript > jQuery 操作 HTML 元素和属性的方法

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

2019年06月02日 | 移动技术网IT编程 | 我要评论

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>

　　(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>

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>

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>

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>

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>

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 元素和属性的方法，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

多线程爬取狗妈表情包

通过多线程爬取狗妈表情包import requestsimport jsonfrom jsonpath impo... [阅读全文]
Python：数据导出到Excel（使用xlwt）

写在前面：前端ajax调用导出方法，ajax无法导出问题原因：ajax是无法直接导出excel的，因为ajax的... [阅读全文]
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地

爬虫代码如下：运行需要本地开启mongo服务器端，安装有谷歌浏览器及selenium对应版本的驱动文件#codi... [阅读全文]
MongoDB基础操作

一、概述在MongoDB数据库里是存在有数据库的概念，但是没有模式（所有的信息都是按照文档保存的），保存数据的结... [阅读全文]
nodejs中mysql的用法

1、建立数据库连接：createConnection(Object)方法该方法接受一个对象作为参数，该对象有四个... [阅读全文]
Node.js 连接 MySQL

导言在我们学习后端（node）的过程中，要时常和数据库打交道，所以说我们打通node、MySQLJavaScri... [阅读全文]
Mysql trace命令介绍

trace作用：对SQL的跟踪，可以知道SQL是如何执行的，比EXPLAIN还要强大。注意点：开启trace工具... [阅读全文]
详解JavaScript作用域闭包

javascript闭包，是js开发工程师必须深入了解的知识。3月份自己曾撰写博客《javascript闭包》，博客中只是简单阐述了闭包的工作过程和列举了几个示... [阅读全文]
深入了解JavaScript词法作用域

javascript并不是传统的块级作用域，而是函数作用域！一、作用域 javascript引擎在代码执行前会对其进行编译，在这个过程中，像var a = 2... [阅读全文]
详解JavaScript自定义函数

一、定义方法：在javascript中必须用function关键字function funcname(arg1,arg2...){statements;retu... [阅读全文]

网友评论


验证码：

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

2019年06月02日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论