脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-浅谈Jquery的使用上篇，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
一、
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取、HTML 元素操作、 CSS 操作 、HTML 事件函数、 JavaScript 特效和动画、 HTML DOM 遍历和修改 、AJAX 、UtilITies
二、
2、Jquery有关的语法：
（1）、通过 jQuery，您实现的是隐藏和显示效果：
jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
语法：
$(selector).hide(sPEed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
语法：
$(selector).toggle(speed,callback);可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
（2）、通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery fadein() 演示 用于淡入已隐藏的元素。
语法：
$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
jQuery fadeOut() 演示 方法用于淡出可见元素。
语法：
$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
jQuery fadeToggle() 演示 jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法：
$(selector).fadeToggle(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
jQuery fadeTo() 演示jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：
$(selector).fadeTo(speed,opacity,callback);必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
（3）、jQuery 滑动方法可使元素上下滑动。
jQuery slideDown() 方法用于向下滑动元素。
语法：
$(selector).slideDown(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery slideUp() 方法用于向上滑动元素。
语法：
$(selector).slideUp(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
（4）、jQuery aniMATE() 方法允许您创建自定义的动画。
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
（5）、jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法
$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
3、Jquery有关的选择器：
上一篇当中着重讲解了Jquery选择器的使用，因此我就不再一一的列举了
4、Jquery有关的事件：
Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
三、
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
1、获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
2、获取属性 - attr()
jQuery attr() 方法用于获取属性值。
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
实例
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.COM.cn/jquery");
});
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：
实例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
实例
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
3、通过 jQuery，可以很容易地添加新元素/内容。
jQuery append() 方法在被选元素的结尾插入内容。
jQuery PRepend() 方法在被选元素的开头插入内容。
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
4、通过 jQuery，可以很容易地删除已有的 HTML 元素。
jQuery remove() 方法删除被选元素及其子元素。
jQuery empty() 方法删除被选元素的子元素。
5、通过 jQuery，可以很容易地对 CSS 元素进行操作。
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");下面的例子将为所有匹配元素设置 background-color 值：
实例
$("p").css("background-color","yellow");
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。
实例
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("p").addClass("important");
});
jQuery removeClass() 方法
下面的例子展示如何向不同的元素删除 class 属性。
实例
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
实例
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
6、尺寸：
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-浅谈Jquery的使用上篇全部内容，希望文章能够帮你解决javascript代码实例教程-浅谈Jquery的使用上篇所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。