在《网页制作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. SQL Server 数据库设计规范

    数据库设计规范 1.简介 数据库设计是指对一个给定的应用环境,构造最优的数据库模式,建立数据库及其他应用系统,使之能有效地存储数据,满足各种用户的需求.数据库设计过程中命名规范很是重要,命名规范合理的 ...

  2. react引用antd的form表单

    引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form ...

  3. [Unity3D]粒子系统学习笔记

    粒子阴影的处理 通过Material填充粒子系统的render后,默认是显示阴影的: 可以通过设置来调整: 调整后的效果, 每个粒子就没有阴影了 增加粒子效果 设置为合成的材质,效果显示加倍: 添加子 ...

  4. python pickle

    >>> import pickle >>> m_list=[',2,'asa'] >>> m_list [', 2, 'asa'] >> ...

  5. jsp页面往mysql里插入中文后数据库里显示乱码

    1.JSP页面乱码 这种乱码的原因是应为没有在页面里指定使用的字符集编码,解决方法:只要在页面开始地方用下面代码指定字符集编码即可,<%@ page contentType="text ...

  6. PHP高级——抽象类与接口的区别(转)

    在学习PHP面向对象时,都会在抽象类与接口上迷惑,作用差不多为什么还那么容易混淆,何不留一去一?但是事实上两者的区别还是很大的,如果能够很好地运用PHP的两个方法,面向对象的程序设计将会更加合理.清晰 ...

  7. 在 ServiceModel 客户端配置部分中,找不到引用协定“WebServiceTest.WebServiceSoap”的默认终结点元素。这可能是因为未找到应用程序的配置文件,或者是因为客户端元素

    原文  http://blog.csdn.net/bugdemo/article/details/9083497 主题 技术 在引用WebService后,程序运行到实例化WebService时报错, ...

  8. 第三章 续:时间控件(TimePicker)

    上一章,介绍了datetimepicker使用, 然而,当只需要时分秒的时候,它并不怎么理想,因此又找了一个单独的时间控制插件 现在介绍一个timepicker,用法差不多,但是它只是基于bootst ...

  9. edtftpj让Java上传FTP文件支持断点续传

    在用Java实现FTP上传文件功能时,特别是上传大文件的时候,可以需要这样的功能:程序在上传的过程中意外终止了,文件传了一大半,想从断掉了地方继续传:或者想做类似迅雷下载类似的功能,文件太大,今天传一 ...

  10. 让Qt的无边框窗口支持拖拽、Aero Snap、窗口阴影等特性

    环境:Desktop Qt 5.4.1 MSVC2013 32bit 需要的库:dwmapi.lib .user32.lib 需要头文件:<dwmapi.h> .<windowsx. ...