添加元素的注意问题复习介绍元素的创建元素添加的方法元素移除的方法

添加元素的注意问题

<!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>

添加元素的注意问题复习介绍元素的创建元素添加的方法元素移除的方法相关推荐

python list删除元素_python中List添加、删除元素的几种方法
原博文 2015-06-21 18:51 − 一.python中List添加元素的几种方法 List 是 Python 中常用的数据类型,它一个有序集合,即其中的元素始终保持着初始时的定义的顺序(除非 ...
jQuery创建、添加、删除元素
一.创建元素语法: $("<li></li>"); 动态的创建了一个 <li> 二.添加元素 1. 内部添加 1.element.ap ...
c语言数组添加字符元素,C语言数组添加和删除元素的实现
数组不擅长插入(添加)和删除元素.数组的优点在于它是连续的,所以查找数据速度很快.但这也是它的一个缺点.正因为它是连续的,所以当插入一个元素时,插入点后所有的元素全部都要向后移:而删除一个元素时,删除 ...
JQuery-jq属性操作、jq文本属性值、jq元素(创建、添加、移除)操作、jq尺寸、位置操作
属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 元素固有属性值 prop() - 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元 ...
为元素绑定多个相同事件绑定事件的另一种方式复习介绍元素的事件绑定
为元素绑定多个相同事件 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
html中splice向数组添加元素,js中splice()的强大(删除，插入或替换数组的元素)
1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(其实位置),第二个参数(0),第三个参数( ...
js 中添加php数组元素,JS数组添加元素方法总结
本篇文章介绍了如何向JS数组中添加新的元素,分别使用不同的几种方法去给JS数组添加元素,数组在JS中是很常用的数据类型之一,而对数组进行操作这是我们必会的基础之一. 下面我们来看一下有哪些方法可以对J ...
集合添加元素python_Python基础：列表、字典、元组、集合、添加和删除元素,增删...
列表(有序) 添加 list.append(元素):在列表末尾添加新的元素 list.extend(seq):在列表末尾一次性追加另一个序列中的多个值 –seq可以是列表.元组.字典,若为字典,则仅会 ...
腾讯云tcp考试多久出结果？腾讯云tcp考试考点和复习介绍
随着云计算流行起来,相对应的云计算方面的人才也非常受市场追捧.腾讯顺势而为推出腾讯云TCP.TCA.云从业者认证考试筛选人才.今天了解下腾讯云tcp考试多久出结果吗?腾讯云tcp考试多久出结果? 腾讯 ...

添加元素的注意问题复习介绍元素的创建元素添加的方法元素移除的方法

添加元素的注意问题复习介绍元素的创建元素添加的方法元素移除的方法相关推荐

最新文章

热门文章

添加元素的注意问题 复习 介绍 元素的创建 元素添加的方法 元素移除的方法

添加元素的注意问题 复习 介绍 元素的创建 元素添加的方法 元素移除的方法相关推荐

最新文章

热门文章

添加元素的注意问题复习介绍元素的创建元素添加的方法元素移除的方法

添加元素的注意问题复习介绍元素的创建元素添加的方法元素移除的方法相关推荐