首页 > 代码库 > jQuery教程详解（一）

jQuery教程详解（一）

2024-10-22 16:06:01   210人阅读

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教程详解（一）


联系
我们