jQuery基础整理----学习笔记
常见 DOM 事件：
|
鼠标事件 |
键盘事件 |
表单事件 |
文档/窗口事件 |
|
Click（点击） |
Keypress（键盘按压） |
Submit（表单提交） |
Load（已加载） |
|
Dblclick（双击） |
Keydown（键盘按时） |
Change（表单被修改） |
Resize（改变视窗大小时） |
|
Mouseenter(浮动进入) |
Keyup（键盘起时） |
Focus(获得焦点) |
Scroll（滑轮滚动） |
|
Mouseleave（浮动离开） |
|
Blur（失去焦点） |
Unload（未加载） |
|
Mousedown（鼠标按下） |
|
|
|
|
Mouseup(鼠标抬起) |
|
|
|
|
Hover(fun enter(){},fun leave(){}) |
|
|
|
----------------------------------------------------------------------------------------------
jQuery 效果
jQuery 隐藏/显示
hide(speed)/show(speed)
Toggle(speed) //切换隐藏显示
例：$("button").click(function(){ $("p").toggle(); });
jQuery 淡入淡出
fadeIn(speed, function)
fadeOut(speed, function)
fadeToggle(speed, function) //切换
fadeTo(speed, opacity,function) //opacity目标透明度
jQuery 滑动
- slideDown(speed, function)
- slideUp(speed, function)
- slideToggle(speed, function) //切换
jQuery 动画
animate()方法 $(selector).animate({css属性高},speed,function);
例：$("button").click(function(){ //多属性的动画变动
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px' });
});
例：jQuery animate() - 使用相对值
$("button").click(function(){ $("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px' });
});
jQuery 停止动画
stop() 方法
jQuery Callback
Callback（回调）函数在当前动画 100% 完成之后执行。
--------------------------------------------------------------------------------
jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子：$("p").hide("slow")
jQuery 链
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
例子：$("#p1").css("color","red").slideUp(2000).slideDown(2000);
jQuery HTML
jQuery 捕获
获得内容 - text()文本、html()标签元素 以及 val()变量值
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
获取属性 - attr()属性
jQuery attr() 方法用于获取属性值。
jQuery 设置
设置内容 - text()文本、html()标签元素 以及 val()变量值
我们将使用前一章中的三个相同的方法来设置内容：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
设置属性 - attr()属性
jQuery 添加元素
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
jQuery 删除元素
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元
jQuery CSS 类
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
$("p"). css("background-color","yellow")
$("p").css({"background-color":"yellow",
"font-size":"200%"});
jQuery 尺寸
jQuery 提供多个处理尺寸的重要方法：
- width() //设置元素的宽度（不包括内边距和边框）
- height() //设置元素的高度（不包括内边距和边框）
- innerWidth() //返回元素的宽度（包括内边距）
- innerHeight() //返回元素的高度（包括内边距）
- outerWidth() //返回元素的宽度（包括内边距和边框）。
- outerHeight() //返回元素的高度（包括内边距和边框）。
jQuery 遍历
jQuery 遍历
jQuery 祖先
向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
- parent() //被选择元素的直接父辈元素
- parents() //被选择元素的所有父辈元素 例$("span").parents("ul");
- parentsUntil() //两元素之间$("span").parentsUntil("div");
jQuery 后代
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
- children() //直接子元素
- find() // 所有子元素
jQuery 同胞
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
- siblings() //返回被选元素所有同胞元素
- next() //返回被选元素的下一个紧邻通报元素
- nextAll() //返回被选元素下面的所有同胞元素
- nextUntil() //返回被选元素到指定标签之间的同胞元素
- prev() //返回被选元素的上一个紧邻通报元素
- prevAll() //返回被选元素上面的所有同胞元素
- prevUntil() //返回被选元素与指定标签之间的同胞元素
jQuery 过滤
三个最基本的过滤方法是：
first() //被选元素的第一个
last() //被选元素的最后一个
eq() //带有特定索引的元素 索引从0开始 例：eq(1)
jQuery Ajax
jQuery AJAX 简介
jQuery load()方法
jQuery get()/post() 方法
jQuery 其他
jQuery noConflict()
var jq=$.noConflict();
方法 jQuery JSONP
