十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
!doctype html
创新互联建站从2013年成立,先为连云港等服务建站,连云港等地企业,进行企业商务咨询服务。为连云港企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
html
head
meta charset="utf-8"
title插入输入框/title
script type="text/javascript" src="js/jquery-3.1.1.min.js"/script
script
function f1(){
var text='div class="a1"/divinput type="text"br';
if($("#a1").val()!="")
{
$("#baojie li").append(text);
};
};
/*function f1(btn){
var x = document.createElement("li");
var z=document.getElementById("baojie");
var input=document.getElementById("a1");
var name = input.value;
if(name != ""){
z.appendChild(x).innerHTML='div class="a1"'+'/div'+'input type="text"'+'br';
}else{
return;
}
}*/
/script
style type="text/css"
.neirong li{
list-style-type:none;
display:inline;
}
.neirong{
width:400px;
margin:0 auto;
}
.neirong div{
text-align:center;
width:50px;
display:inline-block;
margin:10px 0;
}
.neirong #btn{
background:none;
border:none;
color:#3d8ad4;
}
.neirong .a1{
height:16px;
width:58px;
}
/style
/head
body
!--logo--
div class="neirong"
form
uldiv时间/div
li
input type="text"
/li
/ul
ul id="baojie"div保洁员/div
li
input type="text" id="a1"/input type="button" value="+添加一行" id="btn" onClick="f1(this)" /br/
/li
/ul
uldiv费用/div
li
input type="text"
/li
/ul
/form
/div
/body
/html
这是我写的一个点击按钮添加输入框的代码,你可以参考一下(注意,我这是必须在输入框里输入内容后才能添加)
应当使用append()方法,因为html()方法用于设置内容时,会重写所有匹配元素的内容,因此会替换。
1、关于append()方法定义和用法:
append() 方法在被选元素的结尾插入指定内容。此外,如需在被选元素的开头插入内容,请使用 prepend() 方法。
2、语法:
$(selector).append(content,function(index,html))。
3、设计一个简单的html页面,存在一个div,和一个添加按钮。
4、设计简单的css样式:
5、此时的页面展示如下:
6、设计一个简单的select元素:
7、此时点击一次按钮,查看页面效果:
8、再次点击,如下出现两个select。
可以先给div标签设置id,然后给这个id绑定点击事件。
1、新建html文档,在body标签中添加一个div标签,为div标签设置一个id,这里以“demo”为例:
2、在head标签中引入jquery的js文件,这时可以使用cdn链接:
3、添加script标签,在script标签中绑定“demo”,然后使用click函数为div标签绑定点击事件:
jquery 复制DIV内容到另一个div中
例如下代码:
i class="m_tab" id="A_name"张三/i
i class="m_tab" id="A_sex"男/i
i class="m_tab" id="A_age"30/i
把以上已生成的内容对应复制到下面input框里:
input class="m_input" id="B_name" value="张三"
input class="m_input" id="B_sex" value="男"
input class="m_input" id="B_age" value="30"
可以使用下方代码:
function showDiv(xid){
var div1 = $('#A_'+xid),a = $('#B_cname');
var div2 = $('#A_sex'),b = $('#B_sex');
var div3 = $('#A_age'),c = $('#B_age');
for(var i=0;idiv1.length;i++){a.append(''+div1[i].innerText+'')}
for(var i=0;idiv2.length;i++){b.append(''+div2[i].innerText+'')}
for(var i=0;idiv3.length;i++){c.append(''+div3[i].innerText+'')}
扩展资料:
语言特点
1、快速获取文档元素
jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。
2、提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。
3、创建AJAX无刷新网页
AJAX是异步的JavaScript和XML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用AJAX,每次数据更新不得不重新刷新网页,而使用AJAX特效后,可以对页面进行局部刷新,提供动态的效果。
4、提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。
5、增强的事件处理
jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太多事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。
6、更改网页内容
jQuery可以修改网页中的内容,比如更改网页的文本、插入或者翻转网页图像,jQuery简化了原本使用JavaScript代码需要处理的方式。
参考资料来源:百度百科-jQuery
1、jQuery设置css样式
div style="background-color:#ffffff;padding-left:10px;"测试jQuery动态获取padding-left/div
2、用css()方法返回元素的样式属性
$("div").css("padding-left"));
3、用css()设置样式
$("div").css("color","yellow");
4、设置多个样式
$("div").css({"background-color":"yellow","font-size":"200%"});
var css = {
background-color: '#EEE',
height: '500px',
margin: '10px',
padding: '2px 5px' };
$("div").css(css);
使用attr()或prop()方法为id属性赋值即可,关键代码
$(obj_div).attr('id',id_name);
$(obj_div).prop('id',id_name);
实例演示如下:点击按钮设置div标签的id为test,为了便于观察效果,css中设置了id为test的样式为红色
1、HTML结构
style
#test{color:red !important; font-weight:bold;}
/style
div我是示例DIV/div
input type="button" value="设置上一个div的id为test"
2、jquery代码
$(function(){
$("input:button").click(function() {
$(this).prev("div").attr("id","test");
});
});