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

2024-11-27 05:17:28

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 元素和属性的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

jQuery元素属性操作实例(设置、获取及删除元素属性)

本文实例讲述了jQuery元素属性操作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex
jQuery使用each遍历循环的方法

1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function (index,domEle){ index就是索引值 domEle 表示获取遍历每一个dom对象 }); 3.更适用的遍历方法 1)先获取某个集合对象 2)遍历集合对象的每一个元素 var d=$("div"); $.each(d,function (index,domEle){ d是要遍
有关jquery与DOM节点操作方法和属性记录

网上找了份jquery的操作节点方法清单.如下: 方法源包装集/字串目标包装集体特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A) A.before(B) B.insertBefore(A
详解jQuery中的元素的属性和相关操作

元素属性元素的属性中可以包含很多有用的信息,所以如何设置或得到属性中的值,就显得非常重要. jQuery 的 $.fn.attr 方法可以作为 setter 和 getter 使用,用来设置或获取属性的值.和 $.fn.css 用法类似,$.fn.attr 既可一次性接受单个属性,也可以接受多个属性(对象) : $('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'all titles are
jquery操作checked属性以及disabled属性的多种方法

下边两种写法没有任何区别只是少了些代码而已... 复制代码代码如下: <input id="cb1" type="checkbox" checked /> <input id="cb2" type="checkbox" checked="checked" /> jquery判断checked的三种方法: 复制代码代码如下: .attr('checked'): //看版本1.
JQuery节点元素属性操作方法

本文实例讲述了JQuery节点元素属性操作方法.分享给大家供大家参考.具体分析如下: 在JQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性. 获取属性和设置属性如果要获取p元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称. var $para = $("p"); //获取<p>节点 var p_txt = $para.attr("title"); //获取<p>元素节
JQuery属性操作与循环用法示例

本文实例讲述了JQuery属性操作与循环用法.分享给大家供大家参考,具体如下: 取出或者设置html内容 var $htm= $("#div").html 取出 $("#div").html("<span>文字</span>") 设置取出或者设置某个属性的值 var $src=$('#img1').prop('src') 取出 $('#img1').prop({src:'test.jpg',alt:"te
jQuery .attr()和.removeAttr()方法操作元素属性示例

今天主要和大家一起分享一下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性.大家在平时的Web页面制作中都有碰到如何动态的获取元素的属性和属性值,或者说动态的修改元素的某个(某些)属性的属性值.那么jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现: 1 .attr():jQuery中的.attr()方法让你能轻松的读取,增加或修改一个元素的属性(详情参考.attr(
jquery进行数组遍历如何跳出当前的each循环

最近在忙着进行官网改版,在做其中的一个项目时碰到了一个小问题.问题是这样的,通过 jquery 的循环方法进行数组遍历,但是当不符合条件时,怎么跳出当前循环. 我是使用 $.each() 进行数组循环遍历,但是当进入判断时,不清楚该如何跳出当前循环,于是我就用 javascript 的方法--continue 发现并不正确.API 上的说明只有跳出整个循环(如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略.) 后来上网查了下,得到了结果: return false;-
jquery根据属性和index来查找属性值并操作

<div class="zy_menu clearfix"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" re
jQuery操作属性和样式详解

• 区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id,src,alt等叫做这个元素的"属性".我们将其称为"元素属性".但是在解析成 DOM 对象时,实际浏览器最后会将标签元素解析成"DOM 对象",

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

相关推荐

随机推荐