在《网页制作Dreamweaver（悬浮动态分层导航）》中，运用到了jQuery的技术，轻松实现了菜单的下拉、显示、隐藏的效果，不必再用样式表一点点地修改，省去了很多麻烦，那么jQuery具体是如何使用的，以下会详细讲述jQuery的基础用法：

1、安装：

http://jquery.com/download/登陆这个jQuery的下载站点，里面有以下几个选项：

一般的开发者选择（1）下载就可以了，文件比较小，也够用，当然需要开发jQuery的可以下载（2）

下载完成后，进入DW，在.html文件的<head>标签中导入，例：

<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>

（HTML5不需要写type="text/javascript"）

——————————————————————————————

2、语法和选择器：

　  $(selector).action()

美元符号定义 jQuery

选择符（selector）“查询”和“查找” HTML 元素——选择器

jQuery 的 action() 执行对元素的操作——事件

　　selector选择器的用法：

语法

描述

$(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" 的元素

事件

定义

即当HTML中发生某些事（点击、鼠标移过等）的时候调用的方法

$(selector).action()

触发

事件的触发有两种方法：

1、直接将事件click写在<javascript>中

<head>

<script type = "text/javascript"src="/jquery/jquery.js">

</script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

}); });

</script>

</head>

<body>

<button type="button">点击这里让文字消失</button>

<p>我会消失</p>

</body>

*各种Event函数的写法和作用：

Event 函数

绑定函数至

$(document).ready(function)

将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function)

触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)

触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)

触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)

触发或将函数绑定到被选元素的鼠标悬停事件

2、在body标签中通过onclick引用已经写好的方法：

<script>function visible1()

{

$("p").hide();

};

</script>

</head>

<body>

<input type="button" onclick = "visible1()" value = "点这里让文字消失"/>

<p>我会消失。</p>

常用的jQuery函数

1、隐藏/显示/隐藏显示切换：.hide()     .show()      .toggle()

2、淡入/淡出/淡入淡出切换/fadeTo：.fadeIn()    .fadeOut()    .fadeToggle()    .fadeTo("时间","透明度")

3、滑动：.slideDown()    .slideUp()    .slideToggle（）

4、动画效果：.animation({css样式表的属性值},"slow/fast/自定义时长（毫秒，去掉外面的双引号）")

5、停止动画：.stop() 适用于所有jQuery效果函数，包括以上列举的几种，停止正在执行的所有动画效果

6、Callback的用法：在动画执行完成后进行下一函数的执行，如下面用下划线标识出来的部分即为Callback：

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide(1000,function(){alert("The paragraph is now hidden");

});

});

});

</script>

7、Chaining:几种函数的链接，如：

<script>

$(document).ready(function()  {

$("button").click(function(){

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

});

});

</script>

HTML Jquery的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  3. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  9. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  10. 浅谈 jQuery 核心架构设计

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

随机推荐

  1. 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. POJ 2082 Terrible Sets

    Terrible Sets Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 2747   Accepted: 1389 Des ...

  3. 关于castle和Could not find the dialect in the configuration错误

    最近试了试castle,NND,老是报“Could not find the dialect in the configuration”,明明配的没问题,上网搜索所有教程都是这么配的.后来在一国外的网 ...

  4. ASP.NET服务器控件使用之Reportviewer 报表

    http://blog.csdn.net/oemoon/article/details/7338967 http://www.cnblogs.com/emanlee/archive/2008/09/1 ...

  5. React JS 基础知识17条

    1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...

  6. Java获取路径方法&相对路径读取xml文件方法

    (1).request.getRealPath("/");//不推荐使用获取工程的根路径 (2).request.getRealPath(request.getRequestURI ...

  7. 认识SuperSocket 1.6.4

    SuperSocket 是一个轻量级的可扩展的 Socket 开发框架,由江振宇先生开发,之所以选用它是因为一下几点恰好复合项目需求: 开源,基于Apache 2.0协议,可以免费使用到商业项目. 高 ...

  8. Lua面向对象设计

    首先对于Lua语言,它没有打算被用来进行大型的程序设计,相反,Lua目标定于小型到中型的程序设计,通常是作为大型系统的一部分,所以它只提供了一套精简的元素,很多高级语言的概念都没有.这样Lua就成为了 ...

  9. Sass学习之路：Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  10. MMM和MHA的对比和应用（PPT分享）

    分享主题:MySQL高可用架构 --- MMM&MHA在大众点评应用和改进 内容简介:本次演讲,主要讲述以下几个方面 1. MMM在点评网是如何使用的 2. 细数MMM上踩过的坑以及如何填坑 ...