2021-04-16 jquetry 01

子非鱼emma

于 2021-04-16 21:24:03 发布

阅读量198

点赞数

分类专栏： jq&ajax

本文链接：https://blog.csdn.net/qq_38998319/article/details/115772098

版权

jq&ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.请写出jq入口函数的四种写法？

2.入口函数在什么时候进行调用

3.先把所有的i样式去掉active类，然后再给第4个i元素添加active类（排他）

4.jq的使用步骤为？

5.写出jq的应用语句（地址为：lib/jquery.js）

6.jq获取元 $(css选择器）返回值为：？

7.使用jq的方式设置第一个p标签中的文字颜色为red 背景颜色为绿色？使用jq方式设置第二个标签的文字颜色为蓝色？

8.使用jq方式用两种方式给类名为btn1的元素注册点击事件，点击时弹出：我是jq事件执行的内容

9.1.使用tagename方式获取所有的p元素赋值给p变量，2.然后使用jq方式将元素转换为jq元素赋值给pp，3.最后在pp中取出单个jq元素

10.给body中的三个按钮注册单机事件，实现按钮中文字的功能（通过添加，移除，切换类名方式）

11.给div元素注册点击事件，点击后实现动画效果为，宽度和高度变为300px，

变化事件为1.5秒，运动方式为：easeOutElastic ，动画结束后弹窗对话框：我时jq动画，

12：给div设置动画的效果为，程序运行后，透明度变为0.8 变化事件为2秒

13，渐变动画

14.给father注册滚动条事件，当鼠标滑动滚动条时，控制台输出滚动条距离左侧距离和顶部具体

15 1.写出google和ie的滚动条事件的写法，2，写出同时兼容谷歌和ie的滚动条事件

1.请写出jq入口函数的四种写法？

<!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>
  <script src="./lib/jquery.js"></script>
  <body></body>
  <script>
    // 入口函数 程序开始的地方
    /*  $(function(){

    })
    jQuery(function(){

    }) 
    $(document).ready(function () {
        console.log(13);
      })
    jQuery(document).ready(function(){
          console.log(123123123);
      })
    */
    // console.log($ === jQuery);
    /*   */
    //   jQuery(document).ready(function(){
    //       console.log(123123123);
    //   })

  
  </script>
</html>

2.入口函数在什么时候进行调用

 <script>
   
    // 入口函数 会在DOM树构建完毕之后调用 早于load事件
   window.onload = function () {
      console.log(2);
    };
    $(function () {
      console.log(1);
    });
   
    // 回调函数  以参数的形式,传入另一个函数,在特定的时机调用
    setInterval(function(a,b){

    },1000,'小明','瑶')
  </script>

3.先把所有的i样式去掉active类，然后再给第4个i元素添加active类（排他）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #000;
      }
      div {
        display: flex;
      }
      i {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
        background-color: #fff;
        text-align: center;
        line-height: 30px;
      }
      .active {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <i>昆?</i>
      <i class="active">帘!</i>
      <i>哦?</i>
      <i>否!</i>
    </div>
  </body>
 


</html>

 <script>
    /*  排它:
            排除其它  别人都是一般的  就我是特殊的
        思路:先把所有的都变成一样的,然后在想要的样式 变成特殊的
    */

    //先把持有的变成一样的 没有active这个类选择器
    var iss = document.querySelectorAll("div i");
    // console.log(iss);
    iss.forEach(function (e, i) {
      e.classList.remove("active");
    });
    // 让下标为3的 拥有active这个样式
    iss[3].classList.add("active");
  </script>

4.jq的使用步骤为？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    
  </body>
  <script>
    
    // 使用步骤：
    //    1.下载 使用script引入 切记 一定要写在自己js代码之上
    //    2.写一个jq专用的入口函数
    //    $(function () {
    //      写你想要的效果（jq语句）
    //    })
   
       $(function(){
        //  var box=document.getElementById('box');
        //  box.style.width=200+'px'
        //  box.style.height = 200+'px'
        //  box.style.backgroundColor='hotpink';

        //  使用jq方式操作div

        $('#box').css({
          width:300,
          height:300,
        })
       })
  </script>
</html>

5.写出jq的应用语句（地址为：lib/jquery.js）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script src="./lib/jquery.js"></script>
  </body>
  <script>
    /*
    使用步骤:
        1.下载 使用script引入 切记 一定要写在自己js代码之上
        2.写一个jq专用的入口函数
        $(function(){
            写你想要的效果
        })

     */
    $(function () {
    /*  var box = document.getElementById('box');
     box.style.width = 200+'px';
     box.style.height = 200+'px';
     box.style.backgroundColor = 'hotpink'; */

     //使用jq方式操作div
    
    $('#box').css({
        width:300,
        height:300,
        backgroundColor:'tomato'
    })
    });
  </script>
</html>

6.jq获取元 $(css选择器）返回值为：？

<!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>
  <body>
    <div id="box">我是BOX</div>
    <div class="list">1</div>
    <div class="list">2</div>
    <ul>
      <li>昆</li>
      <li>帘</li>
      <li>哦</li>
      <li>否</li>
    </ul>
    <script src='./lib/jquery.js'></script>
  </body>
  <script>
      /* 
        jq中获取元素 $(css选择器) 
        返回值  集合---jq对象
      */
     var box  = $('#box');
     var list = $('.list');
     var lis = $('ul li');
     var divs = $('#box,.list');
     console.log(box);
     console.log(list);
     console.log(lis);
     console.log(divs);
  </script>
</html>

7.使用jq的方式设置第一个p标签中的文字颜色为red 背景颜色为绿色？使用jq方式设置第二个标签的文字颜色为蓝色？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p:nth-child(1) {
        color: darkgreen;
      }
      p:nth-child(2) {
        color: darkorchid;
      }
    </style>
  </head>
  <script src="./lib/jquery.js"></script>
  <body>
    <p>永远的处男---打一个名人</p>
    <p>永远的处女---打一个名人</p>
  </body>
  <script>
    /* 
    jq操作行内样式
    jq对象.css() 用于获取
    

    用于设置
    jq对象.css({
        css属性名:值,...,...,
    })
    
    
    */
    //演示获取
    console.log($("p").css('color'));
    console.log($(' p:nth-child(2)').css('color'));

    //演示设置  {}一次改多个
    $('p:nth-child(1)').css({
        'color':'#0094ff',
        background:'gray'
    })

    // 一次改一个
    $(' p:nth-child(2)').css('color','tomato')
  </script>
</html>

8.使用jq方式用两种方式给类名为btn1的元素注册点击事件，点击时弹出：我是jq事件执行的内容

<!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>
  <body>
    <input type="button" value="点妓" id="btn1" />
    <input type="button" value="海王" id="btn2" />
    <script src="./lib/jquery.js"></script>
  </body>
  <script>
   /* 
   jq 注册事件

      jq对象.事件类型(function(){


      })

      jq 对象.on(事件类型,function(){

      })
 */
      $(function(){

        $('#btn1').click(function(){
          alert('我是jq事件执行的内容')
        })  ;

        // 推荐加on

        var btn2=$('#btn2')
        btn2.on('click',function(){
          alert('我是jq事件执行的内容2')
        })

        $('#btn2').on('click',function(){
          alert('我是jq事件执行的内容3')
        })
      })
  </script>
</html>

9.1.使用tagename方式获取所有的p元素赋值给p变量，2.然后使用jq方式将元素转换为jq元素赋值给pp，3.最后在pp中取出单个jq元素

<!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>
  <script src='./lib/jquery.js'></script>
  <body>
    <p>白日依山尽1</p>
    <p>白日依山尽2</p>
    <p>白日依山尽3</p>
    <p>白日依山尽4</p>
    <p>白日依山尽5</p>
  </body>
  <script>
  /*   
    有时候需要将dom对象转为jq对象
    转法：$(dom元素)

    有时候将jq对象从里面拿出来一个dom元素

    jq对象[索引]
 */
    // 演示转换
    var p=document.getElementsByTagName('p');
    console.log(p);
    var pp=$(p);//将dom元素转换为jq元素
    console.log(pp);


    // 演示取dom元素
    var p=$('p');//p为jq集合，里面包含的是dom元素
    console.log(p);
    var pp=$(p[1]);//所以取p中的单个元素，仍然要继续使用jq转换
    console.log(pp);
    
  </script>
</html>

10.给body中的三个按钮注册单机事件，实现按钮中文字的功能（通过添加，移除，切换类名方式）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .green{
        background-color: chartreuse;
      }
      .red{
        background-color: red;
      }
      .opacity{
        opacity: 0.5;
      }
      .wh{
        width: 20px;
        height: 30px;
      }

    </style>
  </head>
  <body>
    <button id='wh'>添加宽高</button>
    <button id='opacity'>去除透明度</button>
    <button id='red'>切换背景颜色（红色）</button>
    <div id="box" class="red green opacity"></div>
    <script src="./lib/jquery.js"></script>
  </body>
  <script>
/* 
    // jq 中操作
       添加类名
       jq 对象.removeClass('类名')
      //  删除类名
      jq对象.removeClass('类名')
      切换类名
      jq 对象.toggleClass('类名');
 */

$('#wh').on('click',function(){
  $('#box').addClass('wh');
})

$('#opacity').on('click',function(){
  $('#box').removeClass('opacity');
})
$('#red').on('click',function(){
  $('#box').toggleClass('red');
})

 

  </script>
</html>

11.给div元素注册点击事件，点击后实现动画效果为，宽度和高度变为300px，

变化事件为1.5秒，运动方式为：easeOutElastic ，动画结束后弹窗对话框：我时jq动画，

12：给div设置动画的效果为，程序运行后，透明度变为0.8 变化事件为2秒

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: cyan;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script src="./lib/jquery.js"></script>
  <script src="./lib/jquery.easing.js"></script>
</body>
<script>

/*   
 早期的动画都是用jq，现在几乎都是css3写的

 jq的动画函数  jq对象.animate

 jQuery animate() 方法用于创建自定义动画

 jq对象.animate({params},speed,callback);

 必须的params 参数定义形成动画的css属性

 可选的speed参数规定效果的时长 。他可以取以下值："slow","faste" 或毫秒

 可选的callback 参数是动画完成后执行的函数名称

 */

 $('#box').on('click',function(){
   $('#box').animate(
     {
       width:300,
       height:400,
     },
     1500,
     'easeOutElastic',
     function(){
       alert('jq动画');
     }
   );
 }) ;
// 改变透明度
$('#box').animate({opacity:0.3},600)
</script>
</html>

13，渐变动画

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      width: 400px;
      height: 400px;
      background-color: #ff9400;
      /* display: none; */
    }

    p,
    span {
      font-size: 90px;
    }
  </style>
</head>

<body>
  <p style="display: none ">Hello</p><br><br><br><br>
  <span style="display: none">Helooooooooooolo</span><br>
  <!-- <input type="button" value=""> -->
  <script src="./lib/jquery.js"></script>
  <script src="./lib/jquery.easing.js"></script>
  <div class="box"></div>
  <input type="button" value="切换" id="toggle" />
  <input type="button" value="指定" id="to" />
</body>
<script>
  $('p').show('slow')
  $('span').show('fast')


  //  $('p').show('fast',function(){
  //    $(this).text('hahahaha')
  //  })

  // 如果给一个使用jq的方式加了多个动画 会按照从先到后--动画队列

  // fadeOut 淡出(速度,曲线,回调函数)
    // fadeIn 淡入
    // fadeToggle 切换
    // fadeTo (速度,透明度,曲线,回调函数)

  $('.box').fadeOut(4000, 'easeOutElastic', function () {
    console.log('整完没1');
  })

  $(".box").fadeIn(4000, 'linear', function () {
    console.log("整完没");
    console.log('fadein');
  });


  $(".box").fadeOut(4000, 'swing', function () {
    console.log('swing');
    console.log("整完没");
  });



  $(".box").fadeOut(4000, 'linear', function () {
    console.log("整完没");
    console.log('linear');
  });



  $(".box").fadeIn(4000, 'linear', function () {
    console.log("整完没");
    console.log('fadein');
  });





  $('#toggle').on('click', function () {
    $('.box').fadeToggle(1200, 'easeInQuad');
  })

  $('#to').on('click', function () {
    $('.box').fadeTo(1200, 0.1);
  })
</script>

</html>

14.给father注册滚动条事件，当鼠标滑动滚动条时，控制台输出滚动条距离左侧距离和顶部具体

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 400px;
        height: 400px;
        overflow: scroll;
      }
      .son {
        width: 800px;
        height: 800px;
        /* background-color: #ff6700;
         */
         background-image: linear-gradient(-45deg,red,green,blue,yellow,hotpink);
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
  <script>
 /*   
   scroll系统
   scrollLeft 元素内容滚动出去的水平距离
   scrollTop 元素内容滚动出去的垂直距离

   scroll事件 --当父元素的滚动条在滚动的时候触发 给父元素注册
 */
   var father = document.querySelector('.father');
   console.log(father);
   father.onscroll= function(){
     console.log(1);
     console.log(father.scrollTop,father.scrollLeft);
   }
  </script>
</html>

15 1.写出google和ie的滚动条事件的写法，2，写出同时兼容谷歌和ie的滚动条事件


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 3000px;
        width: 800px;
        margin: 0 auto;
        background-image: linear-gradient(
          -45deg,
          red,
          cyan,
          gold,
          lawngreen,
          hotpink
        );
      }
      .search {
        position: fixed;
        width: 100%;
        height: 60px;
        background-color: skyblue;
        top: 0;
        left: 0;
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="search"></div>
    <div class="box"></div>
  </body>
  <script>
/*    
   目标：当前页面的滚动条 滚动一定的距离 把search显示
   步骤：
   1.注册滚动事件
   2.判断滚动出去的距离
   大于 一个值 让search出现
 */
  //  这个方式 在google里面可以

   document.body.onscroll = function(){
     console.log(111);
   }

// 在IE浏览器里 使用这种方式

document.documentElement.onscroll = function(){
  console.log('IE浏览器专用');

}

// html 和 body 都归document 管
document.onscroll = function(){
console.log(222);
}


var search=document.querySelector('.search');

// 滚动事件一般会给window注册 ---ie还是谷歌

window.onscroll= function(){
  //得到滚动出去的距离
  // IE认为 滚动条HTML的
  // 谷歌认为 滚动条是 body的

  console.log(document.documentElement.scrollTop);
  console.log(document.body.scrollTop);

  //考虑兼容问题
  var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

  console.log(scrollTop);

//若放弃ie8 可以直接使用
var scrollTop =window.pageYOffset;
search.style.display=scrollTop>=300?'block':'none';



}
var a=true|| false;
console.log(a);



  </script>
</html>

子非鱼emma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-04-16 jquetry 01

1.<!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> <script src=
复制链接

扫一扫