PS——了解JQuery
Query是一个快速、简洁的,是继Prototype之后又一个优秀的代码库( 或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的,并且可对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 UtilitiesjQuery语法
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代码:
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代码:
如果你点击,我们两个将会被隐藏
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代码:
如果你点击,我们两个将会被隐藏
JS代码:
$(function(){ $("#btn1").click(function(){ $("p").toggle();//toggle() 方法来切换 hide() 和 show() 方法。 }); })
效果:
变化2
JS代码:
$(function(){ $("#btn1").click(function(){ $("p").toggle(2000);//toggle() 方法来切换 hide() 和 show() 方法。 }); })
效果:
时间有限,本篇博文就分享到这,欢迎各位大神多多交流