jQuery学习笔记2

学习网址：http://www.w3school.com.cn/jquery/index.asp

　　　　　http://jquery.com/

jQuery 极大地简化了 JavaScript 编程。

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

jQuery 库 - 特性

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

jQuery 安装

<head>
<script src="jquery.js"></script>
</head>

通过 CDN（内容分发网络）引用:

Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

提示：使用谷歌或微软的 jQuery，有一个很大的优势

许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

jQuery 基础语法

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

文档就绪函数:

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

jQuery 选择器

1.jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

2.jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素

3.jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

$("p").css("background-color","red");

jQuery 事件

1.通常会把 jQuery 代码放到 <head>部分的事件处理方法中.

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

2.如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

3.jQuery 名称冲突

或

4.jQuery 事件

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

.ready() 方法

当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。

ready() 函数规定当 ready 事件发生时执行的代码。

ready() 函数仅能用于当前文档，因此无需选择器。

允许使用以下三种语法：

语法 1: $(document).ready(function)

语法 2: $().ready(function)

语法 3: $(function)

.bind() 方法

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

例：当点击鼠标时，隐藏或显示 p 元素：

$("button").bind("click",function(){
  $("p").slideToggle();
});

语法：$(selector).bind(event,data,function)

替代语法：$(selector).bind({event:function, event:function, ...})

.live() 方法

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

语法：$(selector).live(event,data,function)

例：当点击按钮时，隐藏或显示 p 元素：

$("button").live("click",function(){
  $("p").slideToggle();
});

.blur() 方法

触发 blur 事件，当元素失去焦点时发生 blur 事件。

提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。

例：当输入域失去焦点 (blur) 时改变其颜色：

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});

语法：$(selector).blur(function)

.focus() 方法

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

例：当输入框获得焦点时，改变它的背景色：

$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});

语法：$(selector).focus()

　　　 $(selector).focus(function)

.change() 方法

当元素的值发生改变时，会发生 change 事件。

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

例：当输入域发生变化时改变其颜色

$(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
});

语法：$(selector).change(function)

.click() 方法

当点击元素时，会发生 click 事件。

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

语法：$(selector).click(function)

例：当点击按钮时，隐藏或显示元素：

$("button").click(function(){
  $("p").slideToggle();
});

.dblclick() 方法

当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数

提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

例：当双击按钮时，隐藏或显示元素：

$("button").dblclick(function(){
  $("p").slideToggle();
});

.delegate() 方法

为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

例：当点击鼠标时，隐藏或显示 p 元素：
$("div").delegate("button","click",function(){
$("p").slideToggle();
});

语法:$(selector).delegate(childSelector,event,data,function)

.keydown() 方法

完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。

当按钮被按下时，发生 keydown 事件。

语法:$(selector).keydown(function)　　　　function可选。规定当发生 keydown 事件时运行的函数。

例：当按下按键时，改变文本域的颜色：
$("input").keydown(function(){
  $("input").css("background-color","#FFFFCC");
});

$("#btn1").click(function(){
$("input").keydown();
});

.keyup() 方法

完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。

例：当按下按键时，改变文本域的颜色：

$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});

语法:$(selector).keyup(function)　　function可选。规定当发生 keypress 事件时运行的函数。

.keypress() 方法

keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。

不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。

keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。

语法:$(selector).keypress(function)　　　　function可选。规定当发生 keypress 事件时运行的函数。

例：

$("input").keypress(function(){
$("span").text(i+=1);
});
$("button").click(function(){
$("input").keypress();
});

jQuery 效果

1.隐藏和显示 .hide()　　&　　.show()

语法：$(selector).hide(speed,callback);

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

例：通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

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

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

2.淡入淡出

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

语法：$(selector).fadeIn(speed,callback);

例：
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

(2)fadeOut()　　用于淡出可见元素

语法：$(selector).fadeOut(speed,callback);

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

(3)fadeToggle()　　可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

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

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

语法：$(selector).fadeToggle(speed,callback);

例：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

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

语法：$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

例：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

3.滑动---slide

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

语法：$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

$("#flip").click(function(){
  $("#panel").slideDown();
});

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

语法：$(selector).slideUp(speed,callback);

$("#flip").click(function(){
  $("#panel").slideUp();
});

(3)slideToggle()　　可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

语法：$(selector).slideToggle(speed,callback);

$("#flip").click(function(){
  $("#panel").slideToggle();
});

动画---animate()

用于创建自定义动画。

语法：$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

实例:演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止

$("button").click(function(){
  $("div").animate({left:'250px'});
});

(1)操作多个属性

$("button").click(function(){
　　$("div").animate({
　　　　left:'250px',
　　　　opacity:'0.5',
　　　　height:'150px',
　　　　width:'150px'
　　});
});

提示：可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

(2)使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

(3)使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

(4)使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

例1：
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

例2：下面的例子把 <div> 元素移动到右边，然后增加文本的字号：

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

停止动画--- stop()

语法：$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

Callback 函数

如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。

典型的语法：$(selector).hide(speed,callback)

例：

$("p").click(function(){

　　$(this).hide(2000,function(){

　　　　alert("这是callback函数");

　　});

Chaining---方法链接

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

例：

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

jQuery HTML

获得内容和属性

jQuery DOM 操作

posted @ 2017-02-17 17:46 JaceyKan 阅读(195) 评论(0) 收藏举报

刷新页面返回顶部

Jacey

越努力越幸运

jQuery学习笔记2

jQuery 库 - 特性

jQuery 安装

通过 CDN（内容分发网络）引用:

jQuery 基础语法

文档就绪函数:

jQuery 选择器

实例

jQuery 事件

jQuery 效果

1.隐藏和显示 .hide()　　&　　.show()

2.淡入淡出

3.滑动---slide

动画---animate()

(1)操作多个属性

(2)使用相对值

(3)使用预定义的值

(4)使用队列功能

停止动画--- stop()

Callback 函数

Chaining---方法链接

jQuery HTML

获得内容和属性

jQuery DOM 操作

公告

Jacey

越努力越幸运

jQuery学习笔记2

jQuery 库 - 特性

jQuery 安装

通过 CDN（内容分发网络） 引用:

jQuery 基础语法

文档就绪函数:

jQuery 选择器

实例

jQuery 事件

jQuery 效果

1.隐藏和显示 .hide() & .show()

2.淡入淡出

3.滑动---slide

动画---animate()

(1)操作多个属性

(2)使用相对值

(3)使用预定义的值

(4)使用队列功能

停止动画--- stop()

Callback 函数

Chaining---方法链接

jQuery HTML

获得内容和属性

jQuery DOM 操作

公告

通过 CDN（内容分发网络）引用:

1.隐藏和显示 .hide()　　&　　.show()