复习JS和jQuery
复习JS和jQuery
近些时日,以前学过的东西忘了好多。今天且写一点复习一下JS和jQuery.希冀与某年某月某日,忘却的时候,能看一下自己写的博文,尚可记起一二。
现在有需求如下:有两个按钮,一个是增加按钮,一个是删除按钮。当点击增加按钮的时候,就增加一行,当点击删除按钮的时候就删除一行, 要求是从最下面的开始删起,当只剩一行的时候就不可以再删除下去了。这个就有点相当于是第一行是表头吧,比如写姓名,或者年龄什么的,这些不可删除的,而下面写的实际的一些数据就可以删除了。要求用JS和jQuery做。
那么JS的代码如下:


效果就可以做到了。
这样就可以做到点增则增点删则删,且从下往上删,当只剩一行时,也就删除不了。
当然最简单的就是jQuery,代码量最少的也是jQuery的,因为它就是一个对JS的封装。就是JS的一个函数库。

其效果也是可以做到的,姓名和年龄那一列也是删除不了的。

小结如下:
:first 选取第一个元素。$("div:first")选取第一个<div>
:last 选取最后一个元素。$("div:last")选取最后一个<div>
:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>
:even、:odd,选取索引是偶数、奇数的元素:$("input:even")选取索引是奇数的<input>
:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
empty(); 清空某元素下的所有子节点 内部实现:while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一样。
remove(selector) 删除当前元素,返回值为被删除的元素。还可以继续使用被删除的节点。
复习JS和jQuery的更多相关文章
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
- label用js,jquery取值赋值,以及怎么在后台取值
label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...
- JS与Jquery区别
很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- JS和JQuery的总结
JS部分 一, 词法结构 区分大小 注意://单行 /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...
- js和jquery获取当前对象的子元素
开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...
- js+html+jquery 个人笔记
js+html+jquery 笔记 1.获取HTML对象 var obj = document.getElementById(elementId) 对象的值: obj.value() 2.获取jQue ...
- prototype.js 和 jQuery.js中 ajax 的使用
这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
随机推荐
- Java JPushV3服务端
因为JPush的官方文档太乱,所以依据原理自行实现. 主要技术就是post数据到https上和https的auth,实现起来还是很容易的. http://pan.baidu.com/s/1sjEc74 ...
- part 2 Angular modules and controllers
What is a module in AngularJS? A module is a container for different parts of your application i.e c ...
- CSS之上边栏
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5的自定义data-*属性和jquery的data()方法的使用示例
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...
- iOS - 网络语线程(OC)
1. 检测网络状态 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the vi ...
- Memcached解决单台服务器故障问题
<beitmemcached> <add key="name1" value="server1:port" /> <add key ...
- 不容错过的七个jQuery图片滑块插件
1.jQuery多图并列焦点图插件 今天我们要来分享一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示.和其他jQuery焦点图一样,这 ...
- AndroidStudio中gradle异常:unexpected end of block data
原因:可能是Android buildTools版本不够高. 解决方法:打开build.gradle,将android中buildToolsVersion改为'20.0.0' (我使用的是gradle ...
- 关于IOS9更新的适应与适配
最下面一行为刚刚添加的 iOS9中新增App Transport Security(简称ATS)特性, 主要使到原来请求的时候用到的HTTP,都转向TLS1.2协议进行传输.这也意味着所有的HTTP协 ...
- DEDECMS中,文章页直接输出字段名
文章页中,可直接输出字段名