1.1 复习jQuery操作DOM
jQuery课程的目标:学会使用jQuery设计常见效果
选择器
基本选择器:#id 、.class 、element、* 、
层级选择器: 空格、>、+、~
基本过滤选择器::first、:last、:eq(index)、:lt(index)、:gt(index)、:odd、:even
筛选选择器:.eq(index)、.children()、.parent()、.siblings()、.find()
动画:show、hide、fadeIn、fadeOut、fadeTo、slideDown、slideUp、slideToggle
animate
DOM操作:.css()、addClass(“className”)、removeClass()、toggleClass
.attr()、removeAttr()、.val()、.html(“<p></p>”)、text()
node.append(“<p>我是追加的内容</p>”)、prePend()
1.2 元素操作
1.2.1 高度和宽度
$(“div”).height(); // 高度
$(“div”).width(); // 宽度
.height()方法和.css(“height”)的区别:
1. 返回值不同,.height()方法返回的是 数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数学计算的时候
1.2.2 坐标值
$(“div”).offset(); // 获取或设置坐标值 设置值后变成相对定位
$(“div”).position(); // 获取坐标值 子绝父相 只能读取不能设置
1.2.3 滚动条(滚动事件)
$(“div”).scrollTop(); // 相对于滚动条顶部的偏移
$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移
案例:两次跟随的广告
案例:防腾讯固定导航栏
1.3 jQuery事件
1.3.1 绑定
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(){});
1.3.2 解绑
unbind、undelegate
off
1.3.3 触发
click : $(“div”).click();
trigger:触发事件,并且触发浏览器默认行为
triggerHandler:不触发浏览器默认行为
1.4 jQuery事件对象介绍
event.stopPropagation() //阻止事件冒泡
event.preventDefault(); //阻止默认行为