Jquery之路(一) 笔记

听过好多次,看过好多次,看得明,用不习惯,下定决心,弄懂你

jquery是 js库 让html 和 css和JavaScript脚本代码完全 减少页面逻辑耦合的好帮手

核心

jQuery 选择器 http://www.runoob.com/jquery/jquery-selectors.html

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

$(this).hide() - 隐藏当前元素 this:当前元素

$("p").hide() - 隐藏所有段落 "P" html 元素

$("p .test").hide() - 隐藏所有 class="test" 的段落 .class

$("#test").hide() - 隐藏所有 id="test" 的元素 #id

语法	描述	实例
$("*")	选取所有元素	在线实例
$(this)	选取当前 HTML 元素	在线实例
$("p.intro")	选取 class 为 intro 的 <p> 元素	在线实例
$("p:first")	选取第一个 <p> 元素	在线实例
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素	在线实例
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素	在线实例
$("[href]")	选取带有 href 属性的元素	在线实例
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素	在线实例
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素	在线实例
$(":button")	选取所有 type="button" 的 <input> 元素 和 <button> 元素	在线实例
$("tr:even")	选取偶数位置的 <tr> 元素	在线实例
$("tr:odd")	选取奇数位置的 <tr> 元素	在线实例

jQuery 事件 http://www.runoob.com/jquery/jquery-events.html

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
// action goes here!!
});

jQuery 效果- 隐藏和显示 http://www.runoob.com/jquery/jquery-hide-show.html

jQuery hide() 隐藏 和 show() 显示 和 toggle() 隐藏/显示

语法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

speed: "slow","fast",1000(毫秒)

callback:函数 function

jQuery 效果 - 淡入淡出 http://www.runoob.com/jquery/jquery-fade.html

jQuery 拥有下面四种 fade 方法：

fadeIn() 用于淡入已隐藏的元素。

fadeOut() 用于淡出已隐藏的元素。

fadeToggle() 用于淡入/淡出已隐藏的元素。

fadeTo() 用于渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeIn(speed,callback);

speed: "slow","fast",1000(毫秒)

callback:函数 function

jQuery 效果 - 滑动 http://www.runoob.com/jquery/jquery-slide.html

jQuery 拥有以下滑动方法：

slideDown() 方法用于向下滑动元素。

slideUp() 方法用于向上滑动元素。

slideToggle() 方法用于向下/向上滑动元素。

$(selector).slideDown(speed,callback);

speed: "slow","fast",1000(毫秒)
callback:函数 function

jQuery - Chaining http://www.runoob.com/jquery/jquery-chaining.html

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示： 这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

实例

$("#p1").css("color","red").slideUp(2000).slideDown(2000);