jQuery应用之jQuery链用法实例

本文实例讲述了jQuery应用之jQuery链用法。分享给大家供大家参考。具体分析如下:

很多时候我们可以将jQuery语句链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果。先看如下代码:

代码如下:

<script type="text/javascript">
    $(function() {
 $("div").addClass("css1").filter(function(index) {
     return index == 1 || $(this).attr("id") == "fourth";
 }).addClass("css2");
    });
</script>

以上代码为整个<div>列表增加样式css1,然后再进行筛选,再为筛选的元素单独增加css2样式。如果不采用jQuery,实现上述的效果将非常麻烦。

在jQuery链中,后面的操作都是以前面的操作结果为对象的,如果希望操作对象为上一步的对象,则可以使用end()方法。

用end()方法来控制jQuery链。


代码如下:

<script type="text/javascript">
    $(function() {
 $("p").find("span").addClass("css1").end().addClass("css2");
    });
</script>
<p>Hello,<span>how</span>are you?</p>
<span>very nice,</span>Thank you.

以上代码在<p>中搜索<span>标记,然后添加风格css1,利用end()方法将操作对象往回设置为$("p")并添加样式风格css2.

另外,还可以通过andSelf()将前面两个对象进行组合后共同处理。

用andSelf()方法控制jQuery链。


代码如下:

<script type="text/javascript">
    $(function() {
 $("div").find("p").addClass("css1").andSelf().addClass("css2");
    });
</script>
<div>
    <p>第一段</p>
    <p>第二段</p>
</div>

以上jQuery代码首先在<div>中搜索<p>标记,添加css1,这个风格只对<p>标记有效,然后利用andSelf()方法将<div>和<p>组合在一起,然后添加样式css2,这个风格对<div>和<p>均有效。

效果:

代码如下:

<div class="css2">
    <p class="css1 css2">第一段</p>
    <p class="css1 css2">第二段</p>
</div>

希望本文所述对大家的jQuery程序设计有所帮助。

(0)

相关推荐

  • jQuery中offsetParent()方法用法实例

    本文实例讲述了jQuery中offsetParent()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素. 所谓采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素. 此方法仅对可见元素有效. 语法结构: 复制代码 代码如下: $(selector).offsetParent() 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html>

  • jQuery中outerHeight()方法用法实例

    本文实例讲述了jQuery中outerHeight()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取第一个匹配元素外部高度. 默认情况下外部高度是高度(height).内补白(padding)和边框(border)之和. 如果参数设置为true的话,外补白(margin)尺寸也会算入外部宽度. 此方法对可见和隐藏元素均有效. 可以与outerWidth()方法结合学习. 语法结构: 复制代码 代码如下: $(selector).outerHeight(options) 参数列表: 参

  • jQuery中innerHeight()方法用法实例

    本文实例讲述了jQuery中innerHeight()方法用法.分享给大家供大家参考.具体分析如下: 获取第一个匹配元素内部区域高度. 包括内补白(padding).不包括边框border). 也就是说内部区域的宽度等于width和padding之和. 此方法对可见和隐藏元素均有效. 可以结合innerWidth()方法学习. 语法结构: 复制代码 代码如下: $(selector).innerHeight() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html

  • jQuery中innerWidth()方法用法实例

    本文实例讲述了jQuery中innerWidth()方法用法.分享给大家供大家参考.具体分析如下: 获取第一个匹配元素内部区域宽度. 包括内补白(padding).不包括边框border).也就是说内部区域的宽度等于padding和border之和. 此方法对可见和隐藏元素均有效. 可以结合innerHeight()方法学习. 语法结构: 复制代码 代码如下: $(selector).innerWidth() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html&

  • jQuery链式操作如何实现以及为什么要用链式操作

    两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作 原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回回来,对象当然可以继续调用方法啦,所以就可以链式操作了.那么,简单实现一个: 复制代码 代码如下: //定义一个JS类 function Demo() { } //扩展它的prototype Demo.prototype ={ setName:function (name

  • jQuery中outerWidth()方法用法实例

    本文实例讲述了jQuery中outerWidth()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取第一个匹配元素外部宽度. 默认情况下外部高度是宽度(width).内补白(padding)和边框(border)之和. 如果参数设置为true的话,外补白(margin)尺寸也会算入外部宽度. 此方法对可见和隐藏元素均有效. 可以与outerHeight()方法结合学习. 语法结构: 复制代码 代码如下: $(selector).outerWidth(options) 参数列表: 参数

  • 浅析jQuery的链式调用之each函数

    话说回来,虽然jQuery让学习前端技术的越来越多了起来,(本人就是因为学校图书馆偶然间遇到了一本jQuery基础教程(二)开始想深入的学习前端技术),关于jQuery的博文甚至多于javascript,它让编程的门槛大大的降低了,但是它隐藏了太多细节了,形如$('#id').append('<p>xxx</p>').clone().appendTo(x).end().css(...)................这样操作的模式已经很难找到常规javascript的影子.浏览器的

  • jQuery中ready事件用法实例

    本文实例讲述了jQuery中ready事件用法.分享给大家供大家参考.具体分析如下: 此事件会在文档加载就绪以后触发,也就是当DOM对象已经加载,并且网页内容全部呈现时候触发. ready()方法可以为ready事件绑定事件处理方法,并且此方法的选择器是唯一的,那就是document对象. 语法形式有三种,后两种是第一种的简写. 语法结构: 语法一: 复制代码 代码如下: $(document).ready(function) 语法二: 复制代码 代码如下: $().ready(function

  • jquery链式操作的正确使用方法

    糟糕的使用方法 复制代码 代码如下: $second.html(value);$second.on('click',function(){alert('hello everybody');});$second.fadeIn('slow');$second.animate({height:'120px'},500); 建议使用方法 复制代码 代码如下: $second.html(value);$second.on('click',function(){alert('hello everybody'

  • 使用JavaScript链式编程实现模拟Jquery函数

    代码很简单,主要是给大家提供个思路,也算是学习javascript这么长时间的一个小小的练手. 链式编程 是将多个操作(多行代码)通过点号"."链接在一起成为一句代码.链式代码通常要求操作有返回值,但对于很多操作大都是void型,什么也不返回,这样就很难链起来了,当然也有解决办法,可能不太优雅.链式编程的新思想在jQuery中已流行使用 复制代码 代码如下: <span>Hello,World!</span>  <script type="tex

随机推荐