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
时间: 2024-11-05 09:11:49

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

jQuery之常用且重要方法梳理(target,arguments,slice,substring,data,trigger)-(一)

1.jquery  data(name) data() 方法向被选元素附加数据,或者从被选元素获取数据. $("#btn1").click(function(){ $("div").data("greeting", "Hello World"); }); $("#btn2").click(function(){ alert($("div").data("greeting&quo

jquery里正则的使用方法及常用的正则验证

本文是一篇关于jquery使用正则来验证输入,及一些常用验证规则的基础文章,适合新手. 假设我们的网页里有这样的一个表单: <input id="aijquery" type="text"> <button id="btn">验证</button> 1.验证用户输入的只能是英文和数字: $("#btn").click(function(){ var $aijquery=$("#ai

夺命雷公狗jquery---18jquery中常用属性(方法)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> <script> //页面载入 $(function(){ //为按钮版定事件 $('#btnok').click(function(){ alert

Jquery的常用使用方法

1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项$('input:checkbox').each(function() {        if ($(this).attr('che

jquery 常用选择器及方法

1.jQeury:$("div span")和$("div>span")有什么区别啊?不都是选择div标签下的span么? 这涉及到CSS的知识哦~说明你的CSS没怎么学好呢嘿嘿,有空记得补学一下CSS基础. 关于CSS的选择器, > 是用来选取兄弟什么的(具体叫法我也忘了) 举个例子 <div> <span id = "span1"></span> <span id = "span

jquery常用函数与方法汇总

1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队列. duration:延时时间,单位:毫秒 queueName:队列名词,默认是Fx,动画队列. 例: 头部与底部延迟加载动画效果 $(document).ready(function() { $('#header') .css({ 'top':-50 }) .delay(1000).animat

JQuery常用选择器,方法,正则表达式

JQuer常用选择器,方法,正则表达式 JQuer 选择器 1) 标签选择器:$(" h3 ")取全部的h2元素 层次选择器:$("#div a ")取div下全部<a>元素 类选择器:  $(".title ")取全部class下的title元素 子选择器:     $(" #menu>span ")选取#menu下的子元素 Id 选择器:     $(" # title")取id 为t

jQuery的常用操作

梳理一下jQuery的常用操作 jQuery隐藏显示对象 id为test的元素的display修改成了"none",即隐藏了id为test的元素:$('#test').css('display','none') 或 $('#test').style.display="none" 我们经常用到的是切换一个元素的隐藏与现实,下面给出代码: var show = $('#test').css('display');//获取id为test的元素的display的值$('#t

jquery的常用操作(操作html页面的Dom对象的元素)

一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法) //第一种写法: $(document).ready(function() { // 执行体 }); //第二种写法 $(function() { //执行体 }); 二:用jquery获取dom对象,判断该对象是否有内容的两种方法(有返回true,没有返回false) jqObj.text().trim() var jqObj = $(this); if(jqObj.text().tr