Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 常用jquery属性--php培训九期线上班
Blogger Information
Blog 33
fans 0
comment 0
visits 19801
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
常用jquery属性--php培训九期线上班
取个名字真难
Original
616 people have browsed it
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>常用jquery属性</title>
  4.     <script src="jquery-3.4.1.min.js"></script>
  5.     <style>
  6.         .mydiv{background: lemonchiffon;}
  7.         .myclass{background: #0cbadf;}
  8.     </style>
  9. </head>
  10. <body>
  11. <div>
  12.     <h1>过滤</h1>
  13.     <p style="background:#fff1f0;">eq(index|-index)获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取</p>
  14.     <p> first()获取第一个元素</p>
  15.     <p>last()获取最后个元素</p>
  16.     <p>最后一个</p>
  17.     </div>
  18. <button onclick="myEq()">eq操作第一个p对象</button>
  19. <button onclick="myfi()">first()获取第一个元素</button>
  20. <button onclick="myla()">last()获取最后一个元素</button>
  22. <div class="mydiv1" style="display: none;">
  23.     <h1>查找</h1>
  24.     <p style="background: #fff1f0;">children([expr])取得所有的子元素</p>
  25.     <p>find(expr|obj|ele)搜索所有与指定表达式匹配的元素</p>
  26.     <p>attr设置或返回被选元素的属性值。</p>
  27.     <p>removeAttr(name)从每一个匹配的元素中删除一个属性</p>
  28.     <p class="myclass">addClass(class|fn)为每个匹配的元素添加指定的类名</p>
  29.     <p  class="p1">toggleClass(class|fn[,sw])如果存在（不存在）就删除（添加）一个类。</p>
  30.     <button onclick="mychil()">children</button>
  31.     <button onclick="myfind()">find</button>
  32.     <button onclick="myattr()">attr</button>
  33.     <button onclick="myremove()">removeAttr</button>
  34.     <button onclick="myClass()">addClass</button>
  35.     <button onclick="myreClass()">removeClass删除全部或者指定的类</button>
  36.     <button onclick="togg()">toggleClass</button>
  37. </div>
  38. <button onclick="myshow()">myshow显示隐藏的匹配元素</button>
  39. <button onclick="myhide()">myhide隐藏显示的元素</button>
  40. <button onclick="mytoggle()">mytoggle如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。</button>
  41. <div class="mydiv2">
  42.     <h1>内部插入</h1>
  43.     <p >append向每个匹配的元素内部前面追加内容。</p>
  44.     <p>appendTo把所有匹配的元素追加到另一个指定的元素元素集合中。</p>
  46. </div>
  47. <button onclick="myappend()">append</button>
  48. <button onclick="myappendto()">appendto</button>
  49. <div class="mydiv3">
  50.     <h1>外部插入</h1>
  52.     <button onclick="myafter()">after</button>
  53.     <button onclick="mybefore()">before</button>
  54.     <button onclick="myempty()">empty</button>
  55.     <button onclick="myremove()">remove</button>
  57. </div>
  58. </body>
  59. <script>
  60.     // 从DOM中删除所有匹配的元素。
  61.     //这不能删除，只能删除类
  62.     function myremove() {
  63.         $('p').remove("myclass");
  64.     }
  65.     // 删除匹配的p元素集合中所有的子节点
  66. function myempty(){
  67.     $('.mydiv3>p').empty();
  69. }
  70.     empty()
  71.     // 在每个匹配的元素之前插入内容。
  72. function mybefore() {
  73.     $('.mydiv3>h1').before("<p>用before在h1前面插入的内容</p>")
  74. }
  75.     // after在每个匹配的元素之后插入内容
  76.     function myafter() {
  77.         $('.mydiv3>h1').after("<p>用after在h1后面插入的内容</p>");
  78.     }
  80.     // 把别一个元素追加到另一个里面交删除原位置上的
  81. function myappendto() {
  82.     var p1="<p>appendTo追加的内容1从后面追加</p>";
  83.     $('.p1').appendTo('.mydiv2');
  84. }
  85.     // 向每个匹配的元素内部前面追加内容
  86.     function myappend() {
  87.         var p1=" <p>append追加的内容1从前面追加</p>"
  88.         $('.mydiv2 ').append(p1);
  89.     }
  90.     // 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
  91.     function mytoggle() {
  92.         $('.mydiv1').toggle()
  93.     }
  94.     // 隐藏显示的元素
  96.     function myhide() {
  97.         $('.mydiv1').hide(1000);
  98.     }
  100.     // 显示隐藏的匹配元素
  101.     function myshow() {
  102.         $('.mydiv1').show(1000);
  103.     }
  105.     // 如果存在（不存在）就删除（添加）一个类。
  106.     function togg() {
  107.         $('.mydiv1 p').toggleClass('mydiv')
  108.     }
  110.     // removeClass删除全部或者指定的类
  111. function myreClass() {
  112.     $('.mydiv1 p').removeClass('myclass');
  113. }
  114.     // 为每个匹配的元素添加指定的类名 只是类名
  115. function myClass() {
  116.     $('.mydiv1 p').addClass('myclass');
  117. }
  118.     // emoveAttr(name)从每一个匹配的元素中删除一个属性
  119.     function myremove() {
  120.         $('.mydiv1 p').removeAttr('class');
  121.         $('.mydiv1 p').removeAttr('style');
  122.     }
  123.     // attr设置元素的属性
  124.     function myattr() {
  125.         $('.mydiv1 p').attr({style:'background:#ccc;',class:'cilid2'});
  126.     }
  127.     // 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
  128.     function myfind() {
  129.         var fi=$('.mydiv1').find('p');
  130.         console.log(fi);
  131.     }
  132.     // children([expr])取得所有的子元素
  133. function mychil() {
  134.     var ch=$('div ').children().first();
  135.     console.log(ch);
  136. }
  137.     // 获取最后个元素
  138.     function myla() {
  139.         var la=$('p').last().text();
  140.         console.log(la);
  141.     }
  142.     // first()获取第一个元素
  143.     function myfi() {
  144.         // var fi=$('p').first().text();
  145.         var fi=$('p').first().text();
  146.         console.log(fi);
  147.     }
  148.     // 获取第N个对象，返回jQuery对象，当参数大于等于0时为正向选取
  149.     function myEq() {
  150.       var eq1=$('p').eq(2).text();
  151.         console.log(eq1);;
  153.     }
  155. </script>
  156. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：dom操作其实和数据表有点像, 也有增删改查
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post