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是链接的功能