在《网页制作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. CREATE TABLE 表名 AS SELECT 语句

    1.新表不存在复制表结构即数据到新表 ? 1 2 create table new_table select * from old_talbe; 这种方法会将old_table中所有的内容都拷贝过来, ...

  2. SSH登录远程主机执行脚本找不到环境变量

    这是因为在Linux上,bash会有四种模式,根据不同的case,Linux会加载不同模式的bash.一般如果你自己直接登录主机,能看到环境变量,但是使用ssh 远程登录执行脚本就找不到环境变量,那么 ...

  3. wampserver 2.5 首页链接问题,wampserver Your Projects

    在wampserver 2.5之后,在首页的Your projects里面,链接的地址为http://直接加你的系统名称,会导致无法访问, 正常的应该为http://localhost+你的系统名称, ...

  4. 車(rook)

    [题目分析] JustPenz:我们假设n>m(不大于就交换),那最多能摆m个,所以会有(n-m)个空白,我们把这些空白插入到n中,答案就是C(n,n-m)=C(n,m);数据范围比较大,我们就 ...

  5. 关于Eclipse的unsupported major minor version 51.0 错误

    把别人的工程 拿来运行报上述错误 是因为工程版本不对 解决办法:新建工程 把现有的代码或资源文件  拷到新建工程里

  6. ACM/ICPC竞赛

    ACM知识点分类   第一类:基础算法 (1) 基础算法:枚举,贪心,递归,分治,递推,构造,模拟 (2) 动态规划:背包问题,树形dp,状态压缩dp,单调性优化,插头dp (3) 搜索:dfs,bf ...

  7. UISearchController的使用

    - (void)addSearchController { _searchController = [[UISearchController alloc] initWithSearchResultsC ...

  8. Spring mvc源码url路由-我们到底能走多远系列(38)

    我们到底能走多远系列38 扯淡: 马航的事,挺震惊的.还是多多珍惜身边的人吧. 主题: Spring mvc 作为表现层的框架,整个流程是比较好理解的,毕竟我们做web开发的,最早也经常接触的就是一个 ...

  9. deep learning新征程

    deep learning新征程(一) zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouwan  2015-11-26   声明: 1 ...

  10. PLSQL Developer报“动态执行表不可访问,本会话的自动统计被禁止”的解决方案

    现象与提示: 第一次用PLSQL Developer连接数据库,若用sys用户登录并操作则正常,若用普通用户比如haishu登录并创建一个表则报错"动态执行表不可访问,本会话的自动统计被禁止 ...