jQuery 入门笔记

最新推荐文章于 2024-01-20 21:49:50 发布

原创最新推荐文章于 2024-01-20 21:49:50 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

Web 前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用jQuery简化HTML文档遍历、事件处理、动画等操作。包括基本语法、文档加载完成后的执行方式、选择器、事件绑定及动画效果等关键知识点。

添加jQuery库：

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

PS： ../1/.. 可以找到1.*.* 的最高版本。

2.0.2 不再支持IE8-

jQuery语法：

$(selector).action()

文档加载完后执行：

$(document).ready(function(){  
    // [code]
});

PS：如需调用f()函数，f()必须在[code]区调用，而不能取代 function(){}；定义位置可以在 ready() 之内也可以其外。

jQuery选择器( document.querySelector )：

语法描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一个元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的第一个元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery事件：

$("button").click(function());
$("button").dblclick(function());
$("input").focus(function());

jQuery效果：

#隐藏/显示

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

$("p").hide();
$("p").hide(1000);
$("p").hide(fast);
$("p").hide(slow);

#淡入/淡出
$(selector).fadeToggle(speed,callback);
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
// 用法同上，下同
$(selector).fadeTo(speed,opacity,callback);
opacity为透明度，取值范围 (0,1)，值越小越透明
$("#div").fadeTo(slow,0.2);
#滑动
$(selector).slideToggle(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);
#动画
$(selector).animate({params},speed,callback);
.. params[必须] 为动画形成后的CSS属性

！如需调整位置，元素的position不能为static）

！font-size 需要写成 fontSize 形式

.. speed 当取值为"fast"和"slow"时，切记加引号！

示例：
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"fast");
  div.animate({height:'100px',opacity:'0.4'},1000);        // speed 不需要引号
  div.animate({width:'toggle'},"slow");                          // 使用预定义动画
#停止动画
$(selector).stop(stopAll,goToEnd);
.. stopAll

！默认为false，表示只停止当前动画，然后继续执行队列中的下一个动画；

！改为true后，表示停止队列中所有动画

.. goToEnd 默认为false

！默认为false，表示立马停止动画

！true表示把当前动画瞬间走完

参见示例
#Callback
动画结束后执行语句。
$("p").hide(1000,function(){
     alert("The paragraph is now hidden");
});
#Chaining

合并同一元素的动画，节省重复查找元素的时间。
$("p").css("color","white")
          .css("backgroundColor","black")
          .slideUp()
          .slideDown();
PS：各个动画按队列顺序依次执行。

jQuery