在《网页制作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. html list <==> unformatted list

    两者的区别很大不得不擦呢,任何两个东西的差别都很大,不得混淆.---一个有ul/ol的选择,一个没有

  2. php中的 == 和 ===

    == 是等值 1 和  ‘1’ 是相等的 === 要等值并且类型相等,比如 1 和  ‘1’ 是不相等的,只有 ‘1’ 和 ‘1’ 是相等的.哈哈哈. http://ihacklog.com/post ...

  3. [转] Android OkHttp完全解析 是时候来了解OkHttp了

    http://blog.csdn.net/lmj623565791/article/details/47911083: 本文出自:[张鸿洋的博客] 一.概述 最近在群里听到各种讨论okhttp的话题, ...

  4. [HBuilder] 简介

    官网首页: http://www.dcloud.io/runtime.html 特点: 编码比其他工具快5倍 代码输入法:按下数字快速选择候选项 可编程代码块:一个代码块,少敲50个按键 内置emme ...

  5. 杂谈:Servlet(2)

    Servlet的方法剖析: 1.service()方法里面做了什么? 2.doGet()与doPost()做了什么?应该怎么写? 回答 1.service()方法里面做了什么? 如果你的service ...

  6. java基础学习之 消息对话款

    package Dome; import java.awt.event.*; import java.awt.*; import javax.swing.*; public class WindowM ...

  7. 初学java之大数处理

    import java.text.*; public class Gxjun { public static void main(String args[] ) { int n=123456789; ...

  8. ASP.NET服务器控件数据绑定总结

    using System; using System.Collections.Generic; using System.Text; using System.Web.UI.WebControls;/ ...

  9. C语言链表

    #include<stdio.h>#include<malloc.h>#include<stdlib.h> typedef struct Node{ int dat ...

  10. jQuery Easing动画效果扩展(转)

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...