jquery 层次选择器siblings与nextAll的区别介绍_jquery

HTML代码:

复制代码 代码如下:

<div>
<div >1</div>
<div class="one">
2
<div>2_1
<div>2_1_1</div>
</div>
<div>2_2</div>
</div>
<div>3</div>
<div>4</div>
</div>
$(".one div").css("background","red") // .one之后所有DIV后代元素(后代:包括儿子和孙子.....)
$(".one > div").css("background","red") // .one之后的子元素。(子:儿子和女儿....)
$(".one + div").css("background","red") // .one之后相邻的元素。就是紧靠.one之后的兄弟元素。只有一个
$(".one").next().css("background","red") // 这个作用同上
$(".one ~ div").css("background","red") //.one之后的兄弟元素。不包括前面的
$(".one").nextAll().css("background","red") //作用同上
$(".one").siblings().css("background","red") // .one所有的兄弟元素,不管是后面的还是前面的。

时间: 2024-11-02 19:42:03

jquery 层次选择器siblings与nextAll的区别介绍_jquery的相关文章

jquery 层次选择器siblings与nextAll的区别介绍

jquery 层次选择器包括siblings与nextAll,本文为大家介绍下具体的使用方法,想学习的朋也可以参考下,希望对大家有所帮助   HTML代码: 复制代码 代码如下: <div> <div >1</div> <div class="one"> 2 <div>2_1 <div>2_1_1</div> </div> <div>2_2</div> </di

jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍_jquery

insertBefore():a.insertBefore(b) a在前,b在后, a:是一个选择器,b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> <script type="text/javascript" src='jquery-2.2.0.min.js'></script&g

Jquery绑定事件(bind和live的区别介绍)_jquery

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

jQuery层次选择器选择元素使用介绍_jquery

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代.父子.相邻.兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.

jquery层次选择器使用说明

  1.find():找到该元素的子元素以及孙子元素(及所有后代元素). $('#box').find('p').css('color', 'white');//id为box下所有的p标签的颜色改为白色     2.children():找到该元素的子元素. $('#box').children('p').css('color', 'white');//id为box的所有子元素为p标签的改颜色为白色    3.next():找到该元素同一级元素的下一个元素. $('#box').next('p'

jquery选择器中的空格与大于号&amp;gt;、加号+与波浪号~的区别介绍_jquery

概念 空格:$('parent childchild')表示获取parent下的所有的childchild节点 大于号:$('parent > childchild')表示获取parent下的所有下一级childchild 加号:$('pre + nextbrother')表示获得pre节点的下一个兄弟节点,相当于next()方法 波浪号:$('pre ~ brother')表示获取pre节点的后面的所有兄弟节点,相当于nextAll()方法 详解描述 现有代码如下 <meta charset

JQuery的常用选择器、过滤器、方法全面介绍_jquery

1.jQuery对象转换成DOM对象 a. var $cr = $("#cr"); //jQuery对象 var cr=$cr[0]; //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 b. var $cr=$("#cr"); //jQuery对象 var cr=$cr.get(0); //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 2.DOM对象转换成jQuery对象 var c

jquery层级选择器的实现(匹配后代元素div)_jquery

如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>层级 </title&g

jquery对象和DOM对象的区别介绍_jquery

第一步,http://www.k99k.com/jQuery_getting_started.html 第二步,新手先仔细得全部看一遍jQuery的选择器,很重要!!! (http://shawphy.com/jqueryapi/ 这里是最新文档,有离线版下载) 第三步,深刻了解jQuery对象和普通DOM对象的区别.互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的$("#save&quo