文章目录
- 添加节点的几种方式
- 清除内容empty&remove
- 克隆节点clone
- 属性操作(attr,prop)
- 宽高
- scrollTop和scrollLeft
- class操作
- 表格全选案例
添加节点的几种方式
1、append() 父元素.append(子元素)–>作为最后一个元素添加
<script>
// 1、append() 父元素.append(子元素)-->作为最后一个元素添加
$('#append').click(function () {
//创建一个新的li标签,添加到ul1中去
var newLi=$('<li>我是新创建的li标签</li>')
$('.ul1').append(newLi);
//把ul2中的li标签添加到ul1中去,剪切作为最后一个元素
var li3=$('#li3');
$('.ul1').append(li3);
});
</script>
2、prepend–>作为第一个元素添加
<script>
//prepend()--添加到最前面
$('#prepend').click(function () {
//新建一个li标签,添加到ul1中去
var newLi=$('<li>我是新建的li标签</li>');
$('.ul1').prepend(newLi);
//把ul2中已经存在的li标签添加到ul2中去,剪切后作为第一个子元素添加
var li4=$('#li4');
$('.ul2').prepend(li4);
});
</script>
3、before 元素A.before(元素B)–>把元素B插入到元素A之前,作为兄弟元素添加
<script>
//元素A.before(元素B);//把元素B插入到元素A之前,作为兄弟元素添加
$('#before').click(function () {
//新建一个div标签,添加到ul2中的第四个li标签前面
var newdiv=$('<div>我是新创建的div标签</div>');
var li4=$('#li4');
li4.before(newdiv);
});
</script>
4、after() 元素A.after(元素B)–>把元素A插入到元素B的后面,作为兄弟元素添加
<script>
//after() 元素A.after(元素B)-->把元素B插入到元素A的后面,作为兄弟元素添加
$('#after').click(function () {
//新建一个div标签,添加到ul2中的第四个li标签前面
var newdiv=$('<div>我是新创建的div标签</div>');
var li4=$('#li4');
li4.after(newdiv);
});
</script>
5、appendTo()
<script>
//5、appendTo()
$('#appendTo').click(function () {
//创建一个div,添加到ul1中去
var newDiv=$('<div>这是先创建的div</div>');
newDiv.appendTo(".ul1");
});
</script>
清除内容empty&remove
/*
* 清空元素内容:
* $("div").html("");
* $("div").empty();
* $("div").remove();
* */
克隆节点clone
/*
jQuery中克隆节点:clone()
只存在于内存中,如果要在页面上显示,要追加到元素,克隆到
后代节点
clone()方法参数是true表示会把事件一起克隆,false表示不会克隆事件
clone()的参数不管是true还是false,都是会克隆到后代节点的
默认是false
*/
<body>
<input type="button" value="clone" id="clone">
<div class="box"></div>
<p id="des">我是外边的p元素</p>
<script src="jquery-3.5.1.min.js"></script>
<script>
$('#clone').click(function () {
$('#des').clone().appendTo($("div"));
});
</script>
</body>
属性操作(attr,prop)
/*
*样式:写在style里面---用css操作
* 写在标签里面---用attr方法操作
*
* jQuery中操作属性:attr() removeAttr()
*
* 设置属性:
* 以前有这个属性就是更改属性
* 以前没有则是添加属性
* 可以修改自定义属性
*
* 可以通过对象设置多属性
*
* 获取属性:
* console.log($('img').attr('src');
* 自带的属性可以获取,自定义属性也可以获取,如果没有这个属性,获取的值就是undefined
*
* 移除单属性:$('img').remove('alt');
*
* 移除多属性:$('img').remove('alt aaa bbb');
* */
$('#btn').click(function () {
console.log($('#btn').attr('checked'));//无论是选中还是没选中,都返回undefined
});
//原因是:在jquery1.6之后,对于checked,selected,disabled这类Boolean类型的
//属性来说,不能用attr方法,只能用prop方法
$('#btn').click(function () {
//设置属性
$('#check').prop('checked','true');
//获取属性
console.log($('#check').prop('checked'));
});
宽高
<script>
$('#btn').click(function () {
//1、获取div的宽高--width(),height()
console.log($("#one").css("height"));//200px
//2、获取或者设置元素的宽高,这个宽高不包括padding/margin/border
$('#one').height(300);
console.log($('#one').height());//300,没有单位!!!
//3、innerWidth() innerHeight()
//方法返回元素的宽高,包括内边距
console.log($('#one').innerWidth());//240
//4、outerWidth() outerHeight()
//方法返回元素的宽高,包括内边距和把边框
console.log($('#one').outerWidth());//260
//5、outerWidth(true) outterHeight(true)
//true--包括外边距,false--不包括外边距
console.log($("#one").outerWidth(true));//300--内外边距阿和边框
//6、获取页面可视区域的宽高
console.log($(window).width());
});
</script>
scrollTop和scrollLeft
<style>
.im{
width: 200px;
height: 200px;
overflow: auto;
}
img{
width: 300px;
}
</style>
</head>
<body>
<input type="button" value="scroll" id="scroll">
<div class="im">
<img src="企鹅画廊/1.png" alt="">
</div>
<script src="jquery-3.5.1.min.js"></script>
<script>
//给按钮设置一个点击事件
$('#scroll').click(function () {
//获取
//scrollLeft()表示元素内容被卷曲出去的宽度
//scrollTop()表示元素内容被卷曲出去的高度
console.log($('.im').scrollTop()+":"+$('.im').scrollLeft());
});
</script>
</body>
class操作
<script>
$(function () {
$('input').eq(0).click(function () {
//添加一个basic类--addClass
$('li').addClass("basic");
});
$('input').eq(1).click(function () {
$('li').addClass('bigger');
});
//移除一个类--removeClass
$('input').eq(2).click(function () {
$("li").removeClass("basic");
});
//判断类--toggle
$('input').eq(3).click(function () {
//判断li有没有basic类,有则移除,无则添加
$('li').toggleClass("basic");
});
});
</script>
表格全选案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrap{
width: 300px;
margin:100px auto 0;
}
table{
border-collapse: collapse;
border-spacing: 0;
border:1px solid blueviolet;
width: 300px;
}
th,td{
border:1px solid blueviolet;
color:blueviolet;
padding: 10px;
}
th{
background-color: lightskyblue;
}
td{
font-family: SimSun;
font-weight: 900;
}
tbody tr{
background-color: #eaeaea;
}
tbody tr:hover{
background-color: #fafafa;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<table>
<thead>
<tr>
<th><input type="checkbox" id="all"></th>
<th>剧名</th>
<th>主演</th>
</tr>
</thead>
<tbody id="tbd">
<tr>
<td><input type="checkbox"></td>
<td>古剑奇谭</td>
<td>李易峰、杨幂</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>青云志</td>
<td>赵丽颖、李易峰</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>蜀山战纪</td>
<td>陈伟霆、赵丽颖</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>锦衣之下</td>
<td>任嘉伦、谭松韵</td>
</tr>
</tbody>
</table>
</div>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("#all").click(function () {
//修改下面的哪些chechbox
$('#tbd input').prop("checked",$(this).prop("checked"));
});
$("#tbd input").click(function () {
if($("#tbd input:checked").length==$("#tbd input").length) {
$("#all").prop("checked", true);
}else{
$("#all").prop("checked",false);
}
});
});
</script>
</body>
</html>