jquery的一些事件操作

1.高度和宽度的 操作

css获取的方法 $("div").css("height" ,"300px")

jq的获取方法 $("div").height(300)

这两个的区别： css的获取的高度是字符串 带px的 而jq的方法是数字 不带px

2.坐标值

offset： 可以直接获得他的left和top坐标 是图片左上角对于网页的左上角的坐标

position：相对于父元素上部的坐标

设置offset的坐标值： 直接用input 或者label 里面嵌套input 然后在jq里面用一个变量获取input的值

当你设置了offste的时候那么他的position会变成相对定位

.3.仿腾讯固定栏

1.可以利用offset得到他的距定点的坐标 也可以利用 一个一个计算的方式来得到它的竖直高度

2.判断鼠标滚动的距离和导航栏顶部的距离大于或者小于 小于的时候就恢复默认的状态

position：static 还有margintop也要归零

4.两栏跟随的广告

1.和上一个案例差不多 第一步都是监听浏览器滚动的距离 $(windown).scroll(function(

var docScrollTop = $(document).scrollTop

){})

2.利用动画效果 就是animate（{“top” ：docScrollTop+80} ， 300）

5.JQuery事件

绑定事件

bind（）—— 同时绑定两个事件 格式： bind（click mouseenter ，function（）{}）或者 用对象的方式

delegate（）——通过父元素 然后绑定子元素事件 格式 ： $("父元素").delegate("资源数","事件","事件函数“)

on（）————通过父元素 然后绑定子元素事件 格式 ： $("父元素").on("事件","子元素","事件函数“)

解绑事件

on的解绑事件是off

bind的解绑事件是unbind

delegate的解绑事件是undelegate

鼠标跟随事件

$ ( function (){

$ ( document ). on ( "mousemove" , function (e){

$ ( "img" ). css ({

"position" : "absolute" ,

"top" : e. pageY ,

"left" :e. pageX

})

})

})

这就是他的全部代码 首先要把 定位变成absolute 然后top和 left都变成鼠标的位置 e就是 鼠标当前移动的那个点的位置

event对象

取消默认操作：e.preventDefault();

阻止默认操作：e.stopPropagation();

事件类型： e.type

鼠标类型事件：e.which

事件触发源：e.target 不一定==this

链式编程

五角星案例 ： 当你的链式编程到了末端想回去的时候就直接end()就回到了第一个编程

prevAll（） 前面的兄弟元素 nextAll（）后面的兄弟元素

然后就 给click这个事件的源头给个class 吧其他的兄弟class去掉，最后一步就是给这个class前面的加上五角实心，后面的就是空心

隐式迭代

默认情况下，会自动迭代执行JQuery选择出来的所有dom元素的操作

如果获取的是多个元素的值，就会返回第一个元素的值

each函数的使用

each函数的function接收两个参数 第一个是index 第二个是e 就是元素本身，当你要调用这个元素的方法的时候要$(e).text()

处理全局JQuery的冲突

$.noConflict() 这个就是将JQuery的$符号释放

JQuery 扩展方法

给JQuery全局对象扩展一个方法 $.log = function(){}

扩展一个普通的JQuery方法 $.fn.log =function(){}

引入第三方插件

第一步：引入JQuery

第二部：引入第三方插件

第三部：打代码

a标签的href是链接的功能