前端学习-jquery-实现点击button对文本的add及detele

第一个jquery小程序，需求如下

页面加载完成时显示一个输入框及一个名为 Click me 的 button
页面加载完成时在输入框之下显示三条文本（文本预定义于一个数组）
文本后显示一个X图标，点击后删除该条文本
在输入框输入文本，点击 Click me 后在页面上添加该文本，且同需求3.显示X图标。

使用jquery之前需要加载jquery的lib文件（jquery.js），可从jquery官网下载，已引用外部javascript文件的形式添加到需要的页面上。

jquery选择器与css类似，只是其语法上将selector包在$("")之中。

在$(document).ready(function(){})方法中会执行页面加载时需要执行的function，与javascript中的window.onload方法类似。但是从测试的角度来讲，写在$(document).ready(function(){})中可能会发生一些out of control。是由append方法或appendTo可以在我们想要的位置追加元素，在数据量比较小或标签结构不复杂的情况下很方便，如果要追加的标签其嵌套复杂或重复量大可考虑使用模板。

以下为相应的html代码，

<html><head><link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="add_delete.js"></script>
</head><body><input type="text" id="info" /><button id="add">Click me</button><div id="inputMessages"></div>
</body></html>

以下为第一版jquery代码，

$(document).ready(function(){var arr = ['Qiu Juntao', 'Jia Wei', 'Shen Tong'];var exitedItem;function addElements(value){var newitem = $("<div></div>").text(value).addClass("inputTxt");var deleteButton = $("<input></input>").addClass("delete").attr("type","image").attr("src","delete2.jpg");newitem.appendTo("#inputMessages");deleteButton.appendTo(newitem);}function deleteItem(){$(".delete").click(function(){$(this).parent('.inputTxt').remove();});}$.each(arr, function(key,val) {addElements(val);deleteItem();});$("#add").click(function(){var item = $("#info").val();addElements(item);deleteItem();});
});

前端学习-jquery-实现点击button对文本的add及detele相关推荐

前端学习——jQuery入门篇
一. jQuery入门 1.1 初步感受jQuery 使用jquery简单写个tab切换小案例 <!DOCTYPE html> <html lang="en"&g ...
前端——使用JQuery 实现点击加入购物车（二）
实现效果: 1. 鼠标的移入与移出: 当鼠标放到购物车上时,购物车向左移动,并展示购物车中的商品 2. 删除键:点击删除,可以在购物车中删除这个商品项 3. 加:点击加,购物车中该商品数量增加1 4. ...
前端学习---jQuery
目录 1.1,jQuery简介 1.2,jQuery函数&对象 1.3,jQuery选择器(selector) 1.4,jQuery过滤器 1.5,jQuery DOM 事件 1.6,jQue ...
前端学习（2353）：button按钮组件的使用
detail.vue <template><view><!-- <view class=""><text>唱歌跳舞</t ...
前端学习（2759）：button按钮使用
前端学习：jQuery学习--Day03
前端学习:jQuery学习–Day03 ps:这几天偷了点懒呜呜外加考试耽误了几天学习最后自己做了一个给女朋友的惊喜点滴记录note 大纲自定义事件自动触发事件委托鼠标移入移出事件电影排行 ...
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
Web前端学习笔记15：Web前端开发：jQuery总结
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
前端学习从入门到高级全程记录之35（jQuery②）
学习目标本期继续学习jQuery,引入的jQuery文件用的还是上一期的. 1.jQuery操作样式 1.1 css操作功能:设置或者修改样式,操作的是style属性  设置单个样式 //nam ...
Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）
今日学习目标继续学习jQuery框架剩余的内容. 文章目录今日学习目标学习内容一.jQuery操作标签 class操作样式操作位置操作文本值操作属性操作文档处理操作二.jQuery ...

前端学习-jquery-实现点击button对文本的add及detele

前端学习-jquery-实现点击button对文本的add及detele相关推荐

最新文章

热门文章