jQuery库 在线

200jQuery 添加元素

那有木有考虑过append/prepend和after/before有什么区别呢?

append

<p> <span class="s1">s1</span></p><script>$("p").append('<span class="s2">s2</span>');</script>
结果是这样的:
<p> <span class="s1">s1</span> <span class="s2">s2</span></p>

after

<p> <span class="s1">s1</span></p><script>$("p").after('<span class="s2">s2</span>');</script>

结果是这样的:

<p> <span class="s1">s1</span></p><span class="s2">s2</span>

总结:

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

199jQuery 效果 – 停止动画

动画队列停止动画测试,只停止当前正在进行的动画,停止当前动画后,队列中的下一个动画开始进行:

$(document).ready(function(){ $("#flip").click(function(){  $("#panel").slideDown(5000);    $("#panel").slideUp(5000); }); $("#stop").click(function(){  $("#panel").stop(); });});

尝试一下 »

198jQuery 事件

一.keypress,keydown,keyup的区别:

  • 1.keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外), 它返回的是键盘代码;
  • 2.keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
  • 3.keyup:用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

二.两种常用用法举例

案例1:获取按键代码或字符的ASCII码

$(window).keydown( function(event){  // 通过event.which可以拿到按键代码. 如果是keypress事件中,则拿到ASCII码.} );

案例2:传递数据给事件处理函数

语法:

jQueryObject.keydown( [[ data ,] handler ] );
  • data: 通过event.data传递给事件处理函数的任意数据;
  • handler: 指定的事件处理函数;

举例:

// 只允许按下的字母键生效, 65~90是所有小写字母的键盘代码范围.var validKeys = { start: 65, end: 90 };$("#keys").keydown( validKeys, function(event){  var keys = event.data; //拿到validKeys对象.  return event.which >= keys.start && event.which <= keys.end;} );

197jQuery 语法

jQuery 入口函数:

$(document).ready(function(){    // 执行代码});或者$(function(){    // 执行代码});

JavaScript 入口函数:

window.onload = function () {  // 执行代码}

jQuery 入口函数与 JavaScript 入口函数的区别:

  • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
  • JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

195jQuery 简介

jQuery 的功能概括

1、html 的元素选取

2、html的元素操作

3、html dom遍历和修改

4、js特效和动画效果

5、css操作

6、html事件操作

7、ajax异步请求方式