jQuery常用方法总结

ゝ一纸荒年。 2024-03-31 16:07 141阅读 0赞

jquery常用方法总结

文章目录

  • jquery常用方法总结
    • 1、jquery 事件方法
      • （1）bind()方法
      • （2）click()方法
      • （3）dblclick() 方法
      • （4）blur()方法、focus()方法
      • （5）change()方法
      • （6）keydown()方法、keypress()方法、keyup()方法
      • （7）mousedown()方法、mouseup()方法
      • （8）mouseenter()方法、mouseleave()方法、mouseover()方法、mouseout()方法
      • （9）mousemove()方法
      • （10）hover()方法
      • （11）toggle()方法
      • （12）submit()方法
      • （12）on()方法
      • （13）one()方法
      • （14）event.preventDefault() 方法
    • 2、jquery动画效果方法
      • （1）show()方法、hide()方法
      • （2）fadeIn()方法、fadeOut()方法
      • （3）fadeTo()方法、fadeToggle() 方法
      • （4）slideUp() 方法、slideDown() 方法
      • （5）slideToggle() 方法
      • （6）animate() 方法
    • 3、HTML / CSS 方法
      • （1）addClass() 方法、removeClass()方法
      • （2）toggleClass() 方法
      • （3）attr()方法
      • （4）css()方法
      • （5）prop()方法
      • （6）html()方法
      • （7）text()方法
      • （8）val()方法
      • （9）append()方法、appendTo() 方法
      • （10）prepend() 方法、prependTo() 方法
      • （11）after() 方法、insertAfter() 方法
      • （12）before()方法、insertBefore()方法
      • （13）height()方法、width()方法
      • （14）position() 方法
      • （15）wrap() 方法
      • （16）wrapAll()方法
      • （17）wrapInner()方法

1、jquery 事件方法

（1）bind()方法

bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

语法：

  1. $(selector).bind(event,data,``function``,map)

























参数 描述
event 必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

例如;

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             p{
  8.       font-size: 28px;}
  9.         </style>
  10.         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  11.         <script type="text/javascript">
  12.             $(function(){
  14.                 $("#p1").bind("click",function(){
  16.                     $(this).text("我被单击了。");//
  17.                 });
  18.                 //绑定多个事件，多个事件处理程序都可以触发
  19.                 $("#p2").bind("click",function(){
  21.                     $(this).text("这是click事件。");//
  22.                 }).bind("mouseover",function(){
  24.                     $(this).text("这是mouseover事件。");
  25.                 }).bind("mouseout",function(){
  27.                     $(this).text("这是mouseout事件。");
  28.                 });
  29.             })
  30.         </script>
  31.     </head>
  32.     <body>
  33.         <div>
  34.             <p id="p1">这是测试段落1</p>
  35.             <p id="p2">这是测试段落2</p>
  36.         </div>
  37.     </body>
  38. </html>

（2）click()方法

当单击元素时，发生 click 事件。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

语法：

  1. $("selector").click(function)

例如：

  1. $("#p1").click(function(){
  3.     $(this).text("这是click事件。");
  4. });

（3）dblclick() 方法

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。

提示：dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素，当双击元素时，会执行两次单击事件。所以应尽量避免在同一个元素上同时使用click()方法和dblclick()方法。

例如：

  1. $("#p1").dblclick(function(){
  3.     $(this).text("这是dblclick事件。");
  4. });

（4）blur()方法、focus()方法

当元素失去焦点时发生 blur 事件。blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。

当元素获得焦点时发生 focus 事件。focus () 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。

提示：该方法常与 focus() 方法一起使用。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 $("#txt1").blur(function(){
  12.                     $("span").text("失去焦点");
  13.                 }).focus(function(){
  15.                     $("span").text("获得焦点");
  16.                 })
  17.             })
  18.         </script>
  19.     </head>
  20.     <body>
  21.         <form>
  22.             输入框一：<input type="text" id="txt1" /><span></span>
  23.         </form>
  24.     </body>
  25. </html>

（5）change()方法

当元素的值改变时发生 change 事件（仅适用于表单字段）。change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。

注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

例如：

  1. $("#txt1").change(function(){
  3.         $("span").text("内容改变");
  4. })

（6）keydown()方法、keypress()方法、keyup()方法

  1. keydown - 键被按下
  2. keypress - 完成一次按键
  3. keyup - 键被松开

当键盘键被按下时发生 keydown 事件。keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

提示：可以使用 event.which属性来返回哪个键盘键被按下。

例如：

  1. $("#txt1").keydown(function(e){
  3.                     $("span").text("按键被按下。");
  4.                     alert(e.which);
  5.                 });
  6.                 $("#txt1").keydown(function(){
  8.                     $("span").text("完成一次按键。");
  9.                 });
  10.                 $("#txt1").keydown(function(){
  12.                     $("span").text("按键被松开。");
  13.                 });

（7）mousedown()方法、mouseup()方法

当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件，或添加当发生 mousedown 事件时运行的函数。

当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。mouseup() 方法触发 mouseup 事件，或添加当发生 mouseup 事件时运行的函数。

提示：mousedown() 方法通常与mouseup()方法一起使用。

（8）mouseenter()方法、mouseleave()方法、mouseover()方法、mouseout()方法

当鼠标指针穿过（进入\离开）被选元素时，会发生 mouseenter\mouseleave 事件。mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。mouseleave() 方法触发 mouseleave 事件，或添加当发生 mouseleave 事件时运行的函数。

注意：mouseenter 事件和mouseleave 事件只有在鼠标指针进入\离开被选元素时被触发，而mouseover 事件和mouseout 事件在鼠标指针进入\离开任意子元素时也会被触发。

提示：该事件通常与 mouseleave事件一起使用。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             #div1{
  9.                 width: 400px;
  10.                 height: 400px;
  11.                 background-color: lightblue;
  12.                 position: relative;
  13.             }
  14.             #div1_1{
  16.                 width: 200px;
  17.                 height: 200px;
  18.                 background-color: lightcoral;
  19.                 position: absolute;
  20.                 top: 200px;
  21.             }
  22.         </style>
  23.         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  24.         <script type="text/javascript">
  25.             $(function(){
  27. //                $("#div1").mouseout(function(){
  29. //                    $(this).css("background-color","blue");
  30. //                }).mouseover(function(){
  32. //                    $(this).css("background-color","green");
  33. //                });
  34.                 $("#div1").mouseleave(function(){
  36.                     $(this).css("background-color","red");
  37.                 }).mouseenter(function(){
  39.                     $(this).css("background-color","grey");
  40.                 });
  41.             })
  42.         </script>
  43.     </head>
  44.     <body>
  45.         <div id="div1">
  46.             <p>这是父级div</p>
  47.             <span></span>
  48.             <div id="div1_1">
  49.                 <p>这是后代div</p>
  50.             </div>
  51.         </div>
  52.     </body>
  53. </html>

（9）mousemove()方法

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove() 方法触发 mousemove 事件，或添加当发生 mousemove 事件时运行的函数。

注意：用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

例如：

  1. $(document).mousemove(function(event){
  3.     $("span").text("鼠标坐标："+event.pageX + ", " + event.pageY);
  4. });

（10）hover()方法

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter和mouseleave事件。

注意 ：如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

例如：

  1. $("#div1").hover(function(){
  3.     $(this).css("background-color","lightgray");
  4. },function(){
  6.     $(this).css("background-color","darkcyan");
  7. });

（11）toggle()方法

toggle()方法相当于show()方法和hide()方法的结合，执行toggle()方法时，会在隐藏和显示两种状态间进行切换。

例如：

  1. $("div").click(function(){
  3.         $(this).children().toggle();
  4. })

（12）submit()方法

当提交表单时，会发生 submit 事件。该事件只适用于 元素。submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 //点击两个提交按钮都会执行相同的事件，提交表单，效果相同。
  11.                 $("#btn").click(function(){
  13.                     $(this).submit();
  14.                 });
  15.             })
  16.         </script>
  17.     </head>
  18.     <body>
  19.         <form action="https://www.baidu.com">
  20.             <input type="submit" value="sub提交"/>
  21.             <button id="btn">btn提交</button>
  22.         </form>
  23.     </body>
  24. </html>

（12）on()方法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off()方法。如需添加只运行一次的事件然后移除，请使用 one()方法。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 //添加一个事件
  11.                 $("#txt1").on("click",function(){
  13.                     $(this).css("border","2px solid blue");
  14.                 });
  15.                 //添加多个事件
  16.                 $("#txt1").on("mouseover",function(){
  18.                     $(this).css("border","3px dashed red");
  19.                 }).on("focus",function(){
  21.                     $(this).css("border","4px double pink");
  22.                 });
  23.             })
  24.         </script>
  25.     </head>
  26.     <body>
  27.         <form action="https://www.baidu.com">
  28.             输入框：<input type="text" id="txt1"/><br />
  29.             <input type="submit" value="sub提交"/>
  30.             <button id="btn">btn提交</button>
  31.         </form>
  32.     </body>
  33. </html>

（13）one()方法

one() 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每个元素只能运行一次事件处理程序函数。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 //当第一次点击段落时，字体会放大，但之后再点击效果就失效
  11.                 $("p").one("click",function(){
  13.                     $(this).animate({
  14.       fontSize:"+=10px"});
  15.                 });
  16.             })
  17.         </script>
  18.     </head>
  19.     <body>
  20.         <p>测试段落</p>
  21.     </body>
  22. </html>

（14）event.preventDefault() 方法

event.preventDefault() 方法会阻止元素发生默认的行为，例如表单提交，超链接跳转等。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 未添加event.preventDefault()方法时点击超链接和提交按钮，都会执行默认动作 -->
  9.         <a href="https://www.baidu.com">超链接</a>
  10.         <hr />
  11.         <form action="https://www.baidu.com">
  12.             <input type="submit" />
  13.         </form>
  14.     </body>
  15. </html>

添加event.preventDefault() 方法阻止默认动作：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 //再次点击超链接和提交按钮，页面不会发生跳转
  11.                 $("a,input[type=submit]").click(function(e){
  13.                     e.preventDefault();
  14.                 })
  15.             })
  16.         </script>
  17.     </head>
  18.     <body>
  19.         <a href="https://www.baidu.com">超链接</a>
  20.         <hr />
  21.         <form action="https://www.baidu.com">
  22.             <input type="submit" />
  23.         </form>
  24.     </body>
  25. </html>

2、jquery动画效果方法

（1）show()方法、hide()方法

show() 方法用于显示隐藏的被选元素。

注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             p{
  9.                 display: none;
  10.                 font-size: 25px;
  11.             }
  12.             span{
  14.                 border: 2px solid grey;
  15.                 font-size: 22px;
  16.                 padding: 4px 6px;
  17.                 cursor: pointer;
  18.             }
  19.         </style>
  20.         <script src="js/jquery-3.6.2.min.js"></script>
  21.         <script type="text/javascript">
  22.             $(function(){
  24.                 $("span").click(function(){
  26.                     $("p").show();
  27.                 })
  28.             })
  29.         </script>
  30.     </head>
  31.     <body>
  32.         <p>隐藏的段落</p>
  33.         <span>显示</span>
  34.     </body>
  35. </html>

hide() 方法隐藏被选元素，和show()方法相对应。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             p{
  9.                 display: none;
  10.                 font-size: 25px;
  11.             }
  12.             span{
  14.                 border: 2px solid grey;
  15.                 font-size: 22px;
  16.                 padding: 4px 6px;
  17.                 cursor: pointer;
  18.             }
  19.         </style>
  20.         <script src="js/jquery-3.6.2.min.js"></script>
  21.         <script type="text/javascript">
  22.             $(function(){
  24.                 $("#show").click(function(){
  26.                     $("p").show();
  27.                 });
  28.                 $("#hide").click(function(){
  30.                     $("div").hide();
  31.                 });
  32.             })
  33.         </script>
  34.     </head>
  35.     <body>
  36.         <p>隐藏的段落</p>
  37.         <div>显示的div</div>
  38.         <hr />
  39.         <span id="show">显示</span>
  40.         <span id="hide">隐藏</span>
  41.     </body>
  42. </html>

还可以控制显示和隐藏的速度，控制速度时，可以直接使用”slow”、”normal“、“fast”或毫秒数，例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             p{
  9.                 display: none;
  10.                 font-size: 25px;
  11.             }
  12.             span{
  14.                 border: 2px solid grey;
  15.                 font-size: 22px;
  16.                 padding: 4px 6px;
  17.                 cursor: pointer;
  18.             }
  19.             div{
  21.                 width: 200px;
  22.                 height: 100px;
  23.                 background-color: lightblue;
  24.                 padding: 10px 15px;
  25.             }
  26.         </style>
  27.         <script src="js/jquery-3.6.2.min.js"></script>
  28.         <script type="text/javascript">
  29.             $(function(){
  31.                 $("#show").click(function(){
  33.                     $("div").show(2000);
  34.                 });
  35.                 $("#hide").click(function(){
  37.                     $("div").hide("slow");
  38.                 });
  39.             })
  40.         </script>
  41.     </head>
  42.     <body>
  43.         <p>隐藏的段落</p>
  44.         <div>显示的div</div>
  45.         <hr />
  46.         <span id="show">显示</span>
  47.         <span id="hide">隐藏</span>
  48.     </body>
  49. </html>

（2）fadeIn()方法、fadeOut()方法

fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）。

fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。

同样，这两个方法也可以控制动画速度，与show()和hide()同理。

例如：

  1. $("#show").click(function(){
  3.         $("div").fadeIn(2000);
  4. });
  5. $("#hide").click(function(){
  7.         $("div").fadeOut("normal");
  8. });

（3）fadeTo()方法、fadeToggle() 方法

fadeTo() 方法逐渐改变被选元素的不透明度为指定的值（褪色效果）。

例如：

  1. $("#fade").click(function(){
  3.     //逐渐将透明度降低到0.5，但不会完全隐藏
  4.     $("div").fadeTo(1500,0.5);
  5. });

fadeToggle() 方法在 fadeIn() 和 fadeOut()方法之间切换。

如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

例如：

  1. $("#toggle").click(function(){
  3.         $("div").fadeToggle(2000);
  4. })

（4）slideUp() 方法、slideDown() 方法

slideUp() 方法以滑动(改变高度)方式隐藏被选元素。

slideDown() 方法以滑动(改变高度)方式显示被选元素。

例如：

  1. $("#show").click(function(){
  3.                     $("div").slideDown(2000);
  4.                 });
  5.                 $("#hide").click(function(){
  7.                     $("div").slideUp("normal");
  8.                 });

（5）slideToggle() 方法

slideToggle() 方法在被选元素上进行 slideUp()和 slideDown()之间的切换。

该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果。

例如：

  1. $("#toggle").click(function(){
  3.                     $("div").slideToggle(2000);
  4.                 });

（6）animate() 方法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。

提示：使用 “+=” 或 “-=” 来创建相对动画。

语法：(selector).animate({styles},speed,easing,callback)

styles为规定产生动画效果的一个或多个 CSS 属性/值。

注意： 当与 animate() 方法一起使用时，styles的属性名称必须是驼峰写法，比如： 必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。

可以应用动画的css属性：

backgroundPositionX、backgroundPositionY、borderWidth、borderBottomWidth、borderLeftWidth、borderRightWidth、borderTopWidth、borderSpacing、margin、padding、height、width、fontSize、bottom、left、right、top、letterSpacing、lineHeight、textIndent等，color属性不能使用。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             div{
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 background-color: lightblue;
  12.                 position: relative;
  13.             }
  14.         </style>
  15.         <script src="js/jquery-3.6.2.min.js"></script>
  16.         <script type="text/javascript">
  17.             $(function(){
  19.                 $("div").click(function(){
  21.                     $(this).animate({
  22.       "left":"+=100","top":"+=100","height":"+=100","width":"+=100"},2000);
  23.                 })
  24.             })
  25.         </script>
  26.     </head>
  27.     <body bgcolor="lavender">
  28.         <div></div>
  29.     </body>
  30. </html>

3、HTML / CSS 方法

（1）addClass() 方法、removeClass()方法

addClass() 方法向被选元素添加一个或多个类名。该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .div1{
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 background-color: lightblue;
  12.             }
  13.             .new{
  15.                 border: 4px dashed orange;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body bgcolor="lavender">
  20.         <div class="div1">
  21.             <input type="button" id="btn1" value="添加"/>
  22.             <input type="button" id="btn2" value="移除"/>
  23.         </div>
  24.     </body>
  25. </html>

以上代码中，new这个类并未使用到，使用如下代码将其添加到div的class属性中：

  1. $(function(){
  3.                 $("#btn1").click(function(){
  5.                     $("div").addClass("new");
  6.                 });
  7.             })

当点击添加按钮时会将new这个类的样式添加到div中。

同时，如果要移除某个类的样式时，可以使用removeClass()方法。

例如：

  1. $("#btn2").click(function(){
  3.                     $("div").removeClass("new");
  4.                 });

注意：当removeClass()方法没有参数时，表示移除元素的所有类。

（2）toggleClass() 方法

toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .div1{
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 background-color: lightblue;
  12.             }
  13.             .new{
  15.                 border: 4px dashed orange;
  16.             }
  17.         </style>
  18.         <script src="js/jquery-3.6.2.min.js"></script>
  19.         <script type="text/javascript">
  20.             $(function(){
  22.                 $("#btn1").click(function(){
  24.                     $("div").addClass("new");
  25.                 });
  26.                 $("#btn2").click(function(){
  28.                     $("div").removeClass("new");
  29.                 });
  30.                 $("#btn3").click(function(){
  32.                     $("div").toggleClass("new");
  33.                 });
  34.             })
  35.         </script>
  36.     </head>
  37.     <body bgcolor="lavender">
  38.         <div class="div1">
  39.             <input type="button" id="btn1" value="添加"/>
  40.             <input type="button" id="btn2" value="移除"/>
  41.             <input type="button" id="btn3" value="切换"/>
  42.         </div>
  43.     </body>
  44. </html>

（3）attr()方法

attr() 方法用于设置或返回被选元素的属性和值。

当该方法用于返回属性值，则返回第一个匹配元素的值。当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .div1{
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 background-color: lightblue;
  12.             }
  13.             .add1{
  15.                 border: 2px solid red;
  16.             }
  17.             .add2{
  19.                 border: 5px dotted green;
  20.             }
  21.             #top{
  23.                 background-color: lightcoral;
  24.             }
  25.         </style>
  26.         <script src="js/jquery-3.6.2.min.js"></script>
  27.         <script type="text/javascript">
  28.             $(function(){
  31.                 $("#btn1").click(function(){
  33.                     //设置一个属性的值
  34.                     //div原本的class属性的值为div1，设置后更改为add1，原本div1类的样式将被移除，不会同时存在
  35.                     $("div").attr("class","add1");
  36.                     //设置多个属性的值时，使用键值对的写法
  37.                     $("div").attr({
  38.       "id":"top","class":"add2"})
  39.                 });
  40.                 //获取属性的值
  41.                 $("#btn2").click(function(){
  43.                     alert($("div").attr("class"));
  44.                 });
  45.             })
  46.         </script>
  47.     </head>
  48.     <body bgcolor="lavender">
  49.         <div class="div1" title="测试">
  50.             <input type="button" id="btn1" value="设置属性"/>
  51.             <input type="button" id="btn2" value="获取属性"/>
  52.         </div>
  53.     </body>
  54. </html>

（4）css()方法

css() 方法为被选元素设置或返回一个或多个样式属性。

当用于返回属性：该方法返回第一个匹配元素的指定 CSS 属性值。然而，简写的 CSS 属性（比如 “background” 和 “border”）不被完全支持，且当用于返回属性值时，在不同的浏览器中有不同的结果。

当用于设置属性：该方法为所有匹配元素设置指定 CSS 属性。

例如:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .div1{
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 background-color: lightblue;
  12.             }
  13.         </style>
  14.         <script src="js/jquery-3.6.2.min.js"></script>
  15.         <script type="text/javascript">
  16.             $(function(){
  18.                 $("#btn1").click(function(){
  20.                     //设置一个样式
  21.                     $("div").css("background-color","hotpink");
  22.                     //同时设置多个样式
  23.                     $("div").css({
  24.       "width":"250px","border":"1px solid blue"});
  25.                 });
  26.                 //获取属性的值
  27.                 $("#btn2").click(function(){
  29.                     console.log($("div").css("background-color"));
  30.                 });
  31.             })
  32.         </script>
  33.     </head>
  34.     <body bgcolor="lavender">
  35.         <div class="div1">
  36.             <input type="button" id="btn1" value="设置属性"/>
  37.             <input type="button" id="btn2" value="获取属性"/>
  38.         </div>
  39.     </body>
  40. </html>

（5）prop()方法

prop() 方法用于设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

提示：如需检索 HTML 属性，请使用attr()方法代替。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .div1{
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 background-color: lightblue;
  12.             }
  13.             #main{
  15.                 border: 2px solid red;
  16.             }
  17.             .add{
  19.                 width: 300px;
  20.                 height: 300px;
  21.             }
  22.         </style>
  23.         <script src="js/jquery-3.6.2.min.js"></script>
  24.         <script type="text/javascript">
  25.             $(function(){
  27.                 $("#btn1").click(function(){
  29.                     //设置一个样式
  30.                     $("div").prop("id","main");
  31.                     //同时设置多个样式
  32.                     $("div").prop({
  33.       "class":"add","align":"center"});
  34.                 });
  35.                 //获取属性的值
  36.                 $("#btn2").click(function(){
  38.                     console.log($("div").prop("class"));
  39.                 });
  40.             })
  41.         </script>
  42.     </head>
  43.     <body bgcolor="lavender">
  44.         <div class="div1">
  45.             <input type="button" id="btn1" value="设置属性"/>
  46.             <input type="button" id="btn2" value="获取属性"/>
  47.         </div>
  48.     </body>
  49. </html>

（6）html()方法

html() 方法用于设置或返回被选元素的内容（和js中dom对象的innerHTML属性同理）。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 var div_html = $("div").html();
  11.                 console.log(div_html);
  12.             })
  13.         </script>
  14.     </head>
  15.     <body bgcolor="lavender">
  16.         <div>
  17.             <h1>这是标题</h1>
  18.             <p>这是段落</p>
  19.             这是普通文本
  20.         </div>
  21.     </body>
  22. </html>

结果如下：
在这里插入图片描述

（7）text()方法

text() 方法用于设置或返回被选元素的文本内容（和js中dom对象的innerText属性同理）。

当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。

当该方法用于设置内容时，则重写所有匹配元素的内容。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 var div_html = $("div").html();
  11.                 var div_text = $("div").text();
  12.                 console.log(div_html);
  13.                 console.log(div_text);
  14.             })
  15.         </script>
  16.     </head>
  17.     <body bgcolor="lavender">
  18.         <div>
  19.             <h1>这是标题</h1>
  20.             <p>这是段落</p>
  21.             这是普通文本
  22.         </div>
  23.     </body>
  24. </html>

结果如下：
在这里插入图片描述

（8）val()方法

val() 方法用于返回或设置被选元素的 value 属性。

当用于返回值时：该方法返回第一个匹配元素的 value 属性的值。

当用于设置值时：该方法设置所有匹配元素的 value 属性的值。

注意：val() 方法通常与 HTML 表单元素一起使用。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 var div_html = $("div").html();
  11.                 var div_text = $("div").text();
  12.                 var input_value = $("input[type=text]").val();
  13.                 console.log(div_html);
  14.                 console.log(div_text);
  15.                 console.log(input_value);
  16.             })
  17.         </script>
  18.     </head>
  19.     <body bgcolor="lavender">
  20.         <div>
  21.             <h1>这是标题</h1>
  22.             <p>这是段落</p>
  23.             这是普通文本
  24.             <input type="text" value="输入框"/>
  25.         </div>
  26.     </body>
  27. </html>

结果如下：
在这里插入图片描述

（9）append()方法、appendTo() 方法

append() 方法用于在被选元素的结尾插入指定内容。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 $("div").append("<b>使用append插入的内容</b>");
  11.             })
  12.         </script>
  13.     </head>
  14.     <body bgcolor="lavender">
  15.         <div>
  16.             <span>开头</span>
  17.             <span>结尾</span>
  18.         </div>
  19.     </body>
  20. </html>

appendTo() 方法在被选元素的结尾插入 HTML 元素。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 $("div").append("<b>使用append插入的内容</b>");
  11.                 $("<i>这是appendTo插入的内容</i>").appendTo("div");
  12.             })
  13.         </script>
  14.     </head>
  15.     <body bgcolor="lavender">
  16.         <div>
  17.             <span>开头</span>
  18.             <span>结尾</span>
  19.         </div>
  20.     </body>
  21. </html>

区别：append()方法插入的内容可以为普通文本，也可以为html标签，而appendTo()方法插入的内容必须包含html标签。之后三对方法也是同理。

（10）prepend() 方法、prependTo() 方法

prepend() 方法用于在被选元素的开头插入指定内容。

prependTo() 方法用于在被选元素的开头插入 HTML 元素。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 $("div").prepend("<b>这是prepend插入的内容</b>");
  11.                 $("<i>这是prependTo插入的内容</i>").prependTo("div");
  12.             })
  13.         </script>
  14.     </head>
  15.     <body bgcolor="lavender">
  16.         <div>
  17.             <span>开头</span>
  18.             <span>结尾</span>
  19.         </div>
  20.     </body>
  21. </html>

（11）after() 方法、insertAfter() 方法

after() 方法用于在被选元素后插入指定的内容。

insertAfter() 方法在被选元素后插入 HTML 元素。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 $("div").after("<b>这是after插入的内容</b>");
  11.                 $("<i>这是insetAfter插入的内容</i>").insertAfter("div");
  12.             })
  13.         </script>
  14.     </head>
  15.     <body bgcolor="lavender">
  16.         <div>
  17.             <span>开头</span>
  18.             <span>结尾</span>
  19.         </div>
  20.     </body>
  21. </html>

（12）before()方法、insertBefore()方法

before() 方法用于在被选元素之前插入指定的内容。

insertBefore() 方法用于在被选元素前插入 HTML 元素。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/jquery-3.6.2.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(function(){
  10.                 $("div").before("<b>这是before插入的内容</b>");
  11.                 $("<i>这是insertBefore插入的内容</i>").insertBefore("div");
  12.             })
  13.         </script>
  14.     </head>
  15.     <body bgcolor="lavender">
  16.         <div>
  17.             <span>开头</span>
  18.             <span>结尾</span>
  19.         </div>
  20.     </body>
  21. </html>

区别：append()方法插入的内容的位置为被选元素的内部，而after()方法插入的内容的位置为被选元素的外部。其余两个方法同理。

（13）height()方法、width()方法

height() 方法用于设置或返回被选元素的高度，width() 方法用于设置或返回被选元素的宽度。

当该方法用于返回高度时， 则返回第一个匹配元素的高度。当该方法用于设置高度时，则设置所有匹配元素的高度。

该方法返回的高度不包含 padding、border 或 margin的值。width()方法同理。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             div{
  9.                 margin: 10px;
  10.                 padding: 8px;
  11.                 border: 5px solid orange;
  12.                 height: 200px;
  13.                 width: 300px;
  14.             }
  15.         </style>
  16.         <script src="js/jquery-3.6.2.min.js"></script>
  17.         <script type="text/javascript">
  18.             $(function(){
  20.                 console.log($("div").height());
  21.                 console.log($("div").width());
  22.             })
  23.         </script>
  24.     </head>
  25.     <body bgcolor="lavender">
  26.         <div></div>
  27.     </body>
  28. </html>

输出结果：
在这里插入图片描述

（14）position() 方法

position() 方法返回第一个匹配元素的位置（相对于它的父元素）。

该方法返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  9.                 margin: 0px;
  10.                 padding: 0px;
  11.             }
  12.             p{
  14.                 position: absolute;
  15.                 top: 100px;
  16.                 left: 150px;
  17.             }
  18.         </style>
  19.         <script src="js/jquery-3.6.2.min.js"></script>
  20.         <script type="text/javascript">
  21.             $(function(){
  23.                 var pos = $("p").position();
  24.                 //输出结果为150 100
  25.                 console.log(pos.left+" "+pos.top);
  26.             })
  27.         </script>
  28.     </head>
  29.     <body bgcolor="lavender">
  30.         <div>
  31.             <p>段落</p>
  32.         </div>
  33.     </body>
  34. </html>

（15）wrap() 方法

wrap() 方法使用指定的 HTML 元素来包裹每个被选元素。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  9.                 margin: 0px;
  10.                 padding: 0px;
  11.             }
  12.             p{
  14.                 border: 5px solid lightblue;
  15.                 margin: 50px;
  16.                 width: 200px;
  17.                 height: 150px;
  18.             }
  19.         </style>
  20.         <script src="js/jquery-3.6.2.min.js"></script>
  21.         <script type="text/javascript">
  22.             $(function(){
  24.                 $("span").wrap("<p></p>");
  25.             })
  26.         </script>
  27.     </head>
  28.     <body bgcolor="lavender">
  29.         <span>文本1</span>
  30.         <span>文本2</span>
  31.         <span>文本3</span>
  32.     </body>
  33. </html>

结果如下：
在这里插入图片描述

（16）wrapAll()方法

wrapAll() 方法使用指定的 HTML 元素来包裹所有被选元素。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  9.                 margin: 0px;
  10.                 padding: 0px;
  11.             }
  12.             p{
  14.                 border: 5px solid lightblue;
  15.                 margin: 50px;
  16.                 width: 200px;
  17.                 height: 150px;
  18.             }
  19.         </style>
  20.         <script src="js/jquery-3.6.2.min.js"></script>
  21.         <script type="text/javascript">
  22.             $(function(){
  24.                 $("span").wrapAll("<p></p>");
  25.             })
  26.         </script>
  27.     </head>
  28.     <body bgcolor="lavender">
  29.         <span>文本1</span>
  30.         <span>文本2</span>
  31.         <span>文本3</span>
  32.     </body>
  33. </html>

结果为：
在这里插入图片描述

（17）wrapInner()方法

wrapInner() 方法使用指定的 HTML 元素来包裹每个被选元素中的所有内容（innerHTML）。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  9.                 margin: 0px;
  10.                 padding: 0px;
  11.             }
  12.             p{
  14.                 border: 5px solid lightblue;
  15.                 margin: 50px;
  16.                 width: 200px;
  17.                 height: 150px;
  18.             }
  19.             span{
  21.                 border: 4px dashed lightcoral;
  22.             }
  23.         </style>
  24.         <script src="js/jquery-3.6.2.min.js"></script>
  25.         <script type="text/javascript">
  26.             $(function(){
  28.                 $("p").wrapInner("<span></span>");
  29.             })
  30.         </script>
  31.     </head>
  32.     <body bgcolor="lavender">
  33.         <p>文本1</p>
  34.         <p>文本2</p>
  35.         <p>文本3</p>
  36.     </body>
  37. </html>

运行结果：
在这里插入图片描述

三个方法的使用区别：wrap()方法为将每一个被选元素都使用指定的标签进行包裹；warpAll()方法是将所有被选元素用一个指定的标签进行包裹；wrapInner()方法是将指定元素内部的所有html内容用指定的标签进行包裹。

发表评论

表情：
评论列表 （有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读