jQuery学习（3）
可以在select中设置size属性的属性值，从而让下拉列表中的选项都显示出来。
<!DOCTYPE html>
<html>
<head>
<title>removeElement.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery.js"></script>
<style>
.se{
margin:80px;
width:80px;
height:20px;
}
#first,#second{
width:80px;
height:200px;
}
</style>
</head> <body>
<select id="first" size=10>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
<option>选项9</option>
</select>
<select id="second" class="se" size=10> </select>
<div class="bu">
<input type="button" value="右移" id="r"/>
<input type="button" value="全部右移" id="ar"/>
<input type="button" value="左移" id="l"/>
<input type="button" value="全部左移" id="al"/>
</div>
</body>
<script type="text/javascript">
//全部右移
$("#ar").click(function(){
$("#first option").appendTo($("#second"));
});
//全部左移
$("#al").click(function(){
$("#second option").appendTo($("#first"));
});
//双击的移到右边
$("#first").dblclick(function(){
$("#first option:selected").appendTo("#second");
}); //双击的移到左边
$("#second").dblclick(function(){
$("#second option:selected").appendTo("#first");
}); //选中的移动到右边
$("#r").click(function(){
$("#first option:selected").appendTo("#second");
}); //选中的移动到左边
$("#l").click(function(){
$("#second option:selected").appendTo("#first");
}); </script>
</html>
jQuery有9种属性
1、内容选择器
2、可见性选择器
3、基本选择器
4、层级选择器
5、属性选择器
6、简单选择器
7、表单选择器
8、表单对象属性
9、子元素选择器
replaceWith()和replaceAll()方法
$("p").replaceWith("<p>pppp</p>");
<!DOCTYPE html>
<html>
<head>
<title>removeElement.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery.js"></script> </head> <body>
用户名：<input type="text" name="username" id="name"/><br/>
电子邮箱：<input type="text" name="email" id="email"/><br/>
电话：<input type="text" name="phone" id="phone"/><br/> <input type="button" value="提交" id="sub"/> <table id="usertable" border="1px">
<tbody>
<tr>
<td>Tom</td><td>t@sohu.com</td><td>110</td>
<td><a href="welcome.html?id=Tom">delete</a></td>
<td><a href="welcome.html?id=Jerry">update</a></td>
</tr>
<tr>
<td>Jerry</td><td>j@sohu.com</td><td>120</td>
<td><a href="welcome.html?id=Jerry">delete</a></td>
<td><a href="welcome.html?id=Jerry">update</a></td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
$("#sub").click(function(){
$nameTd=$("<td/>").text($("#name").val());
$emailTd=$("<td/>").text($("#email").val());
$phoneTd=$("<td/>").text($("#phone").val());
$deleteTd=$("<td/>"); $updateTd=$("<td></td>");
$updatehref=$("<a/>");
$updatehref.attr("href","welcome.html");
$updatehref.text("update");
$updateTd.append($updatehref); $a=$("<a/>");
$a.attr("href","welcome.html");
$a.text("delete");
$deleteTd.append($a); $newTr=$("<tr/>");
$newTr.append($nameTd);
$newTr.append($emailTd);
$newTr.append($phoneTd);
$newTr.append($deleteTd);
$newTr.append($updateTd); //$("#usertable").append($newTr);//这是在没有tbody的情况下使用的
$("#usertable tbody:first-child").append($newTr); $a.click(function(){
return deleteTR($a);
}); $updatehref.click(function(){
return updateTR($updatehref);
});
}); function deleteTR($a){
var name=$a.parent().parent().children().eq(0).text();
var fag=window.confirm("您确定要删除"+name+"这个用户名吗？");
if(!fag){
return false;
}
$a.parent().parent().remove();
return false;
} function updateTR($updatehref){ } </script>
</html>
JQuery加载并解析XML
jQuery去解析
jQuery学习（3）的更多相关文章
- jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jquery学习（一）
简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- 很不错的jQuery学习资料和实例
这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...
- jquery学习以及下载链接
jquery学习链接 http://www.w3school.com.cn/jquery/jquery_intro.asp jquery 脚本库下载链接 http://jquery.com/downl ...
- 转载最佳JQuery学习网站
转载文章,原出处: http://www.gbin1.com/technology/jquery/learningjquerywebsites/ jQuery是目前最流行的 JavaScript ...
- JQuery学习笔记--01
JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...
随机推荐
- JS-以鼠标位置为中心的滑轮放大功能demo1
以鼠标位置为中心的滑轮放大功能demo1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- Unity2D实现人物三连击
之前写过一个系列<HTML5 2D平台游戏开发>,在此过程中发现有很多知识点没有掌握,而且用纯JavaScript来开发一个游戏效率极低,因为调试与地图编辑都没有可视化的工具,开发起来费时 ...
- 学习IIS & MVC的运行原理
我一直疑惑于以下问题,从客户端发出一个请求,请求到达服务器端是怎样跟iis衔接起来的,而iis又是怎样读取我发布的代码的,并返回服务器上的文件.这其中是怎样的一个处理过程. 1:当你从浏览器中输入一个 ...
- Mysql----MySQL的mysql_insert_id和LAST_INSERT_ID(转)
本文介绍的是mysql中last_insert_id和mysql_insert_id的区别 1 mysql_insert_id 一.PHP获取MYSQL新插入数据的ID mysql_insert_id ...
- Objective-C 的动态提示和技巧
过去的几年中涌现了大量的Objective-C开发者.有些是从动态语言转过来的,比如Ruby或Python,有些是从强类型语言转过来的,如Java或C#,当然也有直接以Objective-C作为入门语 ...
- 细细品味大数据--初识hadoop
初识hadoop 前言 之前在学校的时候一直就想学习大数据方面的技术,包括hadoop和机器学习啊什么的,但是归根结底就是因为自己太懒了,导致没有坚持多长时间,加上一直为offer做准备,所以当时重心 ...
- Android 中通过切割图片创建人物行走动画
以前一直使用序列图片来实现动画效果,造成空间的极大浪费,所以想要尝试下切割图片来实现动画. 如图所示,是由66rpg纸娃娃系统生成的角色行走图.本程序必须实现将人物的整体图片切割后存入4x4的数组来动 ...
- python 微信跳一跳进阶
上一篇是通过图片识别来计算跳的距离,再计算按压时间,最后通过adb来控制手机跳的 本篇讲的是通过机器学习,来训练的算法进行跳一跳的 链接: github:https://github.com/Prin ...
- windows常用dos命令
常用命令: d: 回车 磁盘切换 dir: 查看该目录下所有的文件和文件夹: md: 创建文件加 rd: 删除目录 cd: 进入指定的目录 cd..:回退到上级目录 cd\ :回退到根目录 de ...
- C++ 错误积累
错误一 VS2012错误:不能在成员函数 的类外部重新声明该函数 解决:检查函数的大括号匹配