在《网页制作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. 自定义shell脚本

    当脚本需要加入固定的内容时就可以直接使用此文件 1.在用户的家目录下创建.vimrc文件(root用户就在root目录下创建,其他用户就在其他用户家目录下创建这个隐藏文件) 2. 将以下代码写入此文件 ...

  2. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

  3. HDU 1257 最少拦截系统（最长上升子序列）

    题意: 给定n个数, 然后要求看看有多少对不上升子序列. 分析: 求出最长上升子序列, 那么整个序列中LIS外的数都会在前面找到一个比自己大的数, 所以不上升子序列最多有最长上升子序列个数个. 关于求 ...

  4. 解决safari里面淘宝京东页面无法打开以及打开后乱码的问题！

    sqlite3 ~/Library/Keychains/*/ocspcache.sqlite3 'DELETE FROM responses WHERE responderURI LIKE " ...

  5. CodeForces 610B-Vika and Squares，有坑点，不是很难~~

    B. Vika and Squares time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  6. Codeforces 892 B.Wrath

    B. Wrath time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  7. ubuntu 12.04 64bit 安装 teamviewer 8.0

    1. 在http://www.teamviewer.com下载teamviewer_linux_x64.deb 2.sudo dpkg -i teamviewer_linux_x64.deb 3.如果 ...

  8. virtualBox下Centos系统扩展磁盘空间

    (1)查看空间容量: 打开windows命令终端.然后打开virtualbox安装目录,找到VBoxManage.exe,拖动到终端里面.输入命令:list hdds,回车. 我安装的位置是 : C: ...

  9. PHP 常见问题2

    11.能够使 HTML 和 PHP 分离开使用的模板(1 分) 答: Smarty,Dwoo,TinyButStrong,Template Lite,Savant,phemplate,XTemplat ...

  10. POJ 3159 【朴素的差分约束】

    好吧终于知道什么是“高大上”的差分约束了.嗷嗷 题意: 小朋友们分糖果,某个小朋友不想另外一个小朋友分到的糖果数比自己多N块以上. 求编号为N的小朋友最多比编号为1的小朋友多分多少块糖果. 思路: 差 ...