在《网页制作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选择器的用法：

事件

  • 定义

即当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函数的写法和作用：

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--10Jquery的更多相关文章

  1. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  2. jquery中$.each()的用法

    each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单 ...

  3. 《2013传智播客视频》-wmv,avi,mp4.目录

    \!--14俄罗斯方块\视频\.复习.avi; \!--14俄罗斯方块\视频\ 复习.avi; \!--14俄罗斯方块\视频\ 形状旋转.avi; \!--14俄罗斯方块\视频\ 判断形状能否变形.a ...

  4. 2013传智播客视频--.ppt,.pptx,.doc,.docx.目录

    \!-- JQ03-JQ事件动画\.1版JS+JQ PPT\00JsDom编程01_邹华栋.docx; \!-- JQ03-JQ事件动画\.1版JS+JQ PPT\00JsDom编程01_邹华栋.pp ...

  5. 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发

    01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...

  6. jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、

    脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...

  7. 路飞学城Python-Day53

    01-jquery的介绍 JS在做项目或者是实现功能的时候,用JS去操作DOM元素非常复杂,代码量大,重复性代码也多 多个元素使用for循环遍历也是非常麻烦的,对于JS使用来说加大了难度 jQuery ...

  8. JQuery中操作元素的属性_对象属性

    我们主要是通过attr去获取元素的属性: 看body内容: <body> <p> 账号:<input type="text" id="una ...

  9. jQuery和ajax【“Asynchronous Javascript And XML】

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

随机推荐

  1. Java客户端通过Http发送POST请求上传文件到web服务器

    http://www.cnblogs.com/WilliamJiang/archive/2012/04/29/2475883.html 1.朋友的一个需求,让我给他实现,需求是这样的,需要用ASP.n ...

  2. 【数位统计】之【spoj1433 KPSUM】

    [spoj1433]KPSUM 来源 高逸涵<数位计数问题解法研究> 由于自己的数位计数类的问题实在太差了,所以把例2用markdown抄写并补充了一遍. 题意 将写在纸上,然后在相邻的数 ...

  3. Java replace() 方法

    Java replace() 方法 Java String类 replace() 方法通过用 newChar 字符替换字符串中出现的所有 oldChar 字符,并返回替换后的新字符串. 语法 publ ...

  4. 三张图彻底了解Java中字符串的不变性

    转载: 三张图彻底了解Java中字符串的不变性 定义一个字符串 String s = "abcd"; s中保存了string对象的引用.下面的箭头可以理解为"存储他的引用 ...

  5. jquery.validate的 使用

    需要引入jar包 <script type="text/javascript" src="js/jquery-1.10.2.min.js">< ...

  6. 谈谈JPA-01-概述

    JPA和Hibernate的关系 JPA 是 hibernate 的一个抽象(就像JDBC和JDBC驱动的关系): JPA 是规范:JPA 本质上就是一种  ORM 规范,不是ORM 框架 —— 因为 ...

  7. 在CentOS 7 MySQL / MariaDB

    在CentOS7中,MariaDB  替代了MySQL;更多复杂的疑问可以在这里查看 MariaDB versus MySQL – Compatibility Install MySQL / Mari ...

  8. Visual Studio 2012出现“无法访问T-SQL组件和安装了不兼容伯 DacFx版本”的解决办法

    参考:Visual Studio 2012出现“无法访问T-SQL组件和安装了不兼容伯 DacFx版本”的解决办法 Vs2012的下载地址: https://msdn.microsoft.com/en ...

  9. Python eclipse开发环境搭建

    http://jingyan.baidu.com/article/cd4c2979101f02756f6e6064.html http://jingyan.baidu.com/article/1876 ...

  10. 454. 4Sum II ——查找本质：hash最快，二分次之

    Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l) there are such t ...