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 ...
随机推荐
- BZOJ 4517: [Sdoi2016]排列计数 错排公式
4517: [Sdoi2016]排列计数 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4517 Description 求有多少种长度为 ...
- zoj 3621 Factorial Problem in Base K 数论 s!后的0个数
Factorial Problem in Base K Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onli ...
- iOS开发系列--音频播放、录音、
音频 在iOS中音频播放从形式上可以分为音效播放和音乐播放.前者主要指的是一些短音频播放,通常作为点缀音频,对于这类音频不需要进行进度.循环等控制.后者指的是一些较长的音频,通常是主音频,对于这些音频 ...
- Windows7 无法访问共享文件，域访问解决方法。
1.开始——>运行——>gpedit.msc 打开[本地组策略编辑器] 2.计算机配置——>Windows设置——>安全设置——>本地策略——>安全选项——> ...
- Constant-on-time buck-boost regulator converts a positive input to a negative output
Buck regulators find wide application as step-down regulators for converting large positive input vo ...
- Fully Digital Implemented Delta-Sigma Analog to Digital Converter
http://www.design-reuse.com/articles/14886/fully-digital-implemented-delta-sigma-analog-to-digital-c ...
- 如何将Emmet(ZenCoding)安装到到Dreamweaver8？
用过其他版本的Dreamweaver,还是习惯了Dreamweaver8,占用少,插件也容易安装,下面讲的是ZenCoding插件的安装方法,当然现在这个已经叫Emmet了. 安装方法: a.下载dw ...
- JAVA加密算法（DSA）
DSA DSA-Digital Signature Algorithm 是Schnorr和ElGamal签名算法的变种,被美国NIST作为DSS(DigitalSignature Standard). ...
- dynamic bone unity github
https://github.com/unity3d-jp/unitychan-crs 我发现我总找不到以前的东西.. https://www.cnblogs.com/alps/p/8284577.h ...
- 直播 背景 技术体系 乐视云直播Demo
背景 最近工作需要做一款直播APP,恩是的,从RTMP协议的实现开始到处理服务器高并发.负载均衡.客户端播放器实现等等等..... 估计全部写完我也到而立之年了吧...... BOSS们估计也是发现了 ...