恶补web之八:jQuery(1)

更新时间：2022-08-15 16:49:36

jquery是一个js库,极大的简化了js编程.jquery是一个写的更少,但做的更多的轻量级js库.

jquery位于一个js文件中,其中包含了所有jquery函数,可以用如下标记把jquery添加到网页中:

<head>

</head>

有2个版本的jquery可供下载,一个精简过的(production version),另一份是未压缩的(development version)供调试和阅读.都可以从jquery.com下载.

如果不想在本地存放jquery库,可以从google或microsoft加载cdn jquery核心文件:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

jquery语法实例:

$(this).hide() 隐藏当前html元素,$("#test").hide()隐藏id="test"的元素;

$("p").hide() 隐藏所有<p>元素, $(".test").hide()隐藏所有class="test"元素

其中美元符号$定义jQuery.

为了防止在完全加载文档之前就运行jquery代码,可以将jquery代码放置在document ready函数中:

$(document).ready(function(){

....

});

jquery选择器:

使用XPath来选择给定属性的元素:$("[href]") 选取所有带有href属性的元素,$("[href='X']")选取所有带有href值等于"#"的元素,$("[href$='.jpg']")选取所有href值以'.jpg'结尾的元素;

css选择器可以用以改变html元素的css属性:

$("p").css("background-color","red)

如果网页中含有多个页面,希望共享js代码便于DRY或重构,可以吧jquery函数放到独立的.js文件中:

jquery使用$作为jQuery的简写方式,为了避免和其他js库冲突(prototype也是用$),可以使用noConflict方法来解决该问题. var jq = jQuery.noConflict();

当遵循如下原则时,代码更便于维护:

1.把所有jquery代码放置于事件处理函数中

2.把所有事件处理函数放置于文档就绪事件处理器中

3.把jquery代码放置于单独的js文件中

4.如果存在名称冲突,则重命名jquery库

hide和show隐藏和显示节点

toggle切换hide和show,显示被隐藏的元素,并隐藏已显示的元素;

fadeIn用于淡入已隐藏的元素

fadeOut用于淡出可见元素

fadeToggle和toggle类似

fadeTo方法允许渐变为给定的不透明度

slideDown和slideUp用于向下和向上滑动元素

slideToggle类似

animate方法用于创建自定义动画

stop用于停止动画或效果

以上大部分方法都可以带一个callback函数,该函数将在当前动画100%完成之后执行;

可以用链接(chaining)技术,允许我们在相同的元素上运行多条jquery命名,一条接着另一条,如果要链接一个动作,只需要简单地把该动作追加到之前的动作上.

相关阅读