欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Jquery入门一

程序员文章站 2024-03-05 15:22:37
...

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作

基础语法: $(selector).action()

  • $美元符号定义 jQuery
  • 选择符(selector)"查询"和"查找" HTML 元素选择器
  • jQuery 的 action() 执行对元素的操作  (事件)

 所以jQuery 的学习主要就分两大块:选择器和事件

实例:

  • $(this).hide() - 隐藏当前元素
  • $("p").hide() - 隐藏所有 <p> 元素
  • $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
  • $("#test").hide() - 隐藏 id="test" 的元素

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

$(document).ready(function(){

  // 执行代码

});

 或

$(function(){

    // 执行代码

});

 jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。

 
window.onload = function () {

    // 执行代码

}
JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

 Jquery入门一

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id#、类.、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器

元素选择器

jQuery 元素选择器基于元素名选取元素:

在页面中选取所有 <p> 元素:$("p")

#id 选择器

#id 选择器通过 HTML 元素的 id 属性选取指定的元素:

通过 id 选取元素语法如下:$("#test")

页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下:$(".test")


常见 DOM 事件:

鼠标事件

键盘事件

表单事件

文档/窗口事件

click

keypress

submit

load

dblclick

keydown

change

resize

mouseenter

keyup

focus

scroll

mouseleave

 

blur

unload

hover

 

 

 

jQuery 事件

页面中指定一个点击事件:

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现:

$("p").click(function(){ // 动作触发后执行的代码!! });

 

隐藏/显示show()/hide()  、淡入/淡出 fadeIn()/fadeOut()、滑动slideDown()/slideUp()效果相似

最终状态 display:block;  

  • show()
  • fadeIn()
  • slideDown()

最终状态 display:none;

  • hide() 
  • fadeOut()
  • slideUp()

hide() show()

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

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

 toggle()           

切换 hide() 和 show() 方法:显示被隐藏的元素,并隐藏已显示的元素:

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

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。


fadeIn()  和 fadeOut() 
$(selector).fadeIn(speed,callback);用于淡入已隐藏的元素:
$(selector).fadeOut(speed,callback); 方法用于淡出可见元素。

 fadeToggle()

在 fadeIn() 与 fadeOut() 方法之间进行切换:如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果;如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。


 fadeTo()

允许渐变为给定的不透明度(值介于 0 与 1 之间)
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

可选的 callback 参数是该函数完成后所执行的函数名称。


 slideDown()   和slideUp()
$(selector).slideDown(speed,callback);  用于向下滑动元素
$(selector).slideUp(speed,callback);  用于向上滑动元素。

 slideToggle()

在 slideDown() 与 slideUp() 方法之间进行切换:如果元素向下滑动,则 slideToggle() 可向上滑动它们;如果元素向上滑动,则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。


Callback 函数在当前动画 100% 完成之后执行

相关标签: javascript jquery