JQUERY添加、删除元素、eq()方法;
2016-12-24 18:26
591 查看
一、jQuery - 添加元素
1.append() - 在被选元素内部的结尾插入指定内容2.prepend() - 在被选元素内部的开头插入指定内容
3.after() - 在被选元素之后插入内容
4.before() - 在被选元素之前插入内容
添加单个元素
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p>111</p> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("p").append("222"); $("p").prepend("333"); $("p").after("444"); $("p").before("555"); }); </script>
添加若干元素----重点
<body> <button onclick="tianjia()">追加文本</button> </body> </html> <script type="text/javascript"> function tianjia() { var txt1="<p>文本1</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本2"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本3"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 } </script>
二、jQuery - 删除元素
1.remove() - 删除被选元素(及其子元素)2.empty() - 从被选元素中删除子元素
<div id="div1"> 111111 <p>2222222</p> <p class="pp">3333333333</p> <p class="pp">444444444</p> </div> <br> <button>移除div元素</button> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); //删除div及其里边的p所有内容 $("#div1").empty(); //删除div里面的p标签里面的内容 $("p").remove(".pp"); //删除所有class为pp的p标签 }); }); </script>
[b] eq()方法:[/b]
1.eq() 方法返回带有被选元素的指定索引号的元素。
2.索引号从 0 开头,所以第一个元素的索引号是 0
<p>11111111</p> <p>11111111</p> <p>11111111</p> <p>11111111</p> </body> </html> <script> $(document).ready(function(e) { $("p").eq(1).css("background","red"); //取第二个p标签 }); </script>
相关文章推荐
- jQuery动态添加、删除元素的方法
- jQuery添加删除DOM元素方法详解
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
- jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
- jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
- jQuery添加删除DOM元素方法详解
- jQuery动态添加、删除元素的方法
- jquery中找到元素在数组中位置,添加或者删除元素的新方法
- jquery(全选、反选、添加、删除、移动元素)
- jQuery事件——live()方法:向未来的元素添加方法
- 在做动态添加删除行的时候,使用jquery遇到的问题:$("#participantList tr").eq(i).remove();
- jquery 如何动态添加、删除class样式方法介绍
- JQuery给元素添加/删除节点比如select
- 使用Jquery随机删除一个顺序列表中某个子元素的方法,保持效果统一性
- js与jquery获取父元素,删除子元素的两种不同方法
- Jquery显示、隐藏元素以及添加删除样式
- jquery添加和删除元素
- jquery 如何动态添加、删除class样式方法介绍
- jquery添加及删除样式的方法
- jQuery动态添加、删除元素