在《网页制作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文件库 ...

随机推荐

  1. retrofit一点点理解

    retrofit是什么? retrofit可以认为是一款基于http协议的rpc框架.基于java的. 它可以连到支持restful的服务器,将服务器返回的json数据反序列化成java对象. 用途 ...

  2. 文件夹右键添加“DOS”命令

    导入注册表 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Folder\shell\RunCMD] @="进入命令行&quo ...

  3. Android菜鸟成长记14 -- AsnyTask

    本篇随笔将讲解一下Android的多线程的知识,以及如何通过AsyncTask机制来实现线程之间的通信. 一.Android当中的多线程 在Android当中,当一个应用程序的组件启动的时候,并且没有 ...

  4. jvm中的动态分派

    动态分派与复写密不可分,因为java中存在向上转型,这样就涉及到方法的调用问题.先看一下示例代码 package com.dy.xidian; class Test1 { public void sa ...

  5. BJFU 1015

    描述 数字具有神奇的魔力,神奇到ben想把所有数字全部保存起来.于是他设想了如下的保存方法.假设有一张无限大的纸板,将所有自然数(不包括0)按如下顺序排列书写在纸板上保存:1 2 6 7  15  1 ...

  6. 037. asp.netWeb用户控件之五使用用户控件实现文件上传功能

    fileUpload.ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile= ...

  7. mac下 home-brew安装及php,nginx环境安装及配置

    Homebrew官网 http://brew.sh/index_zh-cn.html Homebrew是神马 linux系统有个让人蛋疼的通病,软件包依赖,好在当前主流的两大发行版本都自带了解决方案, ...

  8. opengl中拾取操作的实现

    opengl采用一种比较复杂的方式来实现拾取操作,即选择模式.选择模式是一种绘制模式,它的基本思想是在一次拾取操作时,系统会根据拾取操作的参数(如鼠标位置)生成一个特定视景体,然后又系统重新绘制场景中 ...

  9. [UML]转:UML类图集中关系的总结

    转:http://blog.csdn.net/dragonpeng2008/article/details/6836448 在UML类图中,常见的有以下几种关系: 泛化(Generalization) ...

  10. python学习笔记二 数据类型(基础篇)

    Python基础 对于Python,一切事物都是对象,对象基于类创建         不同类型的类可以创造出字符串,数字,列表这样的对象,比如"koka".24.['北京', '上 ...