jQuery之常用且重要方法梳理(siblings,nextAll,end,wrap,apply,call,each)-(二)

简介:

1.siblings()

    siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。

复制代码
<body>
  <div><span>Hello</span></div>
  <p class="selected">Hello Again</p>
  <p>And Again</p>

<script>
$("p").siblings(".selected").css("background", "yellow");
</script>

</body>
复制代码

结果:

2.nextAll()

    nextAll() 方法返回被选元素的所有跟随的同胞元素。

复制代码
<script>
$(document).ready(function(){
  $("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
复制代码

结果:

3.end()

    end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。

复制代码
<head>
  <style>p { margin:10px; padding:10px; }</style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
  <p><span>Hello</span>, how are you?</p>
  <script>$("p").find("span").end().css("border", "2px red solid");</script>
</body>
复制代码

结果:

4.wrap(wrapper)

    wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。

复制代码
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrap("<div></div>");
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用 div 包裹每个段落</button>
</body>
复制代码

结果:

   wrap(function())

    使用函数来规定在每个被选元素周围包裹的内容。

复制代码
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").wrap(function(){
      return "<div></div>"
    });
  });
});

</script>
<style type="text/css">
div{background-color:yellow;padding:10px;}
</style>
</head>

<body>
<p>这是一个段落。</p>
<button>用 div 元素来包围 p 元素</button>
</body>
复制代码

结果:

5.each()

    each() 方法规定为每个匹配元素规定运行的函数。(提示:返回 false 可用于及早停止循环。)

复制代码
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
复制代码

结果:

6.call()

    调用一个对象的一个方法,以另一个对象替换当前对象。 

  apply()

    应用某一对象的一个方法,用另一个对象替换当前对象。 

提示:call与apply的不同就是call传的值可以是任意的,而apply传的剩余值必须为数组。

复制代码
function add(a, b) { return a + b; }

function sub(a, b) { return a - b; }

//apply
var a1 = sub.apply(add, [4, 2]);
var a2= add.apply(sub, [4, 2]);  


//call
var a1 = sub.call(add, 4, 2);

var a2= add.call(sub, 4, 2);

//输出:a1=2  a2=6
复制代码


转载:http://www.cnblogs.com/zqzjs/p/4656793.html

目录
相关文章
|
3月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
37 5
|
2月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
29 1
|
2月前
|
前端开发 JavaScript
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
53 6
|
3月前
|
JavaScript 前端开发
jQuery 杂项方法
jQuery 杂项方法
35 2
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
36 1
|
3月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
18 2
|
2月前
|
存储 JSON JavaScript
jQuery 方法大全
jQuery 方法大全
16 0
|
5天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
39 21
|
6天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
36 16
|
1天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
17 9