怎样用jquery做一个d出的输入框?

怎样用jquery做一个d出的输入框?,第1张

1、新建并保存一个html文档,进入html代码编辑页面。

2、写一个input文本输入框,并定义ID,然后写一个按钮,并定义ID。

3、要做的效果就是点击按钮为输入框赋值,然后把输入框和按钮的css样式写好,不写样式也可以。

4、引入jquery文件,路径要正确,写jquery代码,打开浏览器测试一下,点击按钮之后,输入框内就会自动输入赋值的内容。

<style>

.line div {display:inline-block}

</style>

<button id=btn type=button>按钮</button>

<div id=res></div>

<script>

$(function(){

   $("#btn").one("click",function(){

      $("#res").append("<div id=tab></div>")

      var btn1=$("<button type=button>添加</button>")

      btn1.click(addline)

      $("#res").append(btn1)

      var btn2=$("<button type=button>减少</button>")

      btn2.click(delline)

      $("#res").append(btn2)

      addline()

      function addline(){

         var n=$(".line").size()+1

         $("#tab").append("<div class=line><div>事件"+n+"<input type=text value=''/></div> <div>备注"+n+"<input type=text value=''/></div></div>")

      }

      function delline(){

         $("#tab .line:last").remove()

      }

   })

})

</script>

首先需要获取到文本框元素,然后通过Jquerycss *** 作方法修改样式。

Jquery可以根据标签名、id、类等很多方式选取元素。

ID选择器

# 选取带有唯一的指定 id 的元素。id 引用 HTML 元素的 id 属性。相同的 id 值只能在文档中使用一次。

类选择器

. 选择器选取带有指定 class 的元素。class 引用 HTML 元素的 class 属性。与 id 选择器不同,class 选择器常用于多个元素。这样就可以为带有相同 class 的任何 HTML 元素设置特定的样式

标签名选择器

element 选择器选取带有指定标签名的元素。标签名引用 HTML 标签的 <与 >之间的文本。

如题根据文本框的样式选择标签,我们可以通过以下代码实现。

\\比如文本框的class="text1",则通过类选择器选取。即:

$(".text1")

Jquery修改样式的方法有css,addClass,removeClass等方法.

例如如修改文本框的class="text1"的样式我们可以通过Css方法这样实现:

$(".text1").css({width:"70px",height:"20px",border:"1px solide gray"})

也可通过直接给该元素新增一个样式达到修改效果:

\*我们有一个text2的样式*\

.text2{

width:70px;height:20px;border:1px solide gray;

}

\\然后我们直接添加这个class

$(".text1").addClass("text2")

\\如担心之前已有样式和新增样式冲突,我们可以在添加的同时移除新样式。

$(".text1").addClass("text2").removeClass("text1")


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11578227.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-17
下一篇2023-05-17

发表评论

登录后才能评论

评论列表(0条)

    保存