jQuery 第三部分 2018-03-16

2018-03-18 本文已影响0人多佳小昕

一、操作元素

宽高

$(“div”).height(); // 高度
$(“div”).width(); // 宽度
.height()方法和.css(“height”)的区别：返回值不同
.height()方法返回的是数字类型(20)，
.css(“height”)返回的是字符串类型(20px)，
因此.height()方法常用在参与数学计算的时候

坐标值
$(“div”).offset(); // 获取或设置坐标值！设置值后变成相对定位！（在position没有设置值的情况下）
$(“div”).position(); // 获取坐标值子绝父相不能设置只能读取！
滚动条（滚动事件）
$(“div”).scrollTop(); // 相对于滚动条顶部的偏移
$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移

案例：两侧跟随的广告

 $(window).scroll(function(){
            var docScrollTop = $(document).scrollTop();
            // console.log(docScrollTop);
            $(".main").animate({"top":docScrollTop+80},50);
          });

案例：固定导航栏

 var topHeight = $(".top").height();
            $(window).scroll(function(){
                var docScrollTop = $(document).scrollTop();
                //文档被卷去的高度大于或者等于top高度的时候，变成固定定位
                if(docScrollTop >= topHeight) {
                    $(".nav").css({
                        "position":"fixed",
                        "top":0
                    });
                    $(".main").css("margin-top",$(".nav").height()+20+"px");
                }
                // 否则变成static定位
                else {
                    $(".nav").css({
                        "position":"static"
                    });
                    $(".main").css("margin-top","20px");
                }
            });

二、事件分析

绑定事件
click/mouseenter/blur/keyup // 绑定事件
bind：$node.bind(“click”,function(){}); // 触发一次
one : $node.one(“click”,function(){});
delegate : $node.delegate(“p”,”click”,function(){});
on： $node.on(“click”,”p”,function(){});

    //2
        // $(function(){
        //   $("button").bind("click mouseenter",function(){
        //     alert("www");
        //    })
        // });
    //2
        //  $(function(){
        //   $("button").bind({
        //     "click":function(){
        //       alert("1");
        //     },
        //     "mouseenter":function(){
        //       alert("2");
        //     }
        //   })
        // });
    //传递数据
        // $(function(){
        //   $("button").bind("click",{aa:true},function(e){
        //     alert(e.data.aa);
        //   });
        // });
    // one  只触发一次
       // $(function(){
       //    $("button").one("click",function(){
       //      alert("one");
       //    });
       //  });
    //绑定
       // $(function(){
       //    $("li").bind("click",function(){
       //      alert($(this).html());
       //    }
       // });
    //delegate
       // $(function(){
       //  $("ul").delegate("li","click",function(){
       //    alert($(this).html());
       //  });
       // });
    //on强烈推荐
        $(function(){
        $("ul").on("click","li",function(){
          alert($(this).html());
        });
       });

解绑事件
unbind undelegate off

$(function(){
        $("ul").on("click mouseenter","li",function(){
          alert($(this).html());
        });
        $("ul").off("mouseenter");
       });

触发事件
click : $(“div”).click();
trigger：触发事件，并且触发浏览器默认行为
triggerHandler：不触发浏览器默认行为

$("#btnSub").click(function(){
            var txtName = $("#txtName").val();
            if(txtName === "1"){
              alert("提交");
            }else {
              // $("#txtName").val("").triggerHandler("focus");
              $("#txtName").val("").trigger("focus");
            }
          })
          $("#btntrr").bind("click",function(){
            // $("#btnSub").trigger("click");
            $("#btnSub").triggerHandler("click");
          })

事件对象介绍

event.stopPropagation() //阻止事件冒泡
event.preventDefault(); //阻止默认行为

$(function(){
          $(".link").on("click",function(e){
            e.preventDefault(); //阻止事件默认行为
            e.stopPropagation();
            console.log(e.type);

          });
          $(".box").on("click",function(e){
            alert("父盒子被点击了")
          })
        })

event.keycode //获取键盘的按钮

$(window).click(function(e){
           console.log(e.which); //鼠标左1中2右3
         }).keydown(function(e){
           console.log(e.keyCode);
         })
       })

event.target事件触发源，不一定===this。
例如event.target===this判断是否触发事件是本身
event.currentTarget 事件响应方法中=this，当前dom对象
event.data传递的额外事件响应方法的额外参数

三、事件补充

animate动画：不支持背景的动画效果
animate动画支持的属性列表
在线文档：
w3school：http://www.w3school.com.cn/jquery/index.asp
jQuery官网：http://jquery.com/
$()的几种常用用法：
1.$(“#id”) 选择某个元素，返回值为jQuery对象
2.$(this) 将DOM对象转换成jQuery对象
3.$(“<div></div>”) 创建元素，返回值为jQuery对象
4.$(function(){}); 入口函数的简写方式
$("div").html() 获取内容的时候，只返回匹配到的第一个元素的数据
链式编程问题：
$("div").html() 后面就不能继续链式了？
为什么？函数返回值问题！

案例五角星链式编程
end()可以取消链式的断开。结束当前这个方法

$(function(){
         var star = "★";
         var kong = "☆";
         // 链式编程，这种方法就是断掉了。
         // $(this).text(star).prevAll().text(star);
           // $(this).nextAll().text(kong);  
         $(".comment").on("mouseenter","li",function(){
           $(this).text(star).prevAll().text(star).end().nextAll().text(kong);
          }).on("click","li",function(){
           $(this).addClass("clicked").siblings().removeClass("clicked");
          }).on("mouseleave",function(){
           $(".comment li").text(kong);
           //鼠标移开时，要先把没被点击的标签，设置为空
           $(".clicked").text(star).prevAll().text(star).end().nextAll().text(kong);
          })
       })

map返回数组(了解)

      $(function(){
         //全局的map函数参数和jq对象的函数参数是相反的
         //  var arr = $.map($("li"),function(e,index){
         //   return index;
         // });
          var arr2 = $("li").map(function(index,e){
           console.log(index);
           return index;
          })
     });

each函数（和map相似）
$node.each(function(index,element){});

        // $("li").each(function(index,e){
        //  var t = $(e).text();
        //  $(e).text(t+index);
        // })
         $.each($("li"),function(index,e){
           var t = $(e).text();
           $(e).text(t+index);
         })

$.each([1,2,3,5,6,7], function (i,v) {
   console.log(i + " : " + v);
});

隐式迭代
选择器选择的数组后面的方法会实现数组中每个标签！
如果获取多元素的值，默认返回第一个元素的值。
处理全局$冲突
市面上框架很少用 $；
如果命名冲突，jq对象会把其他$对象替代
使用 $.noConflict();让jQuery释放$ ，让$回归到jq之前的对象定义上去。
如果还想沿用，可以var JQ = $.noConflict(); 用JQ替代$ jq可以替换成任何字符串
jjQuery也可以。
数据缓存
$(“div”).data(“index”); // 获取数据index的值
html里面的data 属性，例如： data-ROLE，jQuery获取的时候用： $(“div”).data(“role”);；
设置data属性的时候，例如： $(“div”).data(“UPCASE”,123);，获取的时候使用：$(“div”).data(“UPCASE”);；

<div data-role="page" data-last-value="43" data-hidden="true"  data-options='{"name":"John"}'>注意HTML属性不区分大小写</div>

$( "div" ).data( "lastValue" ) === 43;
lastValue -> data-last-value

data()跟.attr() 方法的区别：

1. 获取数据的时候，attr方法需要传入参数，data方法可以不传入参数，这时候获取到的是一个js对象，即使没有任何data属性。
1. 获取到的数据类型不同，attr方法获取到的数据类型是字符串(String)，data方法获取到的是相应的类型。
1. data方法获取到数据之后，我们使用一个对象来接收它，那么就可以直接操作(设置值或获取值)这个对象，而attr方法不可以；并且通过这种方式，要比.data(key,value)的方式更高效！
1. data-attribute属性会在页面初始化的时候放到jQuery对象，被缓存起来，而attr方法不会。

Query优势：
1.书写简洁、代码优雅
2.Write Less，Do More
3.强大的选择器，支持CSS1-3所有的选择器
4.浏览器兼容性好，兼容IE6、7、8
5.统一的入口，降低了学习、记忆成本
6.强大的动画效果、事件支持
7.开源、免费
8.插件丰富，可扩展性强

四、jQuery插件

全局jq函数扩展方法

$.log = function(){
         console.log(new Date());
        }
        $.log();

扩展一个普通的jq对象方法

 $.fn.log = function(){
          console.log($(this).text());
         }
         $(function(){
          $("div").log();
         });

第三方插件

颜色插件
引入插件之后：

$(function(){
           $(".box").animate({
            backgroundColor:"white"},2000)
         });

延迟加载插件
鼠标滚动到某处才会加载内容，提高效率
<img class="lan" data-original="a.jpg" width="100" height="150">

$(function(){
           $(".lan").lazyload();
         });

自定义选择器：

jQuery.extend(jQuery.expr[':'], {
        "class-itcast": function(ele) {
        return jQuery(ele).hasClass("itcast");
        }
});
$(":class-itcast").css("background","pink");

jQueryUI

第三方
（npm包管理工具了解一下）
引入js和css的库和样式，照着人家demo写

jQuery 第三部分 2018-03-16

一、操作元素

二、事件分析

三、事件补充

四、jQuery插件

jQueryUI

猜你喜欢

热点阅读