jquery清空内容,jquery清空表单数据
jquery怎么清空div的子元素?
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
创新互联专注于榆林企业网站建设,成都响应式网站建设,商城网站定制开发。榆林网站建设公司,为榆林等地区提供建站服务。全流程按需开发,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
本文实例讲述了jQuery使用empty()方法删除元素及其所有子元素的方法,分享给大家供大家参考,具体实现方法如下:
$.ajax({
url: "SearchSN.aspx",
data: "SN=" + $("#txtStorageSN").val(),
cache: false,
success: function (html) {
$("#showResult").empty();
$("#showResult").append(html);
$("#showResult").css("color", "red");
}
});
页面:div id="showResult"/div
$("#showResult").empty();//清除div内容(Div内容是通过aspx页面进行动态添加的,需要先清除div内容)
怎样使用 jquery 清空文本框的内容
可以使用 jQuery 设置内容的val()方法来实现,设置内容为空即达到清空文本框内容的目的:
1
$("input[name='test']").val("").focus(); // 将name=test的文本框清空并获得焦点,以便重新输入
示例代码如下
创建Html元素
div class="box"
span点击按钮后清除文本框内容:/span
div class="content"
input type="text" name="test" value="这是默认的内容"
/div
input type="button" class="btn" value="清除文本框内容"
/div
设置css样式
div.box{width:300px;height:250px;padding:10px 20px;margin:20px;border:4px dashed #ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}
input[type='text']{width:200px;height:30px;border:none;}
input[type='button']{width:120px;height:30px;margin:10px;border:2px solid #ebbcbe;}
编写jquery代码
$(function(){
$("input:button").click(function() {
$("input[name='test']").val("").focus(); // 清空并获得焦点
});
})
JQuery,如何清除,除了点击的元素以外,其他所有元素
可以使用Jquery中的siblings()和remove()方法实现。实现原理主要是使用siblings获取被点击元素之外的同级元素,然后使用remove()删除。完整的代码如下:
运行的效果如下:
例如当点击DIV内容为2的框时,其他的DIV被清除,内容为2的框移到最顶,点击后的效果图如下:
扩展资料:
如果想对移到最顶的框进行一定的突出显示处理,比如给个背景颜色,字体加大,可以利用css()方法,代码如下:
!doctype html
html
head
meta charset="utf-8"
titleJQuery例子/title
link href="__CSS__/base.css" rel="stylesheet"
script src="__JS__/jquery.min.js"/script
/head
body
script
$(function(){
$(".class1").click(function() {
$(this).siblings().remove();
$(this).css({"background-color":"yellow","font-size":"50px"});
});
});
/script
div class="main"
div class="class1"1/div
div class="class1"2/div
div class="class1"3/div
div class="class1"4/div
/div
style type="text/css"
.main{width:640px;height:500px;margin:0 auto;border:1px solid red;}
.class1{width:90%;height:100px;margin:0 auto;border:1px solid red;margin-top:10px;font-size:40px;}
/style
/body
/html
运行的效果如下:
网页名称:jquery清空内容,jquery清空表单数据
文章链接:http://pwwzsj.com/article/dsdciph.html