1、 jQuery 基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery action() 执行对元素的操作
实例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$('p');//html标签
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的 href 属性的属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
2、jQuery 使用 $ 符号作为 jQuery 的简介方式
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
3、jQuery 几种常见函数
jQuery 隐藏和显示
通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
语法:
$(selector).hide(speed,callback) $(selector).show(speed,callback)
hide() 和 show() 都可以设置两个可选参数:speed 和 callback。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。
speed 参数可以设置这些值:"slow", "fast", "normal" 或 milliseconds
jQuery 切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
隐藏显示的元素,显示隐藏的元素。
语法:
$(selector).toggle(speed,callback)
jQuery 滑动函数 - slideDown, slideUp, slideToggle
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
jQuery 自定义动画
jQuery 函数创建自定义动画的语法:
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是:"slow", "fast", "normal" 或 毫秒。
总结:
函数 | 描述 |
---|---|
$(selector).hide() | 隐藏被选元素 |
$(selector).show() | 显示被选元素 |
$(selector).toggle() | 切换(在隐藏与显示之间)被选元素 |
$(selector).slideDown() | 向下滑动(显示)被选元素 |
$(selector).slideUp() | 向上滑动(隐藏)被选元素 |
$(selector).slideToggle() | 对被选元素切换向上滑动和向下滑动 |
$(selector).fadeIn() | 淡入被选元素 |
$(selector).fadeOut() | 淡出被选元素 |
$(selector).fadeTo() | 把被选元素淡出为给定的不透明度 |
$(selector).animate() | 对被选元素执行自定义动画 |
注意:
动画创造了对 callback 函数的需求。
由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
为了避免这个情况,您可以以参数的形式添加 Callback 函数。
当动画 100% 完成后,即调用 Callback 函数。
典型的语法:
$(selector).hide(speed,callback)
callback 参数是一个在 hide 操作完成后被执行的函数。