学js的第21天

day21 jQuery进阶

2.jQuery循环

2.1 each :没有返回值

  • 语法1:$.each(循环对象,function(index,value){})

  • 语法2:$(循环对象).each(function(index,value){})

  • 循环数组

    //1.循环数组
    var arr = ["a","b","c"];
    $.each(arr,function(index,value){
        console.log(index +"--------------"+value);
    });
  • 循环对象

    //2.循环对象
    var teacher = {
        "name":"梁进",
        "age":32,
        "height":175,
        "sex":"男",
        "skill":function(){
            console.log("教三阶段");
        }
    }
    $.each(teacher,function(key,value){
        console.log(key +"----------"+value);
    })
  • 循环标签

    //3.循环标签
    var sum = 0;
    $("li").each(function(index,elem){
        console.log(elem);  //<li>9.9</li>
        console.log($(elem));
        sum += Number($(elem).text());
    });
    console.log(sum);

一般使用$().each() 这种语法

2.2 map:有返回值

  • 语法1:$.map(循环对象,function(value,index){})

  • 语法2:$(循环对象).map(function(index,value){})

    //$.map:循环有有返回值
    //语法1:$.map(循环对象,function(value,index){})
    //语法2:$(循环对象).map(function(index,value){})
    var arr = ["a","b","c"];
    $.map(arr,function(value,index){
        console.log(index);
    })

3.jQuery的BOM操作

3.1 原生js

  • location.href :获取或设置当前窗口显示的url地址

  • location.seach:快速获取url中搜索内容

  • 三大系列

    • client:可视

      • 元素的可视宽高:标签.clientWidth/clientHeight content+padding

      • 屏幕的可视宽高:document.documentElement.clientWidth/clientHeight

    • offset:占位

      • 元素的占位宽高:标签.offsetWidth/offestHeight content+padding+border

      • 元素的位置:标签.offsetTop/offsetLeft 当前元素的顶部到定位父元素的距离,如果没有定位父元素到body的距离

    • scroll:滚动

      • 页面被卷去的高:document.documentElement.scrollTop || document.body.scrollTop

    • onload:页面加载,onresize:窗口大小发生变化 onscroll:滚动条滚动

3.2 jQuery

  • 获取元素宽高

    • 内容宽高:$().width()/height()

    • 可视宽高:$().innerWidth()/innerHeight() content+padding

    • 占位宽高:$().outerWidth().outerHeight() content+padding+border true:加margin

       //1.1 获取元素的内容宽高
      var w = $("div").width();  //height
      console.log(w);  //100 
      ​
      //1.2 获取元素的可视宽高  content+padding
      var inner = $("div").innerWidth(); //innerHeight
      console.log(inner);
      ​
      //1.3 获取元素的占位宽高  content+padding+border
      var outer = $("div").outerWidth(true); //outerHeight
      console.log(outer); //false:不加margin   true:加margin
      ​
      //1.4. 获取屏幕
      console.log($(window).width());  //获取屏幕的可视宽高
  • 获取元素位置

    • 到body的距离:$().offset();

    • 到定位父元素距离:$().position()

    • 页面的滚动距离:$(window).scrollTop();

       //1.offset : 获取当前元素顶部到body距离
      var offset =  $("p").offset();
      console.log(offset);  //{top: 110, left: 118}
      console.log(offset.top); //110
      ​
      ​
      //2.position: 获取当前元素顶部到定位父元素的距离
      var position = $("p").position();
      console.log(position); //{top: 0, left: 0}
      ​
      //3.scrollTop:获取页面的滚动距离
      $(window).scroll(function(){
          console.log($(window).scrollTop());
      })

4.jQuery的DOM操作

4.1 原生js

  • 查找:

    • 找父节点

      • ==直接父节点:子节点.parentNode==

      • 定位父节点:子节点.offsetParent

    • 找子节点

      • ==子元素:父节点.children==

      • 子节点:父节点.childNodes (文本节点,标签节点,属性节点,注释节点)

    • 首尾节点

      • 首节点:父节点.firstElementChild || 父节点.firstChild

      • 尾节点:父节点.lastElementChild || 父节点.lastChild

    • 兄弟节点

      • 上:参考节点.previousElementSibling || 参考节点.previousSibling

      • 下:参考节点.nextElementSibling || 参考节点.nextSibling

  • 创建

    • ==创建标签节点:document.createElement("标签名")==

    • 创建文本节点:document.createTextNode("文本内容")

  • 添加

    • ==追加:父节点.appendChild(子节点)==

    • ==插入:父节点.insertBefore(newChild,refChild)==

  • 删除

    • 删除元素本身:元素.remove()

    • ==删除子节点:父节点.removeChild(子节点)==

  • 替换:父节点.replaceChild(newChild,refChild)

  • 拷贝:参考节点.cloneNode(true/false)

4.2 jQuery

4.2.1 查找

  • 找父节点

    • 找直接父节点:$().parent(selector);

    • 找父辈:$().parents(selector);

  • 找子节点

    • 找子代:$().children(selector)

    • 找后代:$().find("selector")

  • 找兄弟

    • 上面的兄弟:$().prev(selector)/prevAll(selector)

    • 下面的兄弟:$().next(selector)/nextAll(selector)

    • 所有的兄弟:$().siblings(selector)

4.2.2 创建节点

  • 语法:$("节点")

     //1.创建节点
    var $li = $("<li>我是内容</li>");
    console.log($li);

4.2.3 添加节点

  • 追加节点

    • 语法1:$(父节点).append(子节点)

    • 语法2:$(子节点).appendTo(父节点)

      //2.追加:在父元素末尾添加
      //语法1:$(父节点).append(子节点)
      $("ul").append($li); //添加已经创建好的标签
      $("ul").append("<li>iphone13</li>"); //直接添加字符串形式的标签
      ​
      //语法2:$(子节点).appendTo(父节点)
      $("<li>华为保时捷</li>").appendTo("ul");
  • 前置:在父元素的头部添加

    • $("父元素").prepend(“子元素”)

    • $("子元素”).prependTo(“父元素”)

      //2.前置添加:父元素的头部
      $("input").keydown(function(ev){
          if(ev.keyCode == 13){
              //2.1 $("父节点").prepend("子节点")
              $("ul").prepend("<li>"+$("input").val()+"</li>");
      
              //2.2 $("子节点").prepend("父节点")
              $("<li>"+$("input").val()+"</li>").prependTo("ul");
          }
      });
  • 插入:在某个元素之前

    • $("参考元素").before(“新元素”)

    • $(“新元素”).insertBefore("参考元素")

      //3.插入:在某个元素之前插入
      //3.1 $("参考节点").before("新节点");
      $("li:eq(3)").before("<li>总结、复习</li>");
      
      //3.2 $("新节点").insertBefore("参考节点")
      $("<li>总结、复习</li>").insertBefore("li:eq(3)");
  • 插入:在某个元素之后

    • $("参考元素").after(“新元素”)

    • $(“新元素”).insertAfter("参考元素")

      //3.插入:在某个元素之后插入
      //3.1 $("参考节点").after("新节点");
      $("li:eq(3)").after("<li>总结、复习</li>");
      
      //3.2 $("新节点").insertAfter("参考节点")
      $("<li>总结、复习</li>").insertAfter("li:eq(3)");

4.2.4 删除节点

  • $().detach():删除元素,返回被删除元素的引用,方便下次使用,保留事件

  • $().remove():删除元素,返回被删除元素的引用,方便下次使用,不保留事件

  • $().empty():清空子元素

    $("li").click(function(){alert(this)});
    
    // $().detach():删除元素,返回被删除元素的引用,方便下次使用,保留事件
    $("button:eq(0)").click(function(){
        var detLi = $("li").detach();
    
        setTimeout(function(){
            $("ul").append(detLi);
        },500);
    })
    
    //$().remove():删除元素,返回被删除元素的引用,方便下次使用,不保留事件
    $("button:eq(1)").click(function(){
        var detLi = $("li").remove();
        setTimeout(function(){
            $("ul").append(detLi);
        },500);
    });
    
    $("ul").empty();
    

4.2.5 替换节点

//1.替换
//$("被替换的节点").replaceWith("替换的")
$("li:last").replaceWith("<li>下班</li>");

//$("替换的").replaceAll("被替换的")
$("<li>工作</li>").replaceAll("li:eq(4)");

4.2.6 复制节点

//2.复制
$("li:first").click(function(){alert("开心")})
$("li:first").clone(false).appendTo("ul");  //复制标签
$("li:first").clone(true).appendTo("ul");  //复制标签和js中的事件

5.事件

5.1 事件对象

  • 原生js: window.event:事件对象,事件触发时浏览器会将事件相关的信息存储的事件对象中 var ev = window.event || eve

  • jQ 直接通过事件处理函数的第一个参数传入(不需要兼容)

    /*原生js:
    	事件对象:event,事件发生时浏览器将所有和事件相关的信息存储在事件对象中 
    	事件处理函数:事件发生时调用的函数
    	事件对象的属性:
    		type:事件类型
    		target||srcElement : 事件目标
    		clientX+clientY : 鼠标位置
    jQuery的事件对象
    	事件对象:从事件处理函数的第一个参数传入
    */
    $(document).click(function(ev){ //从事件处理函数的第一个参数传入  jq处理过的
        console.log(ev); //jQ处理过的事件对象
        console.log(ev.originalEvent); //原生事件对象
    
        console.log(ev.type); //事件类型
        console.log(ev.target); //事件目标
        console.log(ev.clientX); //鼠标位置
    });

5.2 DOM事件流

  • DOM事件流:事件发生时的执行过程

    • 事件捕获机制:事件发生的时候先从window开始,依次向子元素传递,一直到目标元素(从外到内传递)

    • 事件冒泡机制:目标元素处理事件,将事件依次传递给父元素,如果父元素也有对应类型的事件也会触发,一直传递到window(从里到外传递)

  • 阻止事件冒泡:

原生:event.stopPropagation ? event.stopPropagation():event.cancelBubble=true;

jQ: ev.stopPropagation(); return false

/* 
  原生js阻止事件冒泡:
     ev.stopPropagation : ev.stopPropagation() ? ev.cancelBubble = true
  jQ阻止事件冒泡:
     ev.stopPropagation()
*/
$("button").click(function(event){
    console.log("button被点击了");
    event.stopPropagation();
})
  • 阻止事件默认行为

原生:return false event.preventDefault?event.preventDefault():event.returnValue = false;

jQ: return false event.preventDefault();

/* 
   原生阻止默认行为    
      return false
      ev.preventDefault?ev.preventDefault():ev.returnValue = false
   jQ:
      return false:  阻止事件默认行为,阻止冒泡
      ev.preventDefault()
*/
$("a").click(function(event){
    return false;
    event.preventDefault();
})

5.3 事件绑定

5.3.1 原生js

  • 解决问题:给一个标签添加相同事件,后面的会覆盖前面的

    • 标准浏览器:标签.addEventListener(事件类型(不加on),事件处理函数)

    • IE浏览器:标签.attachEvent(事件类型(加on),事件处理函数)

    if(标签.addEventListene){
        标签.addEventListener(事件类型(不加on),事件处理函数)
    }else{
        标签.attachEvent(事件类型(加on),事件处理函数)
    }
    
    
    
    if(标签.removeEventListene){
        标签.removeEventListene(事件类型(不加on),事件处理函数)
    }else{
        标签.detachEvent(事件类型(加on),事件处理函数)
    }

5.3.2 jQ

  • jQuery事件绑定

    jQ添加事件
     	普通添加:$().事件名()
    	绑定:  $().on(事件类型,事件处理函数)
    //1.基本绑定,给一个标签添加多个相同事件
    $("div").on("click",fun1);
    $("div").on("click",fun2);
    
    
    //2.给一个标签的多个事件添加同样的处理函数
    $("div").on("click mouseover",fun1);
    
    //3.批量添加事件
    $("div").on({
       "click":fun1,
       "mouseover":fun2
    });
    
    //4.使用命名空间
    //开发一个大型网站,使用了大量的第三方框架,命名冲突,就可以使用命名空间
    // var index = {};
    // index.name = "fd";
    // var detail = {};
    // detail.name = "teail";
    
    $("div").on("click.login",fun1);
    $("div").on("click.jump",fun2);
    
    
    //5.自定义事件
    $("div").on("sleep",fun1);
    setTimeout(function(){
        $("div").trigger("sleep");
    },1000);
  • 事件代理

    • 原理:事件代理:将事件添加给父元素,子元素发生事件的时候,会通过事件冒泡将事件传递给父元素,在事件处理函数中,找到具体的子元素去处理事件

      好处:提高效率,节约性能,事件可以发生在未来

    • 原生js实现

      var oUl = document.getElementsByTagName("ul")[0];
      oUl.onclick = function(ev){
          var ev = window.event || ev;
          var target = ev.target || ev.srcElement; //找到具体的子元素去触发事件
          target.style.background = "red";
      }
      oUl.innerHTML += "<li>1111</li>";
    • jQ实现

       //jQ事件绑定:$(父元素).on(事件类型,"子元素",事件处理函数)
      $("ul").on("click","li",function(){
          console.log(this); //this就是触发事件的子元素
          $(this).css("background","red").siblings().css("background","");
      });
      $("ul").append("<li>222222</li>")

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值