jQuery（三）—节点操作和元素尺寸

jQuery节点操作和元素尺寸

节点操作

创建、追加元素

• $（）直接传入想要创建的节点

  var $newli = $("<li>这是一个新的li标签</li>")
  

• 追加元素1（给父元素内部追加）

   $ul.append($newli);//在父元素最后追加
   $newli.prependTo($ul);//在父元素最前面追加
   $newli.appendTo("ul");
  

• 追加元素2（给兄弟元素追加）,一般是多个标签存在给确定样式的某个元素的前或后面添加

   $old.after($newli);      $newli.insertAfter($old);
   $old.before($newli);     $newli.insertBefore($old);
  

删除、清空元素

• 想要删除对象.remove（）方法

   $(".old").remove();
  

• 清空方法1：.empty（）清空内部所有元素及元素相关的事件

   $(".box").empty();
  

• 清空方法2：.html(’ ') 仅仅清空内部元素，不清理内存中元素的事件

   $(".box").html("");
  

克隆元素

• jQuery对象.clone（布尔值）,返回克隆好的元素，默认false表示仅仅克隆内容，true表示克隆内容和事件

   var $new = $("box").clone(true);
  

元素尺寸

• width（）和height（）获取到 底之后内容部分

  console.log($(".box").width()); //200
  

• innerWidth（）和innerHeight（）得到内容+padding部分

  console.log($(".box").innerHeight()); //200+50+50
  //传入参数设置的时候，将数值是添加给width的部分
  

• outerWidth和outerHeight得到内容+padding+border

  console.log($(".box").outerWidth()); //200+50+50+20+20
  

操作元素位置

• offset（）方法用来获取元素距离文档的位置，得到一个对象数值，与父级的定位位置没有关系

• position（）方法距离上级定位参考元素的位置，参照最近的定位元素

• 滚动条卷走距离

  • 设置滚动事件，调用scrollTop（）方法来获取卷去的页面间距

  • 返回顶部按钮案例

    $(".backtop").click(function() 
    {   $(document).scrollTop(0); })
    

案例练习

固定导航

• 通过scrollTop来获取滚动高度，和box2的offset中top属性进行对比，如果小于则添加黏着属性

   var v1 = $box2.offset().top;
     // 给整个文档添加一个点击事件
   $(document).scroll(function() {
       var v2 = $(this).scrollTop();
       // 如果小于就固定
       if (v2 >= v1) {   
       $box2.addClass("active");  $backtop.show(); }
       else {
       $box2.removeClass("active"); $backtop.hide(); }
   })
  

返回顶部

• 返回顶部效果可以通过动画实现

  $backtop.click(function() {
  // 让页面滚动到顶部，滚动的元素要选择html和body，直接使用document是没有属性的
      $("html,body").animate({   "scrollTop": 0}, 500);
  })
  

楼梯导航

• 通过每个高度获取进行不断判断样式的添加
• 再加上点击事件让页面的滚动距离发生改变

jQuery事件操作和插件

on方法

注册事件

• 封装的底层实际是addEventLister（）方法

  • .on（“事件名”，事件处理程序）

  • 可以添加多个事件不会被覆盖

    $("input").on("click", function() { alert(2);  })
    

事件委托

• .on（“事件名”，“选择器”，事件处理程序）

  • 选择器：子孙元素，this代表的是子孙元素

  • 在事件委托过程中，事件函数内部this不是指向事件源，而是指向触发事件的委托子元素

     $("ul").on("click", " li", function() 
           {  console.log($(this).text()) })
    

off方法

解除绑定

• .off（“事件名”，事件处理程序）

  • $("input").off("click", fun1)
    

解绑事件委托

• .off（“事件名”，“选择器”，事件处理程序）

  • $("ul").off("click", " li", fn1)
    

trigger方法

• 自动触发事件，模拟事件被触发状态，轮播图在没有右按钮按下的情况下，可以自动执行右按钮事件

  function auto() { $(".arrow-right").trigger("click");   }
  

事件对象

• 事件处理程序的第一个形参e
• 鼠标事件对象属性
  • clientX/Y参照浏览器
  • pageX/Y参照文档
  • offsetX/Y参照元素
• 键盘事件对象属性
  • keyCode 返回键码数字
  • altKey/shiftKey/ctrlKey返回布尔值，判断键是否被按下
• 公共属性和方法
  • target：最初触发事件的DOM元素
  • current Target在事件冒泡阶段中的当前DOM元素
  • preventDefault（）阻止默认行为
  • stopPropagation（）阻止事件冒泡

多库共存问题

• 引用多个库中标识符$冲突问题

  • 用jQuery代替$

  • jQuery库释放$符合的使用权，用其他简单的符号代替

    var $1 = jQuery.noConflict();//将$含义标识符给别的符号
    console.log($1);//ƒ (a,b){return new n.fn.init(a,b)}
    

jQuery插件

找到并下载插件—>项目外写一个demo—>看源码文档

• 获取插件方法
  • 百度搜索，GitHub搜索
  • 看技术文章、和别人交流
  • jQuery插件库之家（http.htmleaf.com）
• 放大镜插件
• 轮播图插件

插件棒呆~