Jquery UI的小zongji

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();  //阻止默认行为