Jquery中文网 perfect107.com
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jQuery教程详解(一)

jQuery教程详解(一)

发布时间:2020-05-13   编辑:perfect107.com
jquery中文网为您提供jQuery教程详解(一)等资源,欢迎您收藏本站,我们将为您提供最新的jQuery教程详解(一)资源

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.test").hide() - 隐藏所有 class="test" 的

元素
  $("#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 JSON的反序列化类 using问题的解决方法
jquery将一个表单序列化为一个对象的方法
JQuery解析HTML、JSON和XML实例详解
Jquery中的层次选择器与find()的区别示例介绍
jquery选择器-根据多个属性选择示例代码
jquery数组之存放checkbox全选值示例代码
jquery select 设置默认选中的示例代码
jquery ajax中使用jsonp的限制解决方法
Jquery实现网页跳转或用命令打开指定网页的解决方法
利用js(jquery)操作Cookie的方法说明

关键词: jquery  教程  详解   
[关闭]