jquery api 常见api 元素操作例子
append_prepend.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素内</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(父子关系)
//$("ul").append( $("div") );
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend( $("div") );
</script>
</body>
</html>
append_prepend2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<select id="provinceID" size="2" style="width:60px">
<option>广东</option>
</select>
<hr/>
<select id="cityID" size="2" style="width:60px">
<option>湖南</option>
</select>
<script type="text/javascript">
//将"广东"添加到"湖南"之后，同时从省份下拉框中删除
//$("#cityID").append( $("#provinceID option") ) //将"广东"添加到"湖南"之前，同时从省份下拉框中删除
$("#cityID").prepend( $("#provinceID option") )
</script>
</body>
</html>
after_before.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素外</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(兄弟关系)
//$("ul").after( $("div") ); //DIV标签插入到UL标签之前(兄弟关系)
$("ul").before( $("div") ); </script>
</body>
</html>
children_next_prev_siblings.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>Hello</p>
<div>
<span>
Hello Again
<b>
Bold
</b>
</span>
</div>
<p>And Again</p>
<hr/>
<hr/>
<script type="text/javascript">
/*取得div元素的直接子元素内容，不含后代元素
$span = $("div").children();
var content = $span.html();
alert(content);
*/ /*取得div元素的下一个同级的兄弟元素内容
var $p = $("div").next();
var content = $p.html();
alert(content);
*/ /*取得div元素的上一个同级的兄弟元素内容
var $p = $("div").prev();
var content = $p.html();
alert(content);
*/ //依次取得div元素的上下一个同级的所有兄弟元素的内容
var $all = $("div").siblings();
$all.each(function(){
alert( $(this).html() );
});
</script>
</body>
</html>
clone_true.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="button" value="原按钮"/>
<script type="text/javascript">
//复制原input元素，添加到原input元素后，与其同级 //定位原按钮，
var $oldButton = $(":button"); //为原按钮添加单击事件
$oldButton.click(function(){
alert("这是行为");
}); //同时复制一份，不复制行为
//var $newButton = $oldButton.clone(); //同时复制一份，也复制行为
var $newButton = $oldButton.clone(true); //修改新按钮的文字
$newButton.val("新按钮"); //将新按钮放在原按钮之后，形成兄弟关系
$oldButton.after( $newButton ); //为原input元素动态添加单击事件，且复制原input元素，添加到原input元素后，与其 同级，且和原按钮有一样的行为 </script>
</body>
</html>
create_element_text_attr.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<hr/>
<script type="text/javascript">
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中 /*dom方式
var divElement = document.createElement("div");
divElement.innerHTML = "哥哥";
divElement.id = "2013";
document.body.appendChild(divElement);
*/ //jquery方式
var $div = $("<div id='2013'><font size='44' color='blue'>呵呵</font></div>");
$(document.body).append( $div ); </script>
</body>
</html>
removce_element.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>第一项</li>
<li id="secondID">第二项</li>
<li>第三项</li>
</ul>
<div>这是div元素</div>
<script type="text/javascript">
//删除ID为secondID的LI元素
//$("#secondID").remove(); //删除所有LI元素（方式一）
//$("ul li").remove(); //删除UL元素（方式二）
$("ul").remove(); </script>
</body>
</html>
removeAttr.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table>
<tr>
<td>
添加属性border/align/width
</td>
<td>
删除属性align
</td>
</tr>
</table>
<script type="text/javascript">
//为<table>元素添加属性border/align/width
var $table = $("table").attr("border","2").attr("align","center").attr("width","70%"); //将<table>元素的align属性删除
$table.removeAttr("align");
</script>
</body>
</html>
replaceWith.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-1.8.2.js"></script>
</head>
<body>
<table border="1" align="center">
<tr>
<td>
<div style="width:165px;height:23px">
双击会被替换成文本框
</div>
</td>
<td>
不会变
</td>
</tr>
</table>
<script type="text/javascript">
//双击<div>中的文本，用文本框替换文本
$("div").dblclick(function(){
//创建文本框
var $input = $("<input type='text' style='width:165px'/>"); //文本框替换div标签
$(this).replaceWith( $input ); //为文本框添加焦点失去事件
$input.blur(function(){ //获取用户在文本框中填入的内容
var content = $(this).val(); //用户div标签替换文本框
var $newDiv = $("<div style='width:165px'>" + content + "</div>"); $(this).replaceWith($newDiv); }); }); //div标签.replaceWith(文本框); </script>
</body>
</html>
find_attr.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<table>
<tr>
<td>
<input type="text" name="username" value="张三"/>
</td>
<td>
<input type="password" name="password" value="123456"/>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
/*取得form下第一个input元素的type属性
var typeAttrValue = $("form input:first").attr("type");
alert(typeAttrValue);
*/ //设置form下最后个input元素的为只读文本框
$("form input:last").attr("readonly","readonly");
</script>
</body>
</html>
jquery api 常见api 元素操作例子的更多相关文章
- jquery api 常见api 效果操作例子
addClass_removeClass_toggleClass_hasClass.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...
- jQuery中 对标签元素操作（2）
一.属性操作 1.获取属性和设置属性 例如下jQuery代码: var $para=$("p"); //获取<p>节点 var p_txt=$par ...
- 从零开始学 Web 之 jQuery（三）元素操作，链式编程，动画方法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- jQuery中 对标签元素操作（1）
一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append(" ...
- Jquery 表单基础元素操作总结
最近做前端比较多总结一些常用功能: radio 单选选中并且出发change事件: $(selector).find('input:radio[name=valuationMode]').filter ...
- NumPy常见的元素操作函数
ceil(): 向上最接近的整数,参数是 number 或 array floor(): 向下最接近的整数,参数是 number 或 array rint(): 四舍五入,参数是 number 或 a ...
- Selenium系列之--04 常见元素操作总结
一.Selenium总共有八种定位方法 By.id() 通过id定位 By.name() 通过name 定位 By.xpath() 通过xpath定位 By.className() 通过clas ...
- 抛弃jQuery：DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
- JavaScript常见原生DOM操作API总结
[TOC] 最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node ...
随机推荐
- SPOJ 7001. Visible Lattice Points （莫比乌斯反演）
7001. Visible Lattice Points Problem code: VLATTICE Consider a N*N*N lattice. One corner is at (0,0, ...
- Use a TL431 shunt regulator to limit high ac input voltage
Most isolated, offline SMPSs (switched-mode power supplies), including flyback, forward, and resonan ...
- Delphi CompilerVersion Constant / Compiler Conditional Defines
http://delphi.wikia.com/wiki/CompilerVersion_Constant The CompilerVersion constant identifies the in ...
- Linux_Windows7使用VMare安装Centos6.5并使用Xshell连接Centos
本文章主要是记录虚拟机安装Centos,并在windows使用xshell执行命令的过程,供自己和需要之人学习和使用. 难点主要在于windows和centos网络的设置,实现window连 ...
- 树状数组求第K小值 (spoj227 Ordering the Soldiers && hdu2852 KiKi's K-Number)
题目:http://www.spoj.com/problems/ORDERS/ and pid=2852">http://acm.hdu.edu.cn/showproblem.php? ...
- Go -- 调用dll库
package main import ( "syscall" "unsafe" ) func main(){ h, err := syscall.LoadLi ...
- Facebook产品的开发流程
[编者注]王淮是Facebook第二位中国籍工程师,也是第一位中国籍研发经理,他一手开创了Facebook的支付安全和客服工具领域.2011年他离开Facebook,回国成为天使投资人,希望用自己在F ...
- matlab 人面检测
Create a detector object. faceDetector = vision.CascadeObjectDetector;Read input image. I = imread(' ...
- C#编程兵书
<C#编程兵书> 基本信息 作者: 张志强 胡君 丛书名: 程序员藏经阁 出版社:电子工业出版社 ISBN:9787121207402 上架时间:2013-8-26 出版日期:2013 年 ...
- 代码规范审查 – Sonar分析项目
Sonar搭建成功之后,就可以通过简单的CMD指令进行项目分析,此篇主要介绍使用Sonar来分析.net项目. 扫描步骤: a. 打开CMD,切换到指定的项目根目录,和.sln同级目录即可(此处 ...