2021-04-20 jQuery03

最新推荐文章于 2023-01-04 11:26:11 发布

子非鱼emma

最新推荐文章于 2023-01-04 11:26:11 发布

阅读量117

点赞数

分类专栏： jq&ajax 文章标签： jquery

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

版权

jq&ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>
  <body>
    <script src="./lib/jquery.js"></script>
    <input type="button" value="按钮" id="btn" />
    <ul></ul>
  </body>
  <script>
   
/* 
   事件：在浏览器里面的 触发+相应 的机制
   处理特定的一瞬间
   onload
   click
   mouseout

   注册事件：
   jq 对象.on(事件类型，处理程序)
   jq 对象.事件类型(处理程序)

   事件委托
   解决问题：
   1.动态生成的元素的时间注册问题
   2.大量注册事件的压力

   前别元素的jq 对象.on(事件类型，后代元素的选择器，处理程序)

   事件解绑

   off
   jq对象.off(事件类型，处理程序)

   解绑事件委托
   jq 对象.off(事件类型，后背选择器，处理程序)
 */
// 点击生成新的li
 $('#btn').on('click',()=>{
   $('ul').append('<li>删除</li>');

 });

//  老方法 不好用了 删除
// $('li').on('click',function(){
//   console.log(this);
//   $(this).remove();
// });

// jq 的事件委托
$('ul').on('click','li',function(){
  console.log(this);
  this.parentNode.removeChild(this);

// jq 的委托里面 this是触发事件的对象
  $(this).remove();
})

// 演示解绑
$('#btn').on('click',function fn(){
  $(this).off('click',fn);
  console.log(1);
})

// 解绑事件委托
$('ul').on('click','li',function fn(){
  $('ul').off('click','li',fn);
  $(this).remove();
})


  </script>
</html>

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: 200px;
      height: 200px;
      background-color: lawngreen;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script src="./lib/jquery.js"></script>
</body>
<script>
  /* 
   把jq的实际对象当成dom实际对象使用 而且没有兼容性问题

   $(document).on('click',function(e){
     console.log(e);
   })

   document.onclick=function(e){
     console.log(e);
   }

   function Person(name,age){
     this.name=name;
     this.age=age;

   }

   var p1=new Person();
   console.log(p1);

   使用jq实现一个拖动元素

   思路
   1.鼠标按下 让标记为true 移动鼠标 让元素跟着鼠标移动 松手的时候 标记变为false

   步骤：
   1.获取元素
   2.注册事件
      2.1 鼠标按下事件
      2.2 鼠标移动事件 让元素的left和top随着鼠标的位置而改变
          css变化
      2.3 松手 鼠标抬起事件

       */


  var canMove = false;
  var tempX, tempY;
  $('#box').on('mousedown', (e) => {
    canMove = true;
    tempX = e.offsetX;
    tempY = e.offsetY;
    console.log(tempX,tempY);
  })

  $('#box').on('mousemove',(e)=>{
    if(canMove){
      var left=e.pageX-tempX;
      var top = e.pageY-tempY;

      $('#box').css({
        // est 字面量写法:当值与属性名相等时可简写
        // left:left,
        // top:top

        left,
        top,       
      });

    }
  });

  $('#box').on('mouseup',()=>{
    canMove=false;
  });


  // 其他事件对象的方法
  $(document).on('contextmenu',(e)=>{
    e.preventDefault();
  });

// 事件冒泡
$(document).on('click',function(){
  console.log('我是document');
});

$('#box').on('click',function(e){
  e.stopPropagation();
  console.log('哈哈哈哈哈');
});
</script>

</html>

3.链式编程

<!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="按钮" />
    <input type="button" value="按钮" />
    <input type="button" value="按钮" />
    <input type="button" value="按钮" />
    <input type="button" value="按钮" />
    <input type="button" value="按钮" />
    <input type="button" value="按钮" />
    <input type="button" value="按钮" />
    <input type="button" value="按钮" />
    <input type="button" value="按钮" />
    <input type="button" value="按钮" />
    <script src="./lib/jquery.js"></script>
  </body>
  <script>
 /*    
    链式编程
    方法调用完毕之后还可以继续调用方法
    好处：思路极多的获取元素的过程
    原理：方法本质是函数，函数执行过后有返回值 只有这个返回值是个对象，就可以调用方法

 */
     $('input').on('click',function(){
       $(this).css('background-color','green').val('司令')
       .siblings().css('background','pink').val('工兵')

//  相当于
    // $(this).css('background-color','green');
    // $(this).val('军长');
    // $(this).siblings().css('background-color','green');
    // $(this).siblings().val('工兵');

     })

    //  演示 链式编程的原理
     var obj={
       name:'王德发',
       say:function(){
         console.log('我的名字是王德发');
         return this;
       },

       eat:function(){
         console.log('饿了，想吃饭');
         return this;
       },

       play:function(){
         console.log('无聊想玩');
         return this;
       },

     };

obj.say().eat().play();
/* 
undefined.eat();
Cannot read property 'eat' of undefined
Cannot read property '单词' of undefined
找单词前面的结果 肯定是这个结果出问题了 前面你的结果是undefined
 */
    




  </script>
</html>

4.ajax

<!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>
    <script src="./lib/jquery.js"></script>
  </body>
  <script>
 /*   
   $.ajax(url,[setting]);
   参数:url 不同的请求地址，直接从接口文档中获得 直接复制就行
   setting是一个对象
        success:请求地址成功之后 返回 是一个回调函数
 */

  /*  $.ajax("http://kumanxuan1.f3322.net:8809/travels/query", {
      success: function (res) {
        console.log(res.data.content);
      },
    }); */
    // $.ajax({
    //   url: "http://kumanxuan1.f3322.net:8809/travels/query",
    //   success: (res) => {
    //     console.log(res);
    //   },
    // });
         $.ajax('http://kumanxuan1.f3322.net:8809/travels/query',{success:function(res){}});


         $.ajax({url:'http://kumanxuan1.f3322.net:8809/travels/query', success:function(res){}});
  </script>
</html>

5.窝窝热门游记遍历

$(function(){
/* 
  目标：使用ajax请求热门游记数据 并且动态生成
  url: http://kumanxuan1.f3322.net:8809/travels/query
  步骤:1.使用ajax发送请求，得到数据
       2.从中得到数据 是游记列表的所有内容 得到数组.data.content
       3.动态生成
 */
// 获取列表数据 并且动态生成
$.ajax({
  url:'http://kumanxuan1.f3322.net:8809/travels/query',
  success:res=>{
    console.log(res);
    // 得到数组
    var arr=res.data.content;
    console.log(arr);
    // 开始动态生成
    var str='';
    arr.forEach(function(e){
      str+=
      `
      <div class="tn-item clearfix">
        <div class="tn-image"><a href="javascript:;" target="_blank"><img src="${e.coverUrl}" style="display: inline;"></a></div>
        <div class="tn-wrapper">
            <dl>
                <dt><a href="http://kumanxuan1.f3322.net:8808/views/travel/detail.html?id=${e.id}" target="_blank">${e.title}</a></dt>
                <dd><a href="http://kumanxuan1.f3322.net:8808/views/travel/detail.html?id=5e3bf6a93f050000ff0035e5" target="_blank">
                ${e.summary}
                    </a></dd>
            </dl>
            <div class="tn-extra"><span class="tn-ding"><a href="javascript:;" data-japp="articleding" data-iid="12451790" data-vote="2157" rel="nofollow" class="btn-ding"></a> <em id="topvote12451790">${e.thumbsupnum}</em></span> <span class="tn-place"><i></i> <a href="javascript:void(0);" rel="nofollow" class="_j_gs_item">
                        ${e.destName}</a>，by
                </span> <span class="tn-user"><a href="javascript:;" target="_blank" rel="nofollow"><img src=".${e.author.headImgUrl}">
                ${e.author.nickname}
                    </a></span> <span class="tn-nums"><i></i>${e.viewnum}/${e.favornum}</span></div>
        </div>
    </div>
      `;

    });

    $('.tn-list').html(str);
  }
});

});

子非鱼emma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-04-20 jQuery03

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> <body&gt
复制链接

扫一扫

专栏目录