.next  .prev

    <button>change</button>
<span class = '.demo'>aaa</span>
<p class = '.demo'>bbb</p>
<script src="./jquery.js"></script>
<script>
$('button').click(function(){
$(this).next().css({fontSize:'20px',color:'orange'})
})
// next中可以传参数 如:next('p') 如果下一个兄弟元素节点不是p则不显示
//prev 同理 next

nextAll( )  prevAll(  )

 nextAll
<div class="wrapper">
全选:<input type="checkbox"></input>
banana:<input type="checkbox">
apple:<input type="checkbox">
orange:<input type="checkbox">
<input type="submit" value = "login"></input>
</div>
<script src = "./jquery.js"></script>
<script>
$('input[type="checkbox"]').eq(0).click(function(){
if( $(this).prop('checked')){
$(this).nextAll().prop('checked',true)
}else{
$(this).nextAll().prop('checked',false)
}
})
//(在控制台输出) $('input:last').prop('checked') 返回true
//但是最后submit不需要被选择 所以在nextAll中需添加'input[type="checkbox"]'
$('input[type="checkbox"]').eq(0).click(function(){
if( $(this).prop('checked')){
$(this).nextAll('input[type="checkbox"]').prop('checked',true)
}else{
$(this).nextAll('input[type="checkbox"]').prop('checked',false)
}
})
</script>

nextUntil   直到什么为止

   <div class="wrapper">
<h1>水果</h1>
全选:<input type="checkbox"></input>
banana:<input type="checkbox">
apple:<input type="checkbox">
orange:<input type="checkbox"> <h1>nba</h1>
全选:<input type="checkbox"></input>
Rose:<input type="checkbox">
Curry:<input type="checkbox">
James:<input type="checkbox">
<input type="button" value = "submit">
</div>
<script src = "./jquery.js"></script>
<script>
$('h1').next().click(function(){
if( $(this).prop('checked')){
$(this).nextUntil('h1','input[type="checkbox"]').prop('checked',true)
}else{
$(this).nextUntil('h1','input[type="checkbox"]').prop('checked',false)
}
});
//nextUntil两个参数 第一个表示到哪为止 第二个是限定条件,也就是找哪个属性
</script>

小练习

   <div class="wrapper">
all: <input type="checkbox"></input>
<h1>吃货清单</h1>
all: <input type="checkbox"></input>
<h2>水果</h2>
全选:<input type="checkbox"></input>
banana:<input type="checkbox">
apple:<input type="checkbox">
orange:<input type="checkbox"> <h2>蔬菜</h2>
全选:<input type="checkbox"></input>
tomato:<input type="checkbox">
egg:<input type="checkbox">
potato:<input type="checkbox">
<h2></h2>
<h1>明星清单</h1>
all: <input type="checkbox"></input>
<h2>nba</h2>
全选:<input type="checkbox"></input>
Rose:<input type="checkbox">
Curry:<input type="checkbox">
James:<input type="checkbox">
</div>
<script src = "./jquery.js"></script>
<script>
$('input').eq(0).click(function(){
if( $(this).prop('checked')){
$(this).nextAll('input[type="checkbox"]').prop('checked',true)
}else{
$(this).nextAll('input[type="checkbox"]').prop('checked',false)
}
})
$('h1').next().click(function(){
if($(this).prop('checked')){
$(this).nextUntil('h1','input[type="checkbox"]').prop('checked',true)
}else{
$(this).nextUntil('h1','input[type="checkbox"]').prop('checked',false)
}
})
$('h2').next().click(function(){
if($(this).prop('checked')){
$(this).nextUntil('h2','input[type="checkbox"]').prop('checked',true)
}else{
$(this).nextUntil('h2','input[type="checkbox"]').prop('checked',false)
}
})
</script>

siblings

   <ul>
<span>span1</span>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<span>span2</span>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<span>span3</span>
<li>9</li>
<li>10</li>
</ul>
<script src = "./jquery.js"></script>
<script>
$('li').eq(4).css('backgroundColor','red').siblings().css('backgroundColor','orange')
//所以兄弟元素节点
$('li').eq(4).css('backgroundColor','red').siblings('span').css('backgroundColor','orange')
//传参代表过滤 (只选span标签) </script>

parent()(上一级父级)  可以不传参   传参为过滤条件

   <!-- <div class="shop" data-id = "101">
<p>basketball-nike</p>
<button>add</button>
</div>
<div class="shop" data-id = "102">
<p>basketball-adidas</p>
<button>add</button>
</div> --> <div class="wrapper"> </div>
<script src = "./jquery.js"></script>
<script>
var showArrs = [
{
name:'nike',
id:'101'
},{
name:'adidas',
id:'102'
}
]; //把数据写成上面注释的形式
var str = '';
showArrs.forEach(function(ele,index){
str += '<div class="shop" data-id=" '+ ele.id +' "><p> '+ ele.name +'</p><button>add</button></div>';
});
$('.wrapper').html(str);
var carArr = [];
$('button').click(function(){
carArr.push( $(this).parent().attr('data-id') );
});
</script>

parents( ) 获取多个父级  可以不传参  也可以传参过滤

closest  离你最近的满足条件的父级

父级重复可以使用closest  找到最近的父级

offsetParent

  <style>
.wrapper{
position:absolute;
}
</style>
<body>
<div class="wrapper">
<div class="box">
<span>123</span>
</div>
</div>
<script src = "./jquery.js"></script>
<script>
console.log($('span').offsetParent());//找离他最近有定位的父级 (是wrapper)
</script>

.slice()  截取

insertBefoe( )、 before( )

insertAfter( )、after( )

appendTo( )   append( )

prependTo( )   prepend(  )

    <style>
.wrapper{
border:1px solid black;
width:200px;
padding:10px;
}
.wrapper div{
width:200px;
height:100px;
}
.wrapper .box1{
background:red;
}
.wrapper .box2{
background:orange;
}
.content{
width:200px;
height:50px;
background:blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="content">content</div>
<script src = "./jquery.js"></script>
<script>
$('.content').insertBefore('.box1');//插入content在box1的前面
$('.box1').before($('.content'));//填在before里的内容在前面
//两个方法结果相同 选用哪个取决于想对哪个元素进行链式操作 第一种对.content进行操作,第二种对box1操作
//insertAfter( )、after( )用法相同 $('.content').appendTo('.wrapper');//把前面的添加到后面的里
$('.wrapper').append( $('.content') );//意思与上面相同 $('.wrapper').prepend( $('.content') );
$('.content').prependTo('.wrapper'); //在什么前面添加 </script>

remove( )  detach( )

    <style>
div{
width:100px;
height:100px;
background:orange;
}
</style>
</head>
<body>
<div></div>
<script src = "./jquery.js"></script>
<script>
$('div').click(function(){
alert(0);
})
//控制台中输出:
$('div').remove().appendTo( $('body') ) //将div删除再添加回来,原来的点击事件也没了
$('div').detach().appendTo( $('body') )//原来的点击事件保留
</script>

$( ) 参数:标签字符串    可以创建元素

    <style>
div{
width:100px;
height:100px;
background:orange;
}
</style>
</head>
<body> <script src = "./jquery.js"></script>
<script>
$('<div></div>').appendTo( $('body'));//可以创建标签
$('<div><span style="color:red;">aaa</span></div>').appendTo( $('body'));//可以创建复杂的
$('<div><span style="color:red;">aaa</span></div><p></p>').appendTo( $('body'));//同级的标签(p)也可以放在后面
</script>

.wrap( )   .wraplnner( )    wrapAll   unWrap

  .wrap( )
<div class="demo"></div>
<div class="box"></div>
<script src = "./jquery.js"></script>
<script>
//wrap 创建父级
$('.demo').warp('<div></div>');//参数可以传字符串这种创建对象的形式
$('.demo').warp('<div class="wrapper"></div>');//可添加属性
$('.demo').warp( $('<div class="wrapper"></div>') );//也可创建对象这种形式
$('.demo').warp( $('.box') );//选中已有的标签是复制
//wrap() 也可填函数
  .wraplnner( )
<div class="demo">
<span></span>
<span></span>
</div>
<script src = "./jquery.js"></script>
<script>
//wrapInner 内部标签加父级
$('.demo').wrapInner('<div/>'); //demo里的span就会被div包裹住
//也可以是函数的形式
$('.demo').wrapInner(function(index){
return '<div class="wrapper' + index + '"></div>'
});
</script>
wrapAll 统一加上父级  wrap是分别加上  (比如有两个class为demo 的div 统一给div里的元素加上一个父级  用wrap就是分别给两个div里的元素加一个父级)
unWrap 把直接父级删掉 一直调用一直往上删 (到body为止)

.clone( )

jQuery之必会增删改查Dom操作的更多相关文章

  1. jQuery调用WebService实现增删改查的实现

    第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现. 1 <!DOCTYPE html> 2 3 <html xmlns="http://ww ...

  2. 使用DOM进行xml文档的crud(增删改查)操作<操作详解>

    很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...

  3. mysql增删改查相关操作

    mysql增删改查相关操作 以前用mysql用的少,对于数据库相关的操作不熟悉,现在开始要接触数据库了,记录一下相关的基础操作吧. 1.数据库的授权操作 # mysql -u root -p Ente ...

  4. ssm 框架实现增删改查CRUD操作(Spring + SpringMVC + Mybatis 实现增删改查)

    ssm 框架实现增删改查 SpringBoot 项目整合 一.项目准备 1.1 ssm 框架环境搭建 1.2 项目结构图如下 1.3 数据表结构图如下 1.4 运行结果 二.项目实现 1. Emplo ...

  5. BaseDao代码,用于连接数据库实行增删改查等操作

    在学习JavaWeb时会用到此代码,用于实行增删改查操作 1 package com.bdqn.dao; import java.sql.Connection; import java.sql.Dri ...

  6. android139 360 黑名单 增删改查-数据库操作

    BlackNumberOpenHelper.java package com.itheima52.mobilesafe.db.dao; import android.content.Context; ...

  7. [Android] SQLite数据库之增删改查基础操作

        在编程中常常会遇到数据库的操作,而Android系统内置了SQLite,它是一款轻型数据库,遵守事务ACID的关系型数据库管理系统,它占用的资源非常低,可以支持Windows/Linux/Un ...

  8. MySQL常用增删改查等操作语句

    修改数据库的字符集    mysql>use mydb    mysql>alter database mydb character set utf8;创建数据库指定数据库的字符集    ...

  9. IDEA对数据库、表、记录的(增删改查可视化操作)、数据库安全性问题的演示

    对数据库的增删改查 新增数据库 修改数据库 删除数据库 对表的增删改查 新增表 修改表 删除表 对记录的增删改查 数据库安全性问题的演示 演示脏读 ​ 一个事物里面读到了另外一个事物没有提交的数据: ...

随机推荐

  1. Beta周王者荣耀交流协会第四次Scrum会议

    1.立会照片 成员王超,高远博,冉华,王磊,王玉玲,任思佳,袁玥全部到齐. master:任思佳 2.时间跨度: 2017年11月13日 11:40 — 12:10 ,总计30分钟. 3.地点: 一食 ...

  2. python用schedule模块实现定时任务

    1 import schedule 2 import time 3 4 def test(): 5 print("I'm working...") 6 def test2(): 7 ...

  3. 深入理解使用synchronized同步方法和同步代码块的区别

    一.代码块和方法之间的区别 首先需要知道代码块和方法有什么区别: 构造器和方法块,构造器可以重载也就是说明在创建对象时可以按照不同的构造器来创建,那么构造器是属于对象,而代码块呢他是给所有的对象初始化 ...

  4. Centos7 firewall开放3306端口

    目录 Centos7 firewall开放3306端口 1. 查看防火墙状态 2. 关闭防火墙firewall 3. 关闭防火墙firewall后开启 4. 开启端口 5. 重启防火墙 6. 常用命令 ...

  5. SQLServer调WebService & 错误解决:请求格式无法识别

    (sqlServer 2008 + VS2010) 首先,对服务器进行配置. sp_configure ; GO RECONFIGURE; GO sp_configure ; GO RECONFIGU ...

  6. 添加一个pv到vg后,误删新加入的pv,报 pv * not found or rejected by a filter

    问题如下 将某一pv加入vg vgextend cl /dev/xvdb1 然后进入fdisk将xvdb1分区删掉,重新创建pv 使用lvdisplay报警告 [root@localhost ~]# ...

  7. Java day1

    1. 学习java,首先是jdk的安装,JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境(JVM+ ...

  8. c#读sql server数据添加到MySQL数据库

    using System;using System.Collections.Generic;using System.Text;using Console = System.Console;using ...

  9. Spring生态研习【三】:Spring-kafka

    1. 基本信息介绍 基于spring的kafka应用,非常简单即可搭建起来,前提是要有一个kafka的broker集群.我在之前的博文里面已经介绍并搭建了一套broker环境,参考Kafka研究[一] ...

  10. 第六届蓝桥杯省赛 java三羊献瑞

    将文字看作一个个变量.根据一开始确定的文字的值进行暴力循环. 三羊献瑞 观察下面的加法算式: 祥 瑞 生 辉 + 三 羊 献 瑞------------------- 三 羊 生 瑞 气 (如果有对齐 ...