search

博客列表 >12月23日_ Jquery文档处理、筛选和一些其他的方法 - 九期线上班

12月23日_ Jquery文档处理、筛选和一些其他的方法 - 九期线上班

只猫
只猫原创
2019年12月29日 16:20:02595浏览

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类库的方法，都很灵活，通过练习逐渐上手。案例很适合练手，自己写还是有点难以写出来。

上一条：Flex布局实现PHP中文网移动端-20191227作业下一条：Flex项目的6大属性与公共组件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多