jQuery必会的增删改查Dom操作1
- 取赋值相关方法:val
- next和prev对比看
- next
- prev
- nextAll 和 nextUntil
- nextAll
- nextUntil
- siblings
- parent & parents & closest & offsetParent
- parent
- parents
- closest
- offsetParent
- slice
取赋值相关方法:val
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<style>
</style>
</head>
<body>
<form action="" method="GET">
<h3>选择你喜欢的明星</h3>
<select name="star" id="">
<option value="s">乔丹</option>
<option value="a">詹姆斯</option>
<option value="b">库里</option>
</select>
<h3>一句话简单介绍你喜欢的明星</h3>
<input type="text" name="easy" value="cst">
<h3></h3>
三分准:<input type="checkbox" name="special" value="three">
组织好:<input type="checkbox" name="special" value="org">
突破强:<input type="checkbox" name="special" value="strong">
<h3>具体描述该明显的技术特点</h3>
<textarea name="des" id="" cols="30" rows="10"></textarea>
<input type="submit" value="login">
</form>
<div></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
val 获取表单相关的元素的val值;
注意如果.val没有指定获取的某个标签里面的value值,默认选择显示第一个;
*/
console.log($('input[type=checkbox]').eq(1).val())
console.log($('input[type=checkbox]').val())
//获取from表单里面全部的name属性值和value属性值并且用&拼接起来
console.log($('form').serialize())
//获取from表单里面全部的name属性值和value属性值,展示形式以json对象来展示
console.log($('form').serializeArray())
//val 赋值,选中input的type为checkbox属性的标签,给value值加上它们的下标
$('input[type=checkbox]').val(function (index, oldValue) {
return oldValue + index
})
//val 赋值,选中特定的元素进行赋值
$('input[type=checkbox]').eq(1).val('xyz')
/*
val 赋值,如果给from表单外的标签进行赋值,
赋值的内容是不会显示到标签里面的,但是值是可以赋值的。
*/
$('div').val('xyz');
console.log('查看div里面的vaule值:', $('div').val())
</script>
</html>
next和prev对比看
next
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<style>
</style>
</head>
<body>
<!-- next -->
<button>change</button>
<span class="demo">xyz</span>
<p class="demo">lm</p>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
点击button按钮,使button按钮下面的第一个p标签改变,
而上面的body里面的button按钮下面的第一个标签是span,
所以点击button按钮不会有任何变化。
*/
$('button').click(function () {
$(this).next('p').css({ fontSize: "30px", color: "#ff0000" })
})
</script>
</html>
prev
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<style>
</style>
</head>
<body>
<!-- prev -->
<span class="demo">xyz</span>
<p class="demo">lm</p>
<button>change</button>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
点击button按钮,使button按钮上面的第一个p标签改变
*/
$('button').click(function () {
$(this).prev('p').css({ fontSize: "30px", color: "#ff0000" })
})
</script>
</html>
nextAll 和 nextUntil
nextAll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知"心"</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="wrapper">
全选:<input type="checkbox">
banana:<input type="checkbox">
apple:<input type="checkbox">
orange:<input type="checkbox">
<input type="submit" value="login">
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('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>
</html>
nextUntil
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<style>
</style>
</head>
<body>
<!-- nextUntil -->
<!-- 单独一个参数 -->
<div class="wrapper">
<h1>水果</h1>
全选:<input type="checkbox">
banana:<input type="checkbox">
apple:<input type="checkbox">
orange:<input type="checkbox">
<h1>nba</h1>
全选:<input type="checkbox">
Rose:<input type="checkbox">
Curry:<input type="checkbox">
James:<input type="checkbox">
<input type="button" value="submit">
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//水果和nba是两个部分,点击全选两个互不影响
$('h1').next().click(function () {
if ($(this).prop('checked')) {
/*
nextUntil('h1', 'input[type="checkbox"]'):
第一个参数表示:到哪里为止(h1);
第二个参数表示:只选择中间的那些元素('input[type="checkbox"]');
this当前的元素,到下一个元素h1
*/
$(this).nextUntil('h1', 'input[type="checkbox"]').prop('checked', true);
} else {
$(this).nextUntil('h1', 'input[type="checkbox"]').prop('checked', false);
}
})
</script>
</html>
siblings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<style>
</style>
</head>
<body>
<!-- siblings -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
获取第二个li的全部兄弟节点,
使之发生改变css({backgroundColor:'#0000ff',fontSize: '10px'}
*/
$('li')
.eq(1).css({ backgroundColor: '#ff0000', fontSize: '30px' })
.siblings().css({ backgroundColor: '#0000ff', fontSize: '10px' })
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<style>
</style>
</head>
<body>
<!-- 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>
<span>span3</span>
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
获取第二个li,全部的span兄弟节点.
*/
$('li')
.eq(1).css({ backgroundColor: '#ff0000', fontSize: '30px' })
.siblings('span').css({ backgroundColor: '#0000ff', fontSize: '10px' })
</script>
</html>
parent & parents & closest & offsetParent
parent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<style>
</style>
</head>
<body>
<!-- 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>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//获取button的父级
$('button').click(function () {
console.log($(this).parent()
)
})
</script>
</html>
parents
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<style>
</style>
</head>
<body>
<!-- parents -->
<div class="shop" data-id="101">
<div>
<p>basketball-nike</p>
<button>add</button>
</div>
</div>
<div class="shop" data-id="102">
<div>
<p>basketball-adidas</p>
<button>add</button>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//获取button的所有父级(parents()不填参数的情况下)
console.log($('button').eq(0).parents())
//获取指定的父级(parents()填写参数)
console.log($('button').eq(0).parents('.shop'))
</script>
</html>
closest
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<style>
</style>
</head>
<body>
<!-- closest -->
<div class="wrapper">
<ul>
<li>
<ul data-id="101">
<li>nike</li>
<li>200$</li>
<li>
<button>add</button>
</li>
</ul>
</li>
<li>
<ul data-id="102">
<li>nike</li>
<li>200$</li>
<li>
<button>add</button>
</li>
</ul>
</li>
</ul>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
closest:
离你最近的,满足条件的父级或者多个父级(如果自己满足条件,那么会选择自己)。
*/
console.log($('button').eq(0).closest('button'))
//获取标签 <ul data-id="101"></ul>里面的data-id属性的值
console.log($('button').eq(0).closest('ul').attr('data-id'))
</script>
</html>
offsetParent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<style>
.wrapper {
position: relative;
}
</style>
</head>
<body>
<!-- offsetParent -->
<div class="wrapper">
<div class="box">
<span>123</span>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
获取有定位的父级
*/
console.log($('span').offsetParent())
</script>
</html>
slice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<style>
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
slice():
左闭右开
*/
//获取第四个li到第五个li的背景颜色变成红色
console.log($('li').slice(3, 5).css({ backgroundColor: "#ff0000" }))
</script>
</html>