在《网页制作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. Django框架基础知识14-类视图

    MTV view视图 wsgi函数 def index(request): .... return HttpResponse() 特定的HTTP方法.get,post可以定义单独的方法 继承,多继承, ...

  2. Python requests.post方法中data与json参数区别

    在通过requests.post()进行POST请求时,传入报文的参数有两个,一个是data,一个是json. data与json既可以是str类型,也可以是dict类型. 区别: 1.不管json是 ...

  3. Fiddler抓包-会话框添加查看get与post请求类型选项

    from:https://www.cnblogs.com/yoyoketang/p/7061990.html 在使用fiddler抓包的时候,查看请求类型get和post每次只有点开该请求,在Insp ...

  4. struts2接受请求参数

    https://blog.csdn.net/y249839817/article/details/77702745 https://blog.csdn.net/nthack5730/article/d ...

  5. 【数学】codeforces B. The Golden Age

    http://codeforces.com/contest/813/problem/B [题意] 满足n=x^a+y^b的数字为不幸运数字,a,b都是非负整数: 求闭区间[l,r]上的最长的连续幸运数 ...

  6. 关于系统中使用多个PropertyPlaceholderConfigurer的配置

    多数的鲜为人知方法都是因为有着罕见的应用,就比如说Spring中PropertyPlaceholderConfigurer这个类,它是用来解析Java Properties属性文件值,并提供在spri ...

  7. Android基本动画

    Android基本动画 Android Animations动画使用详解 一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XM ...

  8. php装饰者模式

    php装饰者模式 装饰模式指的是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 示例: A.B.C编辑同一篇文章. class ...

  9. poj2723 2sat判断解+二分

    典型的2-sat问题,题意:有m个门,每个门上俩把锁,开启其中一把即可,现在给n对钥匙(所有 钥匙编号0123456...2n-1),每对钥匙只能用一把,要求尽可能开门多(按顺序,前max个). 关键 ...

  10. 前端学习之-- DOM

    Dom == document 1:查找 1:直接查找 document.getElementById('i1') # 根据ID获取一个标签(获取单个元素) document.getElementsB ...