在《网页制作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. lumia手机wp系统应用列表如何设置按照拼音

    1.安装应用多了就会这样·· 2.想用拼音排列,请把系统设置里的区域语言中的区域和格式改为中国,此时,屏幕壁纸上是"四月十五日". 3.想用笔画排列,请把系统设置里的区域语言中的区 ...

  2. 分布式搜索引擎ElasticSearch+Kibana (Marvel插件安装详解)

    在安装插件的过程中,尤其是安装Marvel插件遇到了很多问题,要下载license.Marvel-agent,又要下载安装Kibana 版本需求 Java 7 or later Elasticsear ...

  3. 开发错误记录5-Failed&#160;to&#160;sync&#160;Gradle&#160;project&#160;‘HideTitleDemo’

    今天用Android Studio2.0创建的项目,到Android Studio1.5打开,直接报错: 意思就是内存空间不够,要在gradle.properties 文件中进行内存设置,因为是从高版 ...

  4. django 的文件上传

    template html(模板文件): <form enctype="multipart/form-data" method="POST" action ...

  5. Mysql查找所有项目开始时间比之前项目结束时间小的项目ID

    这是之前遇到过的一道sql面试题,供参考学习: 查找所有项目开始时间比之前项目结束时间小的项目ID mysql> select * from t2; +----+---------------- ...

  6. 在Microsoft-IIS/10.0上面部署mvc站点的时候,出现404的错误

    写在前面 在家自己弄了一个项目,想部署在电脑上用手机来访问,总是出现404的错误.路由什么的没有写错啊,最后发现是映射程序的问题,在安装的时候iis很多功能没有安装,又将iis的其他没有安装的功能勾选 ...

  7. 汇编ASCII大小写转换(字符串长度$的用法)

    data segment first db "BaSiC" db "iNfOrMaTiOn" len equ $-first ;×Ö·û´®³¤¶È ends ...

  8. cocos2d-x 3.X(一)环境搭建问题

    在按照官网上的教程(http://cn.cocos2d-x.org/tutorial/show?id=1478)步骤一步一步安装完成同时也添加了各项环境变量,运行cocos命令也没有任何问题,但就是在 ...

  9. Tomcat集群---Cluster节点配置(转)

    <!-- Cluster(集群,族) 节点,如果你要配置tomcat集群,则需要使用此节点. className 表示tomcat集群时,之间相互传递信息使用那个类来实现信息之间的传递. cha ...

  10. C 简单处理excel 转成 json

    引言 工作中常需要处理excel转json问题. 希望这篇博文能简单描述这个问题.并提供一种解决思路.提升感悟. 今天我们处理的事就是为了把 xlsm => json. 一种方式是. 去 goo ...