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 方法。
页面中指定一个点击事件:
下一步是定义什么时间触发事件。您可以通过一个事件函数实现:
// 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);
jQuery 效果 - 淡入淡出 http://www.runoob.com/jquery/jquery-fade.html
jQuery 拥有下面四种 fade 方法:
- fadeIn() 用于淡入已隐藏的元素。
- fadeOut() 用于淡出已隐藏的元素。
- fadeToggle() 用于淡入/淡出已隐藏的元素。
- fadeTo() 用于渐变为给定的不透明度(值介于 0 与 1 之间)。
jQuery 效果 - 滑动 http://www.runoob.com/jquery/jquery-slide.html
jQuery 拥有以下滑动方法:
- slideDown() 方法用于向下滑动元素。
- slideUp() 方法用于向上滑动元素。
- slideToggle() 方法用于向下/向上滑动元素。
$(selector).slideDown(speed,callback);
callback:函数 function
jQuery - Chaining http://www.runoob.com/jquery/jquery-chaining.html
通过 jQuery,可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。
不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
提示: 这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动:
实例