开发工具与关键技术：VS、jQuery
作者：#33
撰写时间：撰写时间：2019年06月06日
jQuery添加元素的方法和移除元素的方法：
引入jQuery插件： <script src="jquery/1.10.2/jquery.min.js"></script>
- 向元素开头和结尾添加text文本内容，（红色箭头处）prepend() 的方法开头添加内容；append()的方法结尾添加内容。
- 在元素前后添加元素同样也是上面的方法。
源代码：
| <div class="content"> <div id="box"> <div class="one" id="one">one</div> <div class="two" id="two">two</div> <div class="three" id="three">three</div><div class="four" id="four">four</div> <div class="five" id="five">five</div><div class="six" id="six">six</div> <div class="seven" id="seven"> seven <ul><li>001</li> <li>002</li><li class="li003">003</li></ul> </div> </div> <div class="btnbtn"> <button id="addone">元素的开头插入内容</button> <button id="addtwo">元素的结尾插入内容</button> <button id="addfive">元素的开头插入元素</button> <button id="addfive2">元素的结尾插入元素</button> <button id="addsix">元素之后插入内容</button> <button id="addsix2">元素之前插入内容</button> <button id="addseven">删除元素</button> <button id="addseven2">选择删除元素</button> </div> </div> |
Css代码：
| <style>.content{width:100%; height:100%; } #box{ float:left; width:300px; height:300px;} div {text-align: center; width: 200px; height: 20px; margin-top: 10px;} .one {background: #ffd800;} .two { background: #b6ff00;} .three { background: #808080;} .four{ background: #ff6a00;} .five { width:200px; height:150px; background:#0094ff; border:1px solid #000; } .six{ background:#30ebc4; } .seven{width:200px;height:100px;background:#ffd800;border: 1px solid #000;} button { width:150px;height:30px;border-radius:20px;outline: none; border: none; background: #00ffff; margin-top:5px; } .btnbtn{float:left;} ul{ margin:0px;padding:0px;} ul li{ background:#fff;list-style:none;margin-top:5px;} </style> |
3、before() 方法元素之前插入内容
——如元素six
4、after() 方法元素之后插入内容
5、remove（）删除元素（及其子元素）
——如元素seven
6、empty() 删除元素中删除子元素——如seven中元素003
| <script> 获取按钮的id并且给一个点击事件的方法 $(document).ready(function () { //在元素内文本开头添加内容 $("#addone").click(function () { $("#two").prepend("开头内容"); }); //在元素内文本结尾添加内容 $("#addtwo").click(function () { $("#two").append("结尾内容"); }); //在元素前添加元素 $("#addfive").click(function () { $("#five").prepend("<p>开头添加元素-p标签</p>"); }); //在元素后添加元素 $("#addfive2").click(function () { $("#five").append("<p>结尾添加元素-p标签</p>"); }); //在元素前添加内容 $("#addsix").click(function () { $("#six").before("<b>six之前</b>"); }); //在元素后添加内容 $("#addsix2").click(function () { $("#six").after("<b>six之后</b>"); }); //移除元素 $("#addseven").click(function () { $("ul").remove(); }); //移除子元素 $("#addseven2").click(function () { $("li").remove(".li003"); }); }); </script> |