jq笔记

thinkasany

于 2020-07-09 10:42:30 发布

阅读量212

点赞数 1

本文链接：https://blog.csdn.net/daddykei/article/details/107026824

版权

这里写目录标题

一级目录
自用小插件
- 悬浮可拖拽导航
- 点击查看详情

一级目录

二级目录

jq选择器

id选择器 $('#box')
类选择器 $('.box')
标签选择器 $('p')
并集选择器 $('li,a,#box')
交集选择器 $('div.abc')

//子代选择器
$(‘ul>li’).css(‘border’,‘3px dotted pink’);
//后代选择器
$(‘ul li’).css(‘border’,‘3px dotted pink’);
//过滤选择器 :qe()
$(‘ul li:eq(2)’).css(‘backgroundColor’,‘pink’)
//child() 子代 //find() 后代 //siblings() 其他兄弟们参数可选 //parent()父级在这里插入图片描述

  <ul>
        <li>
            <ol>
                <li></li>
                <li></li>
            </ol>
        </li>
        <li>
            <ol>
                <li></li>
                <li></li>
            </ol>
        </li>
    </ul>  
    <div id="box">
        <em>111</em>
         <p>222</p>
         <p>333</p>
         <span>444</span>
    </div>
  <script>
      //child() 子代
      $('ul').children().css('border','2px solid green');
      $('#box').children('em').css('color','red');
      //find() 后代
      $('ul').find('li').css('background','gray');
      //siblings() 其他兄弟们 参数可选
      $('#box span').siblings('p').css('border','2px dashed black');
      //parent()父级
      $('span').parent().css('border','5px solid orange');
      //parents()父级们
      $('span').parents().css('border','5px solid orange');
  
  </script>

选项卡小案例
在这里插入图片描述

<style>
 .wrap{
     width: 200px;
     text-align: center;
 }
 .menuGroup{
     border: 1px solid black;
     background-color: cadetblue;
 }
 .menuGroup>div{
     height: 200px;
     background-color: cornflowerblue;
     display: none;
 }
 span{
     border-bottom: 1px solid seagreen;
     cursor: pointer;
     display:block;
     height: 28px;
     line-height: 20px;
     font-size: 16px;
 }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<ul class="wrap">
<li class="menuGroup">
    <span>1</span>
    <div>1</div> 
</li>
<li class="menuGroup">
    <span>12</span>
    <div>12</div> 
</li>
<li class="menuGroup">
    <span>123</span>
    <div>123</div> 
</li>
<li class="menuGroup">
    <span>1234</span>
    <div>1234</div> 
</li>


</ul>
  <script>
  $('.wrap>li').children('span').click(function(){
      $(this).siblings().css('display','block');
      $(this).parent().siblings().find('div').css('display','none');
  })
  </script>


## js jq对比
```javascript
   window.onload = function(){
          console.log('js 入口')
      }
      window.onload = function(){
          console.log('js 入口无法写多个会覆盖')
      }
      $(function(){
          console.log('123')
      })
      $(function(){
          console.log('456')
      })
      $(document).ready(function(){
        console.log('789')
      })

//123 456 789 js 入口无法写多个会覆盖
1.入口函数 js无法写多个 jq不会覆盖 jq 入口函数触发时机更早
2.代码容错性 js报错会停止运行 jq不会报错容错性更强
3.兼容性 js有很多兼容问题 jq几乎没有容错性问题（内部已经处理）

$ 本质

<script>
     $(); //本质上是一个函数 可以接受很多参数
     //$(funciton(){}) 意味着需要写入口函数
     //$('#box')  意味着获取id为box的元素
     console.log($('#box'))  //jq对象
     //$('#box').style.background='red'; 
     //报错 jq对象无法使用js的属性和方法
     // js :document.getElementById('box').style.background='red'; 
     $('#box').css('backgroundColor','blue');
     //jq 和 js 可以一起共存 但是不能混用
  </script>

jq和js dom 相互转换

  <script>
   //jq=>js dom
   $('#box').get(0).style.backgroundColor='red';
   //$('#box')[0].style.backgroundColor='red';
   //js dom=>jq
   var oBox = document.getElementById('box');
   $(oBox).css('border','3px solid blue');

  </script>

jq显示隐藏

<body>
    <input type="button" value="显示">
    <input type="button" value="隐藏">
    <input type="button" value="切换">
 <div id="box">
 </div>
  <script>
  $('input:eq(0)').click(function(){
      $('#box').show("slow",function(){
          alert("show")
      })
  });
  $('input:eq(1)').click(function(){
      $('#box').hide("fast",function(){
          alert("fast")
      })
  });
  $('input:eq(2)').click(function(){
      $('#box').toggle(2000,function(){
          alert("toggle")
      })
  });
  </script>

自用小插件

悬浮可拖拽导航

在这里插入图片描述
拖动时候用到的三个事件：mousedown、mousemove、mouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的，查资料后发现，在移动端与之相对应的分别是：touchstart、touchmove、touchend事件。还有一点要注意的是在PC端获取当前鼠标的坐标是：event.clientX和event.clientY，在移动端获取坐标位置则是：event.touches[0].clientX和event.touches[0].clientY。
网上借鉴下载地址如下
http://www.jq22.com/jquery-info21190

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>div拖拽</title>
    <style>
        .myk {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: fixed;
            z-index: 999;
            top: 150px;
            left: 50px;
            border-radius: 50%;
            line-height: 100px;
            text-align: center;
            color: white;
            letter-spacing: 2px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div class="myk" id="t1">
        首页
    </div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="drag.js"></script>
<script>
    moveDivs("t1"); //传入容器ID就可以
</script>

</html>

//div视野拖拽
function moveDivs(_id) {
    var _block = document.getElementById(_id);
    var _init_left, _init_top, _div_top, _div_left, _box_width, _box_heiht;
    var _win_height = $(window).height();
    var _win_width = $(window).width();

    _block.addEventListener('touchstart', function(e) {
        _init_left = parseInt(e.touches[0].clientX);
        _init_top = parseInt(e.touches[0].clientY);
        _div_top = $("#" + _id).offset().top - $(window).scrollTop();
        _div_left = $("#" + _id).offset().left;
        _box_width = $("#" + _id).width();
        _box_heiht = $("#" + _id).height();
    });



    _block.addEventListener('touchmove', function(e) {
        e.preventDefault();
        var _left = parseInt(e.touches[0].clientX);
        var _top = parseInt(e.touches[0].clientY);

        var _need_left = _div_left + (_left - _init_left);
        var _need_top = _div_top + (_top - _init_top);

        //检测_block是否还存在可视区域
        var _max_left = _win_width - _box_width;
        var _max_top = _win_height - _box_heiht;

        if (_need_left < 0) _need_left = 0;
        if (_need_left > _max_left) _need_left = _max_left;
        if (_need_top < 0) _need_top = 0;
        if (_need_top > _max_top) _need_top = _max_top;
        $(".myk").css({ 'z-index': 9, })
        $('#' + _id).css({
            'top': _need_top + 'px',
            'left': _need_left + 'px',
            'z-index': 999,
        })

    });

    _block.addEventListener('touchend', function(e) {

    });
}

//保留多位小数
function fixedNum(_val, _num = 2) {
    var val = (_val * 100) / 100;
    return val.toFixed(_num);
}

点击查看详情

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <title>复制</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

</head>

<body>
    <div id="container" style="height:200px;width:200px;background-color: aqua;">
        :hidden 选择器选取隐藏的元素。 以下几种情况的元素是隐藏元素： 设置为 display:none 带有 type="hidden" 的表单元素 隐藏的父元素（这也会隐藏子元素） 注释：该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用。</div>
    <a href="javascript:void(0);" id="detail">点击这里</a>

</body>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/jquery-3.3.1.js"></script>
<script>
    $(function() {
        $('#detail').click(function() {　　 //点击a标签
            if ($('#container').is(':hidden')) {　　 //如果当前隐藏
                $('#container').show();　　 //那么就显示div
            } else {　　 //否则
                $('#container').hide();　　 //就隐藏div
            }
        })
    })
</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    .cWrap,
    .cWrap div {
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    
    .cWrap {
        width: 90%;
        margin: auto;
        height: 30px;
        overflow: auto;
    }
    
    .cWrap>div {
        width: 200%;
        transition: 0.5s all ease;
        overflow-x: auto;
        white-space: nowrap;
        display: inline-block;
    }
    
    .cWrap>div>div {
        width: 10%;
        height: 20px;
        border: 1px solid black;
    }
    
    #leftMove,
    #rightMove {
        margin: 0;
        padding: 0;
    }
</style>


<body>
    <div style="width: 100%;">
        <button id="rightMove"><</button>

        <div style="width: 100%;overflow: hidden;">
            <div class="cWrap">

                <div id="box">
                    <div class="day">
                        1
                    </div>
                    <div class="day">
                        2
                    </div>
                    <div class="day">
                        3
                    </div>
                    <div class="day">
                        4
                    </div>
                    <div class="day">
                        5
                    </div>
                    <div class="day">
                        6
                    </div>
                    <div class="day">
                        7
                    </div>
                    <div class="day">
                        8
                    </div>


                </div>
            </div>
        </div>

        <button id="leftMove">></button>
    </div>


</body>
<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
    var x = 0;
    var box = document.getElementById('box');
    var a = box.style.left;
    console.log(a);
    $("#leftMove").click(function() {   
        x++;   
        console.log(x);      
        var p = -10;   
        var xp = x * p + "%";   
        $(".cWrap").children("div").css("margin-left", xp);

           
        x = x > 15 ? 10 : x;
    })

    $("#rightMove").click(function() {    
        console.log(x);      
        var p = -10;   
        var xp = x * p + "%";   
        $(".cWrap").children("div").css("margin-left", xp);   
        x--;   
        x = x < 0 ? 0 : x;
    })
</script>

</html>

thinkasany

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq笔记

这里写目录标题一级目录二级目录jq选择器js jq对比$ 本质jq和js dom 相互转换jq显示隐藏一级目录二级目录jq选择器id选择器 $('#box')类选择器 $('.box')标签选择器 $('p')并集选择器 $('li,a,#box')交集选择器 $('div.abc')//子代选择器$(‘ul>li’).css(‘border’,‘3px dotted pink’);//后代选择器$(‘ul li’).css(‘border’,‘3px dotted pink
复制链接

扫一扫