添加元素的注意问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#dv1 {
width: 200px;
height: 200px;
border: 2px solid red;
margin-bottom: 20px;
}
#dv2 {
width: 200px;
height: 200px;
border: 2px solid green;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
$("#btn").click(function(){
// 把第一个div中的p标签加入到第二个div中
// $("#dv2").append($("#dv1>p"));
// $("#dv1>p").appendTo($("#dv2"));
$("#dv1>p").clone().appendTo($("#dv2"));
// 获取的元素通过append方法添加到另一个元素中的时候,类似于剪切
//
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv1">
<p>我是快乐的</p>
</div>
<div id="dv2"></div>
</body>
</html>复习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
/**
* 复习:
*
* 选择器:
* id选择器 $("#id属性的值")
* 标签选择器 $("标签名字")
* 类选择器 $(".类样式的名字")
* 交集选择器 $("标签.类样式的名字") ---->标签+类选择器
* 并集选择器 $("选择器,选择器,选择器,...")---->多条件选择器
* 都可以看成是筛选器
* 索引选择器 $("选择器:eq(索引的值)")
* 奇数筛选器 $("选择器:odd")
* 偶数筛选器 $("选择器:even")
* 筛选器 $("选择器:lt(索引)")---->获取小于这个索引的元素
* $("选择器:gt(索引)")---->获取大于这个索引的元素
* 其他选择器
* $("选择器:last")---->最后一个
* $("选择器:first")---->第一个
* 获取当前元素的其他的方法
* 当前元素.next()---->下一个兄弟元素
* 当前元素.nextAll()---->后面所有的兄弟元素
* 当前元素.prev()---->前一个兄弟元素
* 当前元素.prevAll()---->前面所有的兄弟元素
* 当前元素.siblings()---->所有的兄弟元素(没有自己)
* 当前元素.parent()---->父级元素
* 当前元素.chidren()---->当前元素中所有的子元素(直接的子元素)
* 当前元素.find("选择器")---->从当前元素中找某个或者某些元素
*
* 方法:
* .val()---->操作表单元素的value属性,可以获取也可以设置
* .text()---->操作元素中间的文本内容的,相当于innerText
* .html()---->操作元素中的html代码及内容,相当于innerHTML
* .css()---->操作元素的样式
* .addClass()---->添加类样式
* .removeClass()---->移除类样式
* .hasClass()---->判断元素是否应用了类样式
* .index()---->元素的索引
*
* 下面的这些动画的方法,一般都可以使用两个参数,参数1:时间,参数2:回调函数
* 参数--时间:1000毫秒----1秒
* 参数----时间:slow慢,normal----正常,fast---快
* https://api.jquery.com/
* https://api.jquery.com/fadeIn/#fadeIn-duration-complete
* .show()---->显示
* .hide()---->隐藏
* .stop()---->停止动画
* animate()---->动画的方法
* slideUp()---->滑入
* slideDown()---->滑出
* slideToggle()---->切换滑入和滑出
* fadeIn()---->淡入
* fadeOut()---->淡出
* fadeToggle()---->切换淡入淡出
* fadeTo(事件,透明度的值)
*
* 元素创建:
* $("html的代码")
* 元素的添加
* 父级元素.append(子级元素);
* 子级元素.appendTo(父级元素);
*
* clone()克隆元素
* 父级元素2.append($("父级元素1>子级元素"));相当于剪切过去
*/
</script>
</head>
<body>
</body>
</html>介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
/**
* 元素的创建--重点
* 例子----必须要写出来
* 如何移除某个元素中的其他的元素----不同的方式--都需要写
* 元素的val()方法的使用----注意的问题和使用方式
* 自定义属性----重点
* 做案例----操作元素的自定义属性
* 设置或者是获取元素的选中的问题(单选和复选的)
* 元素的样式设置:宽和高,卷曲的距离,offset的系列的属性操作--记录到笔记中
* jQuery中的事件绑定----很多的东西
*
* 链式编程的元素
* 插件
* UI
*
*
*/
</script>
</head>
<body>
</body>
</html>元素的创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 点击一个按钮,创建一个按钮
// $("#btn").click(function(){
// $("<input type='button' value='按钮'>").appendTo($("#dv"));
// });
// 元素创建的另一种方式
$("#btn").click(function(){
// 通过innerHTML的方式创建元素----以字符串的方式
$("#dv").html("<input type='button' value='按钮'>");
});
});
// var num = 10;
// num = 100;
</script>
</head>
<body>
<input type="button" value="创建一个web按钮" id="btn">
<div id="dv">
小苏凑合有点帅吧
</div>
</body>
</html>元素添加的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 点击按钮,创建元素
$("#btn").click(function(){
// 把创建的span标签这个子元素直接插入到div中第一个子元素的前面
// $("#dv").prepend($("<span>this is span</span>"));
// 主动的方式
// $("<span>this is span</span>").prependTo($("#dv"));
// 把元素添加到div的后面的位置,是div的下一个兄弟元素了
// $("#dv").after($("<span>this is span</span>"));
// 把元素添加到div前面的位置,是div的上一个兄弟元素了
$("#dv").before($("<span>this is span</span>"));
});
});
</script>
</head>
<body>
<input type="button" value="创建一个web按钮" id="btn">
<div id="dv">
<p>这是一个p</p>
</div>
<p>这是div后面的第一个子元素</p>
</body>
</html>元素移除的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
border: 2px solid red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// 页面加载
$(function(){
// 点击按钮
$("#btn").click(function(){
// 从父级元素移除子级元素----移除所有的子元素
// $("#dv").html("");
// 清空
// $("#dv").empty();
// 清空父元素中的子元素
// 自杀,想要干掉谁,直接找到这个元素,调用这个方法就可以了
$("#dv").remove();
});
});
</script>
</head>
<body>
<input type="button" value="移除元素" id="btn">
<div id="dv">
<p>这是一个p</p>
<span>这是一个span</span>
</div>
</body>
</html>