jQuery子元素的操作
2018-09-18 本文已影响0人
孙子衡
常用子元素的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style>
ul{
width: 600px;
list-style: none;
}
li,p{
margin-bottom: 10px;
padding: 20px;
border: 2px solid #cccccc;
background: red;
}
p{
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1> 子元素选择器</h1>
<hr>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.
<ol>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<hr>
<ul id="myList">
<p>我在li上Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ut.</p>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ut.</p>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<p>我在li下Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ut.</p>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<hr>
<ul>
<li>hello world</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
//选择一个 是所有元素里面第一个的 li元素
$('li:first-child').css('color','yellow');
$('li:last-child').css('color','purple');
// li下面的第几个元素 下表从 1开始
$('li:nth-child(2)').css('color','blue');
// 规定属于容器元素的第二个子元素的每个 li 元素，从最后一个子元素开始计数：
$('li:nth-last-child(2)').css('color','green');
// 没有兄弟元素的 li
$('li:only-child').css('border','3px solid orange');
// 选择所有兄弟元素里面相同标签的第一个
$('#myList li:first-of-type').css('border','5px solid yellow');
// 选择 所有兄弟元素里面相同标签的第2个
$('#myList li:nth-of-type(2)').css('border','10px solid blue');
})
// 子元素
//$('#firstList').css('color','red');
// 选取子元素
$('#firstList').children('li').css('color','red');
// find() 选取后代
$('#firstList').find('li').css('border',' 5px solid yellow');
$('#haha').find('li').css('color','blue');
// 获取 祖先元素系列
$('#myItem').css('color','pink');
$('#haha').parent().css('border','3px solid orange');
$('#myItem').parent().css('border','2px solid green');
$('#xiao').parent().css('color','blue');
</script>
$(document).ready(function () {
// 所有的表单控件
$(':input').width(40).height(40).css('border','2px solid red');
$(':text').css('border','5px solid blue');
$(':password').css('backgroud','red');
$(':radio').width(100).height(100);
// 具有提交功能的按钮
$(':submit').css('border','1px solid purple');
//表单对象选择器
$(':disabled').css('backgroud-color','yellow');
//表单对象选择器
//$(":disabled").css("background-color", "yellow");
//$(":enabled").css("background-color", "yellow");
$(":checked").width(100).height(100)
$(":selected").css("color", "red");
})
</body>
</html>
位置操作
<script>
//获取位置
console.log($('.box').offset());
console.log($('.box').offset().left);
console.log($('.box').offset().top);
console.log($('.box').position().left);
console.log($('.box').position().top);
//改变位置
$('.box').offset({left:100,top:100});
</script>
<script>
$('#leftBtn').click(function () {
$('#box').scrollLeft($('#box').scrollLeft() + 10);
})
$('#topBtn').click(function () {
$('#box').scrollTop($('#box').scrollTop() +10);
})
//元素内容的尺寸
console.log($("#box").width(), $("#box").height());
//内容尺寸+padding
console.log($("#box").innerWidth(), $("#box").innerHeight());
//盒子的尺寸
console.log($("#box").outerWidth(), $("#box").outerHeight());
//设置
$("#box").width(200).height(200);
$("#box").innerWidth(300);
$("#box").outerWidth(500).outerHeight(400)
</script>
