jQuery

来源：互联网发布：淘宝店铺管理工具编辑：程序博客网时间：2024/06/07 18:07

六、jQuery

jQuery是一个JavaScript库，能极大地简化JS编程。jQuery库包含以下特性：HTML元素选取，HTML元素操作，CSS操作，HTML事件函数，JavaScript特效和动画，HTML DOM 遍历和修改。jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数，在使用之前需要下载。

jQuery的基础语法是$(selector).action()，其中$定义jQuery，选择符(selector)查询和查找HTML元素，jQuery的action()执行对元素的操作。例如：

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，我们通常把jQuery函数放在一个document ready函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

jQuery选择器大致可以分为元素选择器、属性选择器以及CSS选择器等。对于元素选择器而言，jQuery通过CSS选择器来选取HTML元素，如$("p") 选取 <p> 元素，$("p.intro") 选取所有 class="intro" 的 <p> 元素，$("p#demo") 选取所有 id="demo" 的 <p> 元素。对于属性选择器而言，jQuery 使用 XPath 表达式来选择带有给定属性的元素，如$("[href]") 选取所有带有 href 属性的元素，$("[href='#']") 选取所有带有 href 值等于 "#" 的元素，$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素，$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。于CSS选择器而言，可以通过其改变HTML元素的CSS属性，如$("p").css("background-color","red")。其它如$("div#intro .head")选取id="intro" 的<div>元素中的所有class="head"的元素，$("ul li:first")选取每个<ul>的第一个<li>元素。

jQuery是为事件处理特别设计的，jQuery事件处理方法是jQuery中的核心函数，事件处理程序是指当HTML中发生某些事件时所调用的方法，通常把jQuery代码放到<head>部分的事件处理方法中。

通过jQuery中的hide()和show()函数可以实现HTML元素的隐藏和显示，其中，还可以在hide或show函数中设置隐藏或显示的速度，取值可以为"slow"、"fast"或ms。在jQuery中可以通过 toggle()方法来切换hide()和show()方法。

通过jQuery中的fade命令可以实现元素的淡入淡出效果，语法分别为$(selector).fadeIn(speed,callback)，$(selector).fadeOut(speed,callback)。fadeToggle的用法也用来在fadeIn和fadeOut之间切换，除此之外，fadeTo方法可以使指定元素渐变为给定的不透明度，语法$(selector).fadeTo(speed,opacity,callback)。

通过jQuery中的slide命令可以实现元素的上下滑动效果，语法分别为$(selector).slideDown(speed,callback)，$(selector).slideUp(speed,callback)，$(selector).slideToggle(speed,callback)。

在jQuery中，可以使用animate()方法创建自定义动画，语法为 $(selector).animate({params},speed,callback)，其中params参数定义行成动画的CSS属性。

0 0