jQuery(尚硅谷)笔记-------09

jQuery练习：动态添加和删除行记录：

前端页面body部分：

 

 页面效果：

引入css样式：

 css文件：

 

 我们先来做添加功能：

思路：当我们按钮后，增加一个行标签

 我们这时是把固定的数据加入到行标签中，运行一下：

现在是显示了3条数据，当我们什么都不输入的时候点击submit按钮，

我们发现我们现在又新添加了一条数据（Jerry）,但是这样我们只能添加固定的数据。

我们下一步构思就是要获取到前台页面输入的用户名和email，薪资内容，去代替固定的内容。

 再次运行：

 

 这样我们就实现了删除功能，接下来我们来实现以下删除功能。

 点击删除时：

 

 虽然成功绑定了，但是页面显示404未被找到，当我们做删除操作时，我们只想完成功能，并不想跳转页面。

这时已经不会再跳转页面了。

 我们为删除加一条提示：

现在当我们想删除的时候已经成功的出现了这样一条提示。

但是当点击确定时要删除数据，点击取消则不删除。我们现在要做出这个功能。

 

点击确定：

返回true

点击取消：

 

 返回false。

这样我们就能获取到当用户点击确定或删除时的状态。

我们的思路是选中哪一行，就删除哪一行：

 

这样我们可以找到对应行所选中的a标签，我们只要找它的两次父标签，就能找到选中对应行的行标签了。

 

 

 删除第一条：

 这样我们就实现了删除功能。

我们优化一下，在删除时提示删除的用户名：

但是此时这个功能有个漏洞：

当我们先添加一条记录时：

我们再去删除我们刚添加的那条记录：

我们发现并没有成功的删除，而是发生了页面跳转，发生了没有找到页面的错误 。

这是什么原因呢？

我们再来看看我们的jQ部分：

当页面完成加载时，就已经给a标签绑定了事件，但是这时实际上只有初始的3个a标签完成了绑定，我们手动添加的数据对应的a标签并没有被绑定。

所以接下来我们的思路是：在页面加载成功后，我们就在submit绑定的添加功能里去手动加入一个删除方法。做到每次增加一个记录，就同时再给它绑定一个删除事件。

这时我们只需要加上之前相同的删除功能的代码就可以了。

 

 

这样我们就彻底完成了删除功能。

完整jQ部分代码：

 

但是这个代码确实有些长，并且有代码重复的地方。所以我们也可以对代码进行简化和优化一下：

 我们的想法是把复用的删除代码放在一个新的方法里，每次需要实现删除的时候我们就调用这个方法。

优化后的jQ部分代码：

 

 css样式操作：

addClass()                添加样式

removeClass()          删除样式

toggleClass()            有就删除，没有就添加样式

offset()                       获取和设置元素的坐标

 我们先建一个页面：

页面效果：

然后我们开始逐一实现上述功能。

 css样式：

 先获取div对象：

增加样式：

removeClass():

 

括号里什么都不写视为全部删除：

点击按钮后：

toggleClass():

 

空白时点击：

再点击一次这个div 就没了：

 

offset():

 

点击后：

动画操作：

基本动画

show()        将隐藏的元素显示。

hide()          将可见的元素隐藏。

toggle()        可见就隐藏，不可见就显示。

例：

前端页面body部分：

 页面效果：

以上动画方法都可以添加参数。

1.第一个参数是动画执行的时长，以毫秒为单位。

2.第二个参数是动画的回调函数（动画完成后自动调用的函数）

然后我们利用jQuery开始实现功能：

显示和 隐藏：

 运行结果：

点击show()显示 点击hide()消失

也可以利用toggle()方法无限循环动画（之前见过）：

 

淡入淡出动画

fadeIn()        淡入（慢慢可见）

fadeOut()        淡出(慢慢消失)

 

fadeTo()     

   在指定时长内慢慢的将透明度修改到指定的值。0透明，1完全可见，0.5半透明

 

fadeToggle()