jquery学习(第三天)

高度和宽度

$(“div”).height();
$(“div”).width();

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

坐标值

$(“div”).offset(); // 获取或设置坐标值 **设置值后变成相对定位**
$(“div”).position(); // 获取坐标值 子绝父相 **只能读取不能设置**

固定导航栏(监听scroll)

两侧跟随广告

绑定事件

• bind 可以绑定一个及以上 中间用空格隔开

  • 可以传两个参数也可以传三个参数 三个参数时中间的值就是函数获取的值
    $("button").bind("click mouserenter",function(){ alert(111); });

• one 单次绑定事件

• delegate（委托）绑定方式，可以提高性能

• on 事件（就使用它）

$("div").on("click","p",function(){
     alert(111);
});

第一个参数：触发什么事件
第二个参数：为哪个元素触发事件
第三个参数：处理函数

事件解绑（一一对应）

• unbind
• undelegate
• off

触发事件（提交时校验信息合法性）

image.png

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

jquery事件对象（重点event=e）

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

会做jQuery插件

• 全局jQuery函数扩展方法

 $.log = function() {
        
     }

     //$("li")
 

• jQuery扩展方法

 $.fn.log = function() {
        
    }
 

引入第三方插件

• 背景色插件方法
• lazyload 插件
• jQuery UI 插件

用法很简单：
第一步：引入必要的包
第二步： 实现

安装包管理工具

bower install jquery.lazyload
nmp install jquery-lazyload注意使用nmp的时候需要安装nodejs在pc上

sublime 装插件

• sublime 3
• 第一步： 装上sublime的包管理器package control
• ctrl+ ~
• 上网把 按照package control的那段代码，粘贴一下，然后回车。
• 第二步：使用Ctrl + shift + p