zoukankan      html  css  js  c++  java
  • JQuery

    JQuery

     JQuery
    转换
      JQuery对象 --> DOM对象: JQuery Object[0]的第0个索引
      DOM对象 --> JQuery对象: $(DOM对象)

    选择器
      id:
        $('#id_name')
      class:
        $(".class")
      tag:
        $('tag_name')
      组合:
        tag_name .class_name #id_name
      层级:
        $('#i10 a')
        $('#i10>a')
      基本:
        :first #第一个
        :last #最后一个
        :eq(index) #按索引第index
        $('[attr_name]' #具有attr_name的所有标签
        $('[attr_name="value"]' #具有attr_name且值为value的所有标签
        $("input[type='text']")
        $(':text') #值是tet的input

      example:
        - 选择权
        -
          $('property_name').prop('checked'); //设置值
          $('property_name').prop('checked', true); //获取值
        - JQuery内置循环方法
          $('#tb:checkbox').each(function(k){
          this //this,DOM当前循环元素
          })

    筛选器:
      JQ uery支持链式编程
      $(this).next() //当前标签的下一个标签
      $(this).nextAll() //当前标签往下所有标签
      $(this).nextUntil('#i1') //当前标签往下开始直到i1的所有标签
      $(this).prev() //当前标签的上一个标签
      $(this).prevAll() //当前标签往上所有标签
      $(this).prevUntil('#i1')() //当前标签往上开始直到i1的所有标签
      $(this).parent() //当前标签的父标签
      $(this).parents() //当前标签的父标签和家族关系
      $(this).parentsUntil('#i1') //当前标签的父标签和家族关系直到i1的所有标签
      $(this).children() //当前标签的子标签
      $(this).siblings() //当前标签的兄弟标签

      $(this).find('#id') //当前标签下查找标签
      $(this).find('input[type="text"], input[type="password"]'

    文本操作
      $(this).text() //获取当前标签的文本内容,不解析html
      $(this).text("<a>111</a>") //设置当前标签的文本内容

      $(this).html() //获取当前标签的文本内容,解析html
      $(this).html("<a>111</a>") //设置当前标签的解析html内容

      $(this).val() //获取当前标签的value
      $(this).val(..) //设置当前标签的value

    样式操作
      $(this).addClass(xx) //增加样式
      $(this).removeClass(xx) //删除样式
      $(this).togoleClass(xx) //有就删除没有就增加
      $(this).css('color', 'red')

    属性操作:
    //专门用于做自定义属性
      $(this).attr('name') //获取属性
      $(this).attr('name', 'value') //设置属性
      $(this).removeAttr('name') //删除属性
    //专门用于checkbox,radio
      $(this).prop('name') //获取属性
      $(this).prop('name', 'value') //设置属性
      $(this).removeProp('name') //删除属性

    内容操作:
      $(this).append() //在父级最后追加一个子元素
      $(this).prepend() //在父级最前面追加一个子元素
      $(this).before() //在当前元素之前追加(是同级关系)
      $(this).after() //在当前元素之后追加(是同级关系)
      $(this).remove() //
      $(this).clear() //
      $(this).clone() //

    位置和尺寸:
      $(window).scrollTop() //获取
      $(window).scrollTop(0) //设置
      $(window).scrollLeft() //获取
      $(window).scrollLeft(0) //设置

      $('#id').offset() //指定标签在html文档中的坐标
        offset().top
        offset().left

      $('#id').position() //指定标签在他父标签中的坐标
      $('#id').height() //获取标签高度
      $('#id').innerHeight() //边框+纯高度
      $('#id').outerHeight()
      $('#id').outerHeight(true)
      $('#id').

    事件:
      $('#id').click()
      $('#id').bind('click', function(){})
      $('#id').unbind('click', function(){})
      $('#id').delegate('a', 'click', function(){}) #给id是id的标签下的a的标签绑定事件function,委托的形式
      $('#id').undelegate('a', 'click', function(){})
      $('#id').on('click', function(){})
      $('#id').off('click', function(){})
    阻止事件:
      $('#i1').click(function(){
      alert(456);
      return false;
      })

    当页面框架加载完毕自动执行
      $(function(){})

    扩展

    //给JQuery增加扩展方法
      $.ajax()
      $.extend({
      'hnm': function(){
      return '666';
      }
      })
      $.fn.extend()

    实例:

    多选/复选

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="JQuery-1.12.4.js"></script>
    </head>
    <body>
        <input type="button" value="all" onclick="chooseAll()">
        <input type="button" value="noAll" onclick="chooseNo()">
        <input type="button" value="reverseAll" onclick="reverseAll()">
    
        <table border="1">
            <thead>
                <tr>
                    <th>checked</th>
                    <th>ip</th>
                    <th>port</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"> </td>
                    <td>2.2.2.2</td>
                    <td>32</td>
                </tr>
                <tr>
                    <td><input type="checkbox"> </td>
                    <td>2.3.3.3</td>
                    <td>33</td>
                </tr>
                <tr>
                    <td><input type="checkbox"> </td>
                    <td>2.4.4.4</td>
                    <td>34</td>
                </tr>
            </tbody>
        </table>
    
    </body>
    </html>
    
    <script>
        function chooseAll(){
            $(':checkbox').prop('checked', true);
        }
    
        function chooseNo(){
            $(':checkbox').prop('checked', false);
        }
    
        function reverseAll(){
            $(':checkbox').each(function(k){
                //this:当前循环的每一个元素
                //k key-index,
                console.log(k, this)
                if(this.checked){
                    this.checked = false
                }
                else{
                    this.checked = true
                }
            })
        }
    </script>

    TAB菜单 :

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="JQuery-1.12.4.js"></script>
        <style>
            .header{
                background-color: black;
                color:white;
            }
            .content{
                min-height: 50px;
                border: 1px;
            }
            .hide{
                display: none;
            }
            .diss{
                 500px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div style="height: 400px;  200px">
            <div class="item">
                <div class="header">header1</div>
                <div class="content hide">content1</div>
            </div>
            <div class="item">
                <div class="header">header2</div>
                <div class="content hide">content2</div>
            </div>
            <div class="item">
                <div class="header">header3</div>
                <div class="content hide">content3</div>
            </div>
            <div class="item">
                <div class="header">header4</div>
                <div class="content hide">content4</div>
            </div>
        </div>
    </body>
    </html>
    
    <script>
        $('.header').click(function(){
            console.log($('this').text())
            $('.content').addClass('hide')
            $(this).next().removeClass('hide')
        })
    </script>

     模态登录框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="JQuery-1.12.4.js"></script>
        <style>
            .hide {
                display:none;
            }
            .modal {
                position:fixed;
                top:50%;
                left:50%;
                500px;
                height: 400px;
                margin-left: -250px;
                margin-top: -200px;
                background-color: gray;
                z-index: 10;
            }
            .shadow {
                position: fixed;
                top:0;
                bottom: 0;
                left: 0;
                right:0;
                opacity: 0.8;
                z-index: 5;
                background-color: blue;
                opacity: 0.5;
            }
            .content {
                200px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <a>aaaaaa</a>
        </div>
        <div class="modal hide">
            <div>
                <input type="text">
                <input type="text">
                <input type="submit">
            </div>
        </div>
        <div class="shadow hide">
    
        </div>
    </body>
    </html>
    
    <script>
        $('.content').click(function(){ 
            $('.shadow').removeClass('hide');
            $('.modal').removeClass('hide');
        })
    </script>

    点赞

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="JQuery-1.12.4.js"></script>
        <style>
            .content {
                padding: 50px;
                background-color: burlywood;
                500px;
                left:0;
                height:100px;
                position: relative;
                border: 2px;
            }
            .zan {
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: grey;
                30px;
                height:30px;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="zan">赞</div>
        </div>
        <p></p>
        <div class="content">
            <div class="zan">赞</div>
        </div>
        <p></p>
        <div class="content">
            <div class="zan">赞</div>
        </div>
        <p></p>
        <div class="content">
            <div class="zan">赞</div>
        </div>
    </body>
    </html>
    
    <script>
        $('.zan').click(function(){
            var tag = document.createElement('span');
            var fontSize =10;
            var top = 90;
            var right = 200;
            var opacity=1;
    
            $(tag).text('+1');
            $(tag).css('color', 'green');
            $(tag).css('fontSize', fontSize +'px');
            $(tag).css('top', top +'px');
            $(tag).css('right', right +'px');
            $(tag).css('opacity', opacity);
    //        $(tag).css('position', 'relative');
    
            $(this).parent().append(tag);
    
            var obj;
            obj = setInterval(function(){
                if(opacity < 0){
    //                alert(1)
                    clearInterval(obj);
                    $(tag).remove();
                }
    
                fontSize = fontSize + 5;
                top = top - 5;
                right = right - 5;
                opacity = opacity - 0.1;
    
                $(tag).css('fontSize', fontSize +'px');
                $(tag).css('top', top +'px');
                $(tag).css('right', right +'px');
                $(tag).css('opacity', opacity);
    //            $(tag).css('position', 'absolute');
                },100);
    
        })
    </script>
  • 相关阅读:
    每日一篇文献:Robotic pick-and-place of novel objects in clutter with multi-affordance grasping and cross-domain image matching
    每日一篇文献:Intuitive Bare-Hand Teleoperation of a Robotic Manipulator Using Virtual Reality and Leap Motion
    每日一篇文献:Virtual Kinesthetic Teaching for Bimanual Telemanipulation
    HEBI Robotic Arm VR Teleoperation
    「iQuotient Case」AR device teleoperated robotic arm
    VR and Digital Twin Based Teleoperation of Robotic Arm
    HEBI Robotic Arm VR Teleoperation
    Human Robot Interaction
    Immersive Teleoperation Project
    机器人演示学习
  • 原文地址:https://www.cnblogs.com/hinimix/p/9284601.html
Copyright © 2011-2022 走看看