jquery学习

title: jquery学习
date: 2019-10-30

原本在个人博客上写了一些博文，现转移到CSDN上

最近手头上在做关于创建要素的一些工作，前台部分涉及多个div的输入区域，每个区域又包含多个input。类似这种

其中涉及到js的各种操作，需要利用jquery来实现多种效果，记录如下：

获取网页要素

在js操作中，需要获取网页中某个div的value，对value中的某些属性进行一些操作。
本例中，我所用的是jquery绑定按钮的id，获取当前的源div的value，并通过源div取数组来获取自己想要的div要素。

 $(document).on('click','#addmodel',function ($event) {
            var e = $event.originalEvent.path[4];//获取当前div的源div，取得modelarr的div的class值
            console.log(e.className);
 }

其中关键就是加上$event获取event值，来取得需要的要素value

使新增的button有效

在点击add之后，会新增一个条目，条目中有button，但是点击这个新增的button出现了无法触发click事件的情况。
原代码：

$("#add").click(function () {}

利用这种方式，新增的id为add的button点击后不会出发click事件，解决方法是改变jquery绑定方式。
现代码：

$(document).on('click','#add',function ($event) {}

此时，新增的button也可以生效。

定位到指定的class下的要素

有时需要对指定的class下的各种要素，例如li、button等要素进行操作，则需要进行定位。

$(".model").find("button").eq(0).html("").remove();//定位到class为model的div下的第一个button进行移除，可保证不会串div

按钮的各种操作
- 改变按钮value
```
$("#addmodel").html("ok");
```
可写在按钮的click触发事件中，改变按钮显示值
- 通过改变按钮class值来改变按钮颜色
```
$("#addmodel").remove("btn-success");
$("#addmodel").addClass("btn-warning");
```
如图，原先为绿色的class为btn-success，点击click后改变为黄色的class为btn-warning的按钮。
- 改变按钮属性
```
$('#addmodel').attr('id', 'addpast');
```
通过这句代码，将id值addmodel改变为addpast，同样可以改变其他的一些属性。