刘新修

使用jquery实现对cookie的操作  前段时间刚学完jquery和ajax，老师就要我们使用jquery和ajax做一个项目，功能类似于淘宝一样的网上购物，但是不允许使用服务器控件。那么要想保存用户登录信息的cookie也就只有使用jquery了。其实使用query操作cookie也不难。

 如果要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()。replaceWith()方法的作用是将所有的元素都替换成指定的HTML或者DOM元素。

也可以使用jQuery中另一种方法replaceAll()来实现，该方法与replaceWith()方法的左右相同，知识点到了replaceWith()操作，可以使用如下的jQuery代码实现同样的功能：

该示例用到的HTML代码：

 下面，让我们来学习制作一个简易的下拉面板。你可能已经见过许多下拉面板，在上面你只需要点击提示按钮，页面就会出现一个下拉面板。

下面是核心jQuery代码：

当点击一个带有class=”btn-slide”的元素时，jQuery就会对 <div id=”panel”> 元素进行展收操作（slideToggle），并且给<a class=”btn-slide”>元素添加一个class=”active”的属性。然后.active class通过CSS背景定位改变箭头的背景位置。

 1、停止元素的动画

很多时候需要停止匹两己元素正在进行的动画，例如上例的动画，如l果需要在某处停止动画，需要使用stop()方法。stop()方法的语法缩构为：

stop([clearQueue][,gotoEnd]);

参数clearQHCHC和gotoEnd都足町选的参数，为Boolean值(ture或flase)。clearQueue代表足胥婴清空术执{j．完的动嘶队列，90toEnd代表是否直接将萨在执行的动画跳转到术状态。
    如粜商接使川stop()方法．!【!IJ会。一即停．l卜专前一在进行的动画，如．粜接下来还有动画等待继续进行．呲0以当前状态J r始接下柬的动画。经常会遇到这种情况．在为。’个元索绑定hover事件之后．Jf】户把光标移入元素时会触发动画效粜，而当这个动画还没结束时，用户就将光标移出这个元素了，J且j么光标移出的动画效粜将会被放进队列之中，等待光标移入的动画结束后再执行。I蚓此如粜光标移入移出搿过快就会导致动画效粜．b光标的动作不一1致。此时只要神：光标的移入、移出动越之前加入stop()力‘法，就能解决这个问题。stop()方法会结束当前j下在进行的动l画，并立即执行队列中个动画。以下代码就可以解决刚才的问题。

2．判断元素是否处于动画状态

在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致.当用户快速在某个元素上执行animate()动画的时，就会出现动画积累。解决方法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。代码如下：

这个判断方法在animate()动画中经常被用到，需要特别注意。

CSS-DOM技术简单来书就是读取和设置style对象的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息，然而在jQuery中，这些都是非常的简单。

可以直接利用css()方法获取元素的样式属性，jQuery代码如下；

无论color属性是外部CSS导入，还是直接拼接在HTML元素里，css()方法都可以获取到属性style里的其它属性的值。

也可以直接利用css()方法设置某个元素的单个样式，例如：

与attr()方法一样，css()方法也可以同时设置多个样式属性，代码如下：

对透明度的设置，可以直接使用opacity属性，则可以通过如下jQuery代码实现：

如果获取某个元素的height属性，则可以通过如下jQuery代码实现；

在jQuery中还有另外一种方法也可以获取元素的高度，即height().他的左右是取得匹配元素当前计算的高度（px）。jQuery代码如下：

height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px.如果要用其他单位（例如em），则必须传递一个字符串。jQuery代码如下：

与height()方法对应的还有一个width()方法，它可以取得匹配元素的宽度值（px）。

同样，width()方法也能用来设置元素的宽度

此外，在CSS-DOM中，还有以下几个经常使用的方法。

1.offset()方法

它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left,它只对可见元素有效。例如用它来获取<p>元素的偏移量，jQuery代码如下：

2.position()方法

它的作用是获取元素相对于最近的一个postion样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left。jQuery代码如下：

3.scrollTop方法和scrollLeft()方法

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。例如使用下面的代码获取<p>元素的滚动条距离：

另外，可以为这两个方法指定一个参数，控制元素的滚动条到指定位置。例如使用如下代码控制元素内的滚动条滚动到距顶端300和距左侧300的位置；

用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌。单击“显示全部品牌”按钮同时，列表会将推荐的品牌的名字高亮显示，按钮里的文字也换成了“精简显示品牌”。再次单击“精简显示品牌”按钮，即可回到初始状态。

实现这个示例，代码如下：

1.从第4条开始隐藏后面的品牌（最后一条“其它”除外）。

$(“ul li:gt(4):not(:last)”)的意思是获取ul元素下索引值大于5的li元素的集合元素，然后去掉集合元素中的最后一个元素。

2.当用户单击“显示全部品牌”按钮时，执行一下操作。

首先获取到按钮，代码如下：

然后给按钮添加事件，使用show()方法把隐藏的品牌列表显示出来，代码如下：

由于给超练级添加onclick 事件，因此需要使用“return flash”语句让浏览器认为用户没有单击该超链接，从而阻止该超链接跳转。

之后，需要将“显示全部品牌”按钮文本切换成“精简显示品牌”，代码如下：

这里完成了两部操作，即把按钮的背景图片换成向上的图片，同时也改变了按钮文本内容，将其替换成了“精简显示品牌”。

接下来需高亮推荐品牌，代码如下：

使用filter()方法筛选出符合要求的品牌，然后为它们添加promoted样式。在这里推荐了3个品牌，即佳能、三星、松下。

3.当用户单击“精简显示品牌”按钮时，将执行以下操作。

由于用户单击的是同一个按钮，因此事件仍然是在刚才的按钮元素上。要将切换两种状态的效果在一个按钮上进行，可以通过判断元素的显示或者隐藏来达到目的，代码结构如下：

在jQuery中，与show方法相反的是hide()方法，因此可以使用hide()方法将品牌隐藏起来，代码如下：

接下来需要去掉所有的品牌高亮显示状态，此时可以使用removeClass()方法来完成，代码如下：

它将去掉所有li元素上的”promoted”样式，即去掉了品牌的高亮状态。

 该实例利用jQuery效果animate() 方法改变CSS背景定位属性实现动画效果，CSS背景属性值是逐渐改变的，这样视觉上就达到动画效果。

在写入这样的无序列表：

定义下面的CSS样式：

下面是实现效果的核心jQuery代码：

jQuery信息提示(jQuery Tooltip)效果可以很好的提升用户体验，在web developer中也经日趋频繁，下面是一个简单的jQuery息提示效果实例演示。

首先加载jQuery库文件：

下面是jQuery核心代码：

HTML代码如下：

在上一篇文章中，如果想在最后一步切换元素的CSS样式，而不是隐藏元素：

css("border","solid 5px blue");

如果知识按照常规的方式，将fadeOut(“slow”)改为css(“border”,”solid 5px blue”),并不能达到预期的效果。预期效果是在动画的最后一步改变元素的样式，而实际的效果是，刚开始执行动哈ude时候，css()方法就被执行过了。

出现这个问题的原因是css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。代码如下：

这样以来，css()方法就加入到动画队列中了，从而满足了上文提出的需求。