PS——了解JQuery

Query是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

什么是 jQuery ?
  jQuery是一个JavaScript函数库。
  jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
  jQuery库包含以下功能:
  HTML 元素选取
  HTML 元素操作
  CSS 操作
  HTML 事件函数
  JavaScript 特效和动画
  HTML DOM 遍历和修改
  AJAX
  Utilities

jQuery语法

  jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
  基础语法: $(selector).action()
  美元符号定义 jQuery
  选择符(selector)"查询"和"查找" HTML 元素
  jQuery 的 action() 执行对元素的操作
  实例:
  $(this).hide() - 隐藏当前元素
  $("p").hide() - 隐藏所有 <p> 元素
  $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
  $("#test").hide() - 隐藏所有 id="test" 的元素

开始使用JQuery,首先引用JQ插件

在接下来的使用过程中,需要接触到文档就绪函数

文档就绪函数

文档就绪函数,为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
写法:

$(document).ready(function(){

// 开始写 jQuery 代码...

});

简洁写法:

$(function(){

// 开始写 jQuery 代码...

});

选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。

案例:

HTML代码:

<p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;"></p>
<p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;"></p>
<button id="btn1" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">点击隐藏</button>
<button id="btn2" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">点击还原</button>

JS代码:

$(function(){
$("#btn1").click(function(){//通过button的id即btn1选择HTML元素,并通过click事件改变页面元素
$("p").hide();//
}); $("#btn2").click(function(){
$("p").show();
});
})

效果

除了#id选择器之外,还有.class选择器,元素选择器等

jQuery事件

页面对不同访问者的响应叫做事件。
  事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
  实例:
  在元素上移动鼠标。
  选取单选按钮
  点击元素

常见 DOM 事件:

案例:dblclick双击改变HTML样式

JS代码:

$(function(){
$("#btn1").dblclick(function(){//dblclick双击
$("p").hide();//
}); $("#btn2").dblclick(function(){
$("p").show();
});
})

效果

案例:当鼠标指针穿过元素时,会发生 mouseenter 事件。

JS代码:

$(function(){
$("#btn1").mouseenter(function(){//mouseenter鼠标悬停时
$("p").hide();//
}); $("#btn2").mouseenter(function(){
$("p").show();
});
})

效果

 jQuery效果——隐藏和显示

jQuery hidden()和show()
通过 jQuery,可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
语法

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

案例:

HTML代码:

<p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;">如果你点击,我们两个将会被隐藏</p>
<p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;"></p>
<button id="btn1" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">点击2000毫秒隐藏</button>
<button id="btn11" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">点击6000毫秒隐藏</button>
<button id="btn2" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">点击还原</button>
<button id="btn22" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">点击slow还原</button>

JS代码:

$(function(){
$("#btn1").click(function(){//点击产生隐藏效果
$("p").hide(2000);//2000毫秒隐藏
});
$("#btn11").click(function(){
$("p").hide(6000);//6000毫秒隐藏
}); $("#btn2").click(function(){
$("p").show();
});
$("#btn22").click(function(){
$("p").show("slow");
});
})

效果:

 也可以使用 toggle() 方法来切换 hide() 和 show() 方法。

语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称

案例:

HTML代码:

<p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;">如果你点击,我们两个将会被隐藏</p>
<p id="" class="" style="width: 200px;height: 100px;background-color: #CCCCCC;"></p>
<button id="btn1" style="width: 100px;height: 50px;border-radius: 25px;background-color: greenyellow;outline: none;">显示/隐藏</button>

JS代码:

$(function(){
$("#btn1").click(function(){
$("p").toggle();//toggle() 方法来切换 hide() 和 show() 方法。
}); })

效果:

变化2

JS代码:

$(function(){
$("#btn1").click(function(){
$("p").toggle(2000);//toggle() 方法来切换 hide() 和 show() 方法。
}); })

效果:

时间有限,本篇博文就分享到这,欢迎各位大神多多交流

jQuery教程详解(一)的更多相关文章

  1. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  2. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  3. 史上最全的maven pom.xml文件教程详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. jQuery.validator 详解二

    前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...

  5. SAE上传web应用(包括使用数据库)教程详解及问题解惑

    转自:http://blog.csdn.net/baiyuliang2013/article/details/24725995 SAE上传web应用(包括使用数据库)教程详解及问题解惑: 最近由于工作 ...

  6. jQuery.validator 详解

    jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...

  7. jquery方法详解

    jquery方法详解 http://www.365mini.com/doc

  8. 重置出错?微软Win10平板Surface Pro 4重装系统教程详解

    重置出错?微软Win10平板Surface Pro 4重装系统教程详解 2015-12-11 15:27:30来源:IT之家作者:凌空责编:凌空 评论:65 Surface Pro 4系统重置出错该怎 ...

  9. QuartusII13.0使用教程详解(一个完整的工程建立)

    好久都没有发布自己的博客了,因为最近学校有比赛,从参加到现在都是一脸懵逼,幸亏有bingo大神的教程,让我慢慢走上了VIP之旅,bingo大神的无私奉献精神值得我们每一个业界人士学习,向bingo致敬 ...

随机推荐

  1. Java反射机制剖析(二)-功能以及举例

    从<java反射机制剖析(一)>的API我们看到了许多接口和类,我们能够通过这些接口做些什么呢? 从上篇API中我们能看到它能够完成下面的这些功能: 1)     获得类 A.     运 ...

  2. jQuery选择器中的空格问题

    前几天就遇到过这样的问题,明明我用的是('tr :even').css('background','#ccc')想改变表格中行的背景色,反复试了还是没改变.还问了度娘还是没找到原因所在(当时问题描述的 ...

  3. reshape: from long to wide format(转)

    This is to continue on the topic of using the melt/cast functions in reshape to convert between long ...

  4. iOS安全攻防之阻止GDB依附

    GDB是大多数hackers的首选,阻止GDB依附到应用的常规办法是: #import <dlfcn.h> #import <sys/types.h> typedef int ...

  5. JavaScript中的该如何[更好的]做动效

    在用js写动画的时候,无非使用 setTimeout/setInterval 或者 requestAnimationFrame 来处理动画(在jquery的代码里也是这么干的),本文主要为了记录下两者 ...

  6. Android6.0-运行时权限处理

    为什么需要有运行时权限? 大家都知道在Android6.0之前,权限在应用安装过程中只询问一次,以列表的形式展现给用户,如果点击取消(即不认可应用所申请的权限),则会取消应用的安装.而用户出于安装应用 ...

  7. 生成JSON数据--官方方法

    官方生成方法: 1)需要什么就给什么,要属性就给属性,要对象就给对象,要集合就给集合 2)添加都是使用put()方法 要求: 1.生成如下JSON数据: {"age":4,&quo ...

  8. Python一键升级所有 模块/package

    import os,time allPackage=os.popen('pip list') allPackage=allPackage.read() allPackage=allPackage.sp ...

  9. 关于combotree的用法总结

    后台: 实体树 public class TreeNode{ private String id; private String text; private String level; private ...

  10. HTTPS反向代理嗅探

    两年前的文章,一直在本地笔记放着,发现博客上竟然没存.发出来. 先说说什么是SSL:     SSL是Secure Socket Layer的简称,中文意思是安全套接层,由NetScape公司开发,用 ...