jQuery学习简要笔记

前言:熟悉jQuery的代码是了解jQuery整个应用的核心与基础,jQuery是一款优秀的js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!下面来重温一下整个jQuery的知识,大家如果有javascript 开发基础,对于学习jQuery是非常有帮助的。

------------------------------------------分割线------------------------------------------

jQuery权威指南 PDF版中文+配套源代码

jQuery实战 中文PDF+源码

《jQuery即学即用(双色)》 PDF+源代码

锋利的jQuery(第2版) 完整版PDF+源码

jQuery完成带复选框的表格行高亮显示

jQuery基础教程(第4版) PDF 完整高清版+配套源码

--------------------------------------分割线 --------------------------------------

1. 熟悉JQuery的基础用例,如果对Javascript的示例代码比较熟悉的话,可以采用如下的函数代码:
// 页面加载完毕后的响应事件代码列表如下:
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

2.  jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery,选择符(selector)“查询”和“查找”HTML 元素,jQuery 的 action() 执行对元素的操作,示例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 的所有元素
$("#test").hide() - 隐藏所有 的元素

3. 选择器式jQuery操作运算的核心, 下面列出所有的选择器种类:
jQuery 元素选择器:
    jQuery 使用 CSS 选择器来选取 HTML 元素。
  $("p") 选取 <p> 元素。
  $("p.intro") 选取所有 的 <p> 元素。
  $("p#demo") 选取所有 的 <p> 元素。
jQuery 属性选择器:
    jQuery 使用 XPath 表达式来选择带有给定属性的元素。
  $("[href]") 选取所有带有 href 属性的元素。
  $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
  $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
  $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
其他更多的选择器与语法规则请参见jQuery语法规则书:

4. 事件是jQuery中的核心问题,如下是整个事件的关键:
  $(document).ready(function)        将函数绑定到文档的就绪事件(当文档完成加载时)
  $(selector).click(function)        触发或将函数绑定到被选元素的点击事件
  $(selector).dblclick(function)        触发或将函数绑定到被选元素的双击事件
  $(selector).focus(function)        触发或将函数绑定到被选元素的获得焦点事件
  $(selector).mouseover(function)    触发或将函数绑定到被选元素的鼠标悬停事件

5. 解决jQuery 名称冲突问题,jQuery 使用 $ 符号作为 jQuery 的简介方式。
  某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
  jQuery 使用名为 noConflict() 的方法来解决该问题。
  var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

6. jQuery的动作函数:(speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。)
6.1-显示与隐藏函数:
  $(selector).hide(speed,callback);      --隐藏函数;
  $(selector).show(speed,callback);    --显示函数;
  可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
  可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
6.2-显示与隐藏两个动作的切换函数:
  $(selector).toggle(speed,callback);
  可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
  可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
6.3-淡入、淡出、以及淡入、淡出的切换函数;
    $(selector).fadeIn(speed,callback);        -- 淡入函数
    $(selector).fadeOut(speed,callback);      --淡出函数
    $(selector).fadeToggle(speed,callback); --淡入、淡出的切换函数
  可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  可选的 callback 参数是 fading 完成后所执行的函数名称。
6.4-jQuery fadeTo() 方法
  jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
  语法:$(selector).fadeTo(speed,opacity,callback);
  必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
  可选的 callback 参数是该函数完成后所执行的函数名称。
6.5-上下滑动函数:
  $(selector).slideDown(speed,callback);    -- 往下滑动;
  $(selector).slideUp(speed,callback);        -- 往上滑动;
  $(selector).slideToggle(speed,callback);  -- slideDown与slideUp之间进行切换;
  可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  可选的 callback 参数是滑动完成后所执行的函数名称。
6.6-动画功能:
  jQuery animate() 方法用于创建自定义动画。
  语法: $(selector).animate({params},speed,callback);
  必需的 params 参数定义形成动画的 CSS 属性。
  可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  可选的 callback 参数是动画完成后所执行的函数名称。
6.7-停止动画功能:
  jQuery stop() 方法,jQuery stop() 方法用于停止动画或效果,在它们完成之前。
  stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
  语法:  $(selector).stop(stopAll,goToEnd);
  可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
  可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
    因此,默认地,stop() 会清除在被选元素上指定的当前动画。

7. jQuery方法链接调用:
  $("#p1").css("color","red").slideUp(2000).slideDown(2000);  --先变红然后朝上滑动,之后朝下滑动;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1f8d3b4ca7dfeb58d2f2e2080f8ed207.html