在《网页制作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. Java中的事务——全局事务与本地事务

    转载,原文来源 http://www.hollischuang.com Java事务的类型有三种:JDBC事务.JTA(Java Transaction API)事务.容器事务.这是从事务的实现角度区 ...

  2. LeetCode（16）3Sum Closest

    题目 Given an array S of n integers, find three integers in S such that the sum is closest to a given ...

  3. 数据结构实验7：实现二分查找、二叉排序（查找）树和AVL树

    实验7 学号:      姓名:     专业: 7.1实验目的 (1) 掌握顺序表的查找方法,尤其是二分查找方法. (2) 掌握二叉排序树的建立及查找. 查找是软件设计中的最常用的运算,查找所涉及到 ...

  4. 让你系统的了解shell

    当你在进行登录时,系统会检查的文档:1. /etc/profile:首先,系统会检查这个文件,以定义如下这些变量:PATH.USER.LOGNAME.MAIL.HOSTNAME.HISTSIZE.IN ...

  5. Shell脚本问题详解

    例1:找出当前系统中端口大于1024的程序! 使用netstat -tuln查询出的结果如下,需要输出红色字体的行: [root@localhost ~]# netstat -tuln Active ...

  6. jmeter-添加断言(检查点)-实例

    方法/步骤     打开 jmeter的图形界面工具,然后打开之前保存的脚本(之前经验中用到的),demo-baidu.jmx   先点击运行,查看运行结果. 第一次请求返回302,然后跳转到第二次请 ...

  7. sql语句中嵌套2层循环

    declare @year intdeclare @month intset @year=2008 while(@year<=2011)beginset @month=1while(@month ...

  8. [Go]链表的相关知识

    切片有着占用内存少喝创建便捷等特点,但它本质上还是数组.切片的一大好处是可以通过窗口快速地定位并获取或者修改底层数组中的元素.不过当删除切片中的元素的时候就没那么简单了.元素复制一般是免不了的,就算只 ...

  9. Java并发编程：自己动手写一把可重入锁

    关于线程安全的例子,我前面的文章Java并发编程:线程安全和ThreadLocal里面提到了,简而言之就是多个线程在同时访问或修改公共资源的时候,由于不同线程抢占公共资源而导致的结果不确定性,就是在并 ...

  10. POJ 2553 The Bottom of a Graph 【scc tarjan】

    图论之强连通复习开始- - 题目大意:给你一个有向图,要你求出这样的点集:从这个点出发能到达的点,一定能回到这个点 思路:强连通分量里的显然都可以互相到达 那就一起考虑,缩点后如果一个点有出边,一定不 ...