在《网页制作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选择器的用法：

语法

描述

$(this)

当前 HTML 元素

$("p")

所有 <p> 元素

$("p.intro")

所有 class="intro" 的 <p> 元素

$(".intro")

所有 class="intro" 的元素

$("#intro")

id="intro" 的元素

$("ul li:first")

每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']")

所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head")

id="intro" 的 <div> 元素中的所有 class="head" 的元素

事件

  • 定义

即当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函数的写法和作用：

Event 函数

绑定函数至

$(document).ready(function)

将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function)

触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)

触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)

触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)

触发或将函数绑定到被选元素的鼠标悬停事件

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>

2016/2/26 jQuery的技术 1，安装 2，语法选择器$ 事件触发 3，常用jQuery函数的更多相关文章

  1. JQuery DOM clone(true)，对于克隆对象事件触发后，处理函数中this指代克隆对象

    <!doctype html> <html ng-app> <head> <script src="./jquery.js">< ...

  2. 8、网页制作Dreamweaver（jQuery基础:安装、语法）

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  3. jQuery开发技术笔记

    HTML DOM 加载步骤    1. 解析 HTML 结构     2.加载外部脚本和样式表文件     3.解析并执行脚本代码     4.构造 HTML DOM 模型     5.加载图片等外部 ...

  4. 同时处理html+js+jquery+css的插件安装（Spket&Aptana插件安装）

    Spket 在线安装方法:Help->Software Updates(或者Install New Software)->Add site Location:http://www.spke ...

  5. jQuery原型技术分解

    jQuery原型技术分解 起源----原型继承 用户过javascript的都会明白,在javascript脚本中到处都是 函数,函数可以归置代码段,把相对独立的功能封闭在一个函数包中.函数也可以实现 ...

  6. 云计算虚拟机技术-KVM安装

    云计算虚拟机技术-KVM安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 身为运维的小伙伴估计大家都清楚KVM,因为在CentOS里面KVM还算很折腾的一个软件,早期CentOS ...

  7. JavaScript 框架 jQuery 的下载和安装

    jQuery 简介: jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 很容易学习. jQuery 下载: // 官网: htt ...

  8. Murano Weekly Meeting 2016.07.26

    Meeting time: 2016.July.26 1:00~2:00 Chairperson:  Nikolay_St, from Mirantis Meeting summary: 1.Masc ...

  9. http://stormzhang.com/opensource/2016/06/26/android-open-source-project-recommend1/

    转载自:http://stormzhang.com/opensource/2016/06/26/android-open-source-project-recommend1/ 推荐他的所有博文~ 图片 ...

随机推荐

  1. tornado框架基础10-websocket

    websocket 01 长轮询 在网页,我们经常扫码登录,结合之前的学习的知识点,来思考下,前端是如何知道用户在手机上扫码登录了呢? 长轮询:客户端不断的向服务器发送请求 缺点: \1. 开销大 \ ...

  2. IDEA中远程Debug调试

    一.设置JVM支持远程Debug调式 由于我的应用是springboot, 所以直接使用java -jar的方法将服务启动起来. java -Xdebug -Xrunjdwp:transport=dt ...

  3. 7-16 Sort with Swap(0, i)（25 分）

    7-16 Sort with Swap(0, i)(25 分) Given any permutation of the numbers {0, 1, 2,..., N−1}, it is easy ...

  4. list、tuple、dict内部功能释义

    一.list内部功能释义 运用频次:☆☆☆☆☆ 1. append():列表末尾插入元素 [示例] >>> L1=[11,22,33] >>> L1.append( ...

  5. 如何在开发时用PC端对移动端页面进行调试

    原文转载于:https://cnodejs.org/topic/56ebdf2db705742136388f71 项目名称: spy-debugger 项目地址:https://github.com/ ...

  6. Jedis 工具类

    package com.pig4cloud.pigx.admin.utils; import redis.clients.jedis.*; import java.util.ArrayList; im ...

  7. python 数据库操作产生中文乱码的解决办法

    1.执行python mysql数据库查询操作时,产生中文乱码 #!/usr/bin/python # -*- coding: UTF-8 -*- import MySQLdb db = MySQLd ...

  8. 【04】如何确定ruby安装好

        [04]如何确定ruby安装好     命令行里输入 ruby -v 如果正确输出了 ruby 版本号,就OK了       是不是在Windows平台安装的?如果是,先按照楼上说得打开命令行 ...

  9. php引入PHPMailer发送邮件

    昨天做了一个发送邮件的功能,如果直接用mail()函数,需要拥有自己的邮件服务器,所有引入PHPMailer类方便快捷,简单写一下开发步骤: 一.拥有自己的邮箱账号(作为发件人邮箱) 分两种情况: 1 ...

  10. POJ3037 Skiing

    Skiing 题目大意: 给定一个M*N的网格,已知在每个网格中的点可以向上下左右四个方向移动一个单位,每个点都有一个高度值. 从每个点开始移动时存在一个速度值,从A点移动到B点,则此时B点的速度为& ...