jQuery 入门笔记
添加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" 的元素

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


jQuery


jQuery


jQuery



注意!此信息未认证,请谨慎判断信息的真实性!

全部评论
空

相关内容推荐

头像
点赞 评论 收藏
转发
头像 头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
01-07 18:24
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
2022-12-10 09:46
宁夏大学_2023
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
点赞 收藏 评论
分享

全站热榜

正在热议