简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 12月23日_ Jquery文档处理、筛选和一些其他的方法 - 九期线上班
Blogger Information
Blog 34
fans 0
comment 0
visits 21634
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
12月23日_ Jquery文档处理、筛选和一些其他的方法 - 九期线上班
只猫
Original
582 people have browsed it

Jquery文档处理

在内部添加 append(常用) appendTo prepend prependTo
在外部插入 after before insertAfter insertBefore
删除元素结点 empty(常用) remove
复制 clone(一般不用)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Jquery文档处理</title>
  6.     <script src="jquery.js"></script>
  7.     <style>
  8.     .my{
  9.         margin-bottom: 20px;
  10.     }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="mydiv">
  15.         <label for="myinput">input:</label>
  16.         <input id="myinput" type="text"></input>
  17.     </div>
  19.     <div class="my" flag="mydiv"><span>城市：</span></div>
  22.     <button onclick="appends()">append</button>
  23.     <button onclick="appends_html()">append-html</button>
  24.     <button onclick="appends_html2()">append-html2</button>
  25.     <br>
  26.     <button onclick="prepend()">prepend</button>
  27.     <button onclick="appendTo()">appendTo</button>
  28.     <button onclick="prependTo()">prependTo</button>
  30.     <button onclick="after()">after</button>
  31.     <button onclick="before()">before</button>
  32.     <br>
  33.     <button onclick="empty()">empty</button>
  34.     <button onclick="remove()">remove</button>
  36.     <button onclick="removeit(this)">移除</button>
  37.     <script>
  38.         //append() 内部 向后追加
  39.         function appends() {
  40.             //向div里面从后面追加
  41.             $('div[flag="mydiv"]').append('郑州');
  42.         }
  44.         function appends_html()
  45.         {
  46.             //字符串html
  47.             var html = '<select><option value="zz">郑州</option><option value="ly">洛阳</option>';
  48.             //添加字符串和添加一段html文档的都是一样的用法
  49.             $('div[flag="mydiv"]').append(html);
  50.         }
  51.         function appends_html2()
  52.         {
  53.             //使用html()获取mydiv中的html
  54.             var myinput = $('#mydiv').html();
  55.             //追加
  56.             $('div[flag="mydiv"]').append(myinput);
  57.         }
  59.         //prepend() 元素内 向前追加
  60.         function prepend() {
  61.             //向div里面从前面追加
  62.             $('div[flag="mydiv"]').prepend('郑州');
  63.         }
  65.         //appendTo() 相当于取走 放置 
  66.         function appendTo() {
  67.             //插入的内容在函数前，容器在后
  68.             $('.my>span').appendTo($('#mydiv'));
  69.         }
  70.         //prependTo() 在内部向前添加 
  71.         function prependTo() {
  72.             //插入的内容在函数前，容器在后
  73.             $('div[flag="mydiv"]').prependTo($('#mydiv'));
  74.         }
  76.         //在元素外部插入 兄弟结点
  77.         //before after
  78.         function after(){
  79.             //字符串html
  80.             var html = '<select><option value="zz">郑州</option><option value="ly">洛阳</option>';
  81.             //添加字符串和添加一段html文档的都是一样的用法
  82.             $('div[flag="mydiv"]').after(html);
  83.         }
  84.         function before(){
  85.             //字符串html
  86.             var html = '<select><option value="zz">郑州</option><option value="ly">洛阳</option>';
  87.             //添加字符串和添加一段html文档的都是一样的用法
  88.             $('div[flag="mydiv"]').before(html);
  89.         }
  91.         //empty remove 移除结点
  92.         function empty(){
  93.             //清空内部结点
  94.             $('#mydiv').empty();
  95.         }
  96.         function remove(){
  97.             //直接移除选中节点
  98.             $('#mydiv').remove();
  99.         }
  101.         //使用this关键字
  102.         function removeit(obj){
  103.             console.log(obj);
  104.             $(obj).remove();
  105.         }
  106.     </script>
  107. </body>
  108. </html>

筛选器 过滤 、添加移除属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery筛选</title>
  6.     <script src="jquery.js"></script>
  7.     <style>
  8.     .active{color: #fff;background-color: red;}
  9.     .hides{display: none;}
  10.     </style>
  11. </head>
  12. <body>
  13.     <div>
  14.         <button id="b1">btn1</button>
  15.         <button id="b2">btn2</button>
  16.         <button id="b3">btn3</button>
  17.     </div>
  19.     <button attr="remove" onclick="remove1()">remove1</button>
  20.     <button attr="remove" onclick="remove2()">remove2</button>
  21.     <button attr="remove" onclick="remove3()">remove3</button>
  23.     <div id="pro" style="background: #f1f1f1; height: 300px;">
  24.     <a href="javascript:;" onclick="province(this);hasClass(this)" code="jiangsu">江苏</a>
  25.     <a href="javascript:;" class="active" onclick="province(this);hasClass(this)" code="henan">河南</a>
  26.     <a href="javascript:;" onclick="province(this);hasClass(this)" code="zhejiang">浙江</a>
  27.     <a href="javascript:;" onclick="province(this);hasClass(this)" code="shanxi">陕西</a>
  28.     </div>
  30.     <div id="menu">
  31.         <label onclick="toggleClass(this)">菜单</label>
  32.         <div class="hides">
  33.             <p>每日头条</p>
  34.             <p>每日头条</p>
  35.             <p>每日头条</p>
  36.         </div>
  37.         <p>每日视频</p>
  38.         <p>每日视频</p>
  39.     </div>
  40.     <button onclick="children_()">children</button>
  41.     <script type="text/javascript">
  42.     //jquery筛选器
  43.     //过滤 eq()、first()、last() hasClass()
  44.     function remove1(){
  45.         $('div button').first().remove();
  46.     }
  47.     function remove2(){
  48.         $('div button').eq(1).remove();
  49.     }
  50.     function remove3(){
  51.         $('div button').last().remove();
  52.     }
  53.     //hasClass()
  54.     function hasClass(obj){
  55.         var flag = $(obj).hasClass('active');
  56.         console.log(flag);
  57.     }
  58.     //查找 children() 获取直接子元素
  59.     function children_(){
  60.         $('#menu').children('p').css('color','red');
  61.     }
  62.     //addClass添加class属性
  63.     //removeClass移除class属性
  64.     function province(obj){
  65.         //每次点击先清空
  66.         $('#pro a').removeClass('active');
  67.         //点击添加active属性
  68.         $(obj).addClass('active');
  69.         //通过php $_GET[]拿到值
  70.         //window.location.href="?province="+$(obj).attr('code');
  71.     }
  73.     //toggleClass 添加或者删除一个样式类 如果存在就删除 不存在就添加
  74.     function toggleClass(obj){
  75.         $('label + div').toggleClass('hides');
  77.     }
  79.     function myshow(obj){
  80.         //绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。 
  81.         //在jQuery1.9被移除 jQuery animation 也有一个名为.toggle()方法
  82.         $('label + div').toggle();
  83.         //添加style属性
  84.         $('.hides').attr('style','display:block');
  85.         //添加css
  86.         $('.hides').css('display','block');
  87.         //show()
  88.         $('.hides').show(300);
  89.     }
  90.     </script>
  91. </body>
  92. </html>

案例：

省市联动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>省市</title>
  6.     <script src="jquery.js"></script>
  7. </head>
  8. <body>
  9.     <div>
  10.     <label for="province">籍贯：</label>
  11.         <select name="province" id="province" onchange="chk_province()">
  12.             <option value="">请选择</option>
  13.             <option value="hn">河南</option>
  14.             <option value="sd">山东</option>
  15.             <option value="hb">湖北</option>
  16.             <option value="zj">浙江</option>
  17.             <option value="">...</option>
  18.         </select>
  20.         <label for="city">城市：</label>
  21.         <select name="city" id="city">
  22.         <option value="">请选择</option>
  23.         </select>
  24.     </div>
  26.     <script type="text/javascript">
  27.     //模拟数据
  28.     function getcities(province){
  29.         var cities = [];
  30.         if(province==''){
  31.             return cities;
  32.         }
  33.         if(province=='hn'){
  34.             cities = [{val:'zz',txt:'郑州'},{val:'ly',txt:'洛阳'},{val:'kf',txt:'开封'}];
  35.         }
  36.         if(province=='zj'){
  37.             cities = [{val:'hz',txt:'杭州'},{val:'jh',txt:'金华'},{val:'wz',txt:'温州'}];
  38.         }
  39.         return cities;
  40.     }
  42.         function chk_province(){
  43.             var province = $('select[name="province"]').val();
  44.             var cities = getcities(province);
  45.             var html = '';
  46.             //循环拿到数组的值
  47.             for(var i=0;i<cities.length;i++){
  48.                 //添加到html
  49.                 html += ('<option value="'+cities[i].val+'">'+cities[i].txt+'</option>');
  50.                 console.log(cities[i]);
  51.             }
  52.             console.log(cities);
  53.             console.log(html);
  55.             //$('select[name="city"]').html(html);
  56.             $('select[name="city"]').empty().append(html);
  57.         }
  58.     </script>
  59. </body>
  60. </html>

标签页

  1. <?php
  2. if(isset($_GET['aaa'])){
  3.     $shengfen = $_GET['aaa'];
  4. }else{
  5.     $shengfen = '';
  6. }
  7. ?>
  8. <!DOCTYPE html>
  9. <html lang="en">
  10. <head>
  11.     <meta charset="UTF-8">
  12.     <title>demo</title>
  13.     <script src="jquery.js"></script>
  14.     <style>
  15.     .active{color: #fff;background-color: red;}
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="pro" style="background: #f1f1f1; height: 300px;">
  20.     <a href="javascript:;" <?php echo $shengfen=='jiangsu'?'class="active"':''?>onclick="province(this)" code="jiangsu">江苏</a>
  21.     <a href="javascript:;"  <?php echo $shengfen=='henan'?'class="active"':''?>onclick="province(this)" code="henan">河南</a>
  22.     <a href="javascript:;"  <?php echo $shengfen=='zhejiang'?'class="active"':''?>onclick="province(this)" code="zhejiang">浙江</a>
  23.     <a href="javascript:;"  <?php echo $shengfen=='shanxi'?'class="active"':''?>onclick="province(this)" code="shanxi">陕西</a>
  24.     </div>
  26.     <script type="text/javascript">
  27.     function province(obj){
  28.         //每次点击先清空
  29.         $('#pro a').removeClass('active');
  30.         //点击添加active属性
  31.         $(obj).addClass('active');
  32.         //通过php $_GET[]拿到值
  33.         window.location.href="?aaa="+$(obj).attr('code');
  34.     }
  35.     </script>
  36. </body>
  37. </html>

总结：jquery课程的第三天，讲到了很多jq类库的方法，都很灵活，通过练习逐渐上手。案例很适合练手，自己写还是有点难以写出来。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：jquery很好玩, 对不对?
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！