jQuery 基础（一）

jQuery

1、简介：
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，

优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:
具有独特的链式语法和短小清晰的多功能接口;
具有高效灵活的css选择器，并且可对CSS选择器进行扩展;
拥有便捷的插件扩展机制和丰富的插件
jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

2、 dom和jquery对象

a) 名称

jQuery和$

用$找出来的对象叫jQuery对象
用document找出来的对象叫Dom对象

    b) dom和jquery对象转换
jQuery对象.get(0) --->dom对象
$(dom对象)--->jQuery对象

3、jQuery作用：
a. HTML元素获取
        b. HTML元素操作
        c. CSS操作
        d. HTML事件函数
        e. javascrip特效与动画
        f. HTML DOM遍历和修改
        g. AJAX
        h. Utilities

4、小功能：
去首尾空格: $.trim(字符串)
.size() 找到多少个对象 $("div").size()

5、加载顺序，在文档加载完之后
$(document).ready(function(){
            ---代码-----
});
             简单的例子：
$(document).ready(function(){
alert("哈哈")；
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。

7、jQuery 事件 下面是 jQuery 中事件方法的一些例子：

Event 函数 绑定函数至

.ready() 将函数绑定到文档的就绪事件（当文档完成加载时）

.focus() 触发或将函数绑定到被选元素的获得焦点事件

.blur() 触发、或将函数绑定到指定元素的 blur 事件

.change() 触发、或将函数绑定到指定元素的 change 事件

.click() 触发、或将函数绑定到指定元素的 click 事件

.dblclick() 触发、或将函数绑定到指定元素的 double click 事件

.delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器

.die() 移除所有通过 live() 函数添加的事件处理程序。

.bind() 向匹配元素附加一个或更多事件处理器

.error() 触发、或将函数绑定到指定元素的 error 事件

.live() 为当前或未来的匹配元素添加一个或多个事件处理器

.load() 触发、或将函数绑定到指定元素的 load 事件

浏览器事件：

.event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。

.event.pageX 相对于文档左边缘的鼠标位置。

.event.pageY 相对于文档上边缘的鼠标位置。

.event.preventDefault() 阻止事件的默认动作。

.event.result 包含由被指定事件触发的事件处理器返回的最后一个值。

.event.target 触发该事件的 DOM 元素。

.event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。

.event.type 描述事件的类型。

.event.which 指示按了哪个键或按钮。

键盘事件：

.keydown() 触发、或将函数绑定到指定元素的 key down 事件

.keypress() 触发、或将函数绑定到指定元素的 key press 事件

.keyup() 触发、或将函数绑定到指定元素的 key up 事件

鼠标事件：

.mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件

.mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件

.mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件

.mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件

.mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件

.mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件

.mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件

.one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

.resize() 触发、或将函数绑定到指定元素的 resize 事件

.scroll() 触发、或将函数绑定到指定元素的 scroll 事件

.select() 触发、或将函数绑定到指定元素的 select 事件

.submit() 触发、或将函数绑定到指定元素的 submit 事件

.toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。

.trigger() 所有匹配元素的指定事件

.triggerHandler() 第一个被匹配元素的指定事件

.unbind() 从匹配元素移除一个被添加的事件处理器

.undelegate() 从匹配元素移除一个被添加的事件处理器，现在或将来

.unload() 触发、或将函数绑定到指定元素的 unload 事件

8、javascrip特效与动画

隐藏
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落即标签选择器
$(".test").hide() - 隐藏所有 class="test" 的所有元素即类选择器
$("#test").hide() - 隐藏所有 id="test" 的元素即id选择器

a、隐藏、显示效果：

jQuery hide() 和 show()
通过 jQuery，可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});

隐藏、显示可以加上速度：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

b、切换效果：
jQuery toggle()
通过 jQuery，可以使用 toggle() 方法来切换 hide() 和 show() 方法。
初始是显示的点一下隐藏再点一下显示
显示被隐藏的元素，并隐藏已显示的元素：
实例：
$("button").click(function(){
$("p").toggle();
});

c、淡入淡出效果：
jQuery Fading 方法
jQuery 拥有下面四种 fade 方法：

            1、fadeIn() 用于淡入已隐藏的元素。
                  语法：
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

2、fadeOut() 用于淡出可见元素。
                 语法：
   $(selector).fadeOut(speed,callback);
   可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
   可选的 callback 参数是 fading 完成后所执行的函数名称。

3、fadeToggle() 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
               语法：
   $(selector).fadeToggle(speed,callback);
   可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
   可选的 callback 参数是 fading 完成后所执行的函数名称。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

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

                语法：$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

d、滑动效果
jQuery 滑动方法

        slideDown() 用于向下滑动元素。
slideUp()          用于向上滑动元素

slideToggle() 用于切换向上、向下滑动元素

随手整理后续会有补充。。

6、显示、隐藏
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落即标签选择器
$(".test").hide() - 隐藏所有 class="test" 的所有元素即类选择器
$("#test").hide() - 隐藏所有 id="test" 的元素即id选择器

猜你喜欢