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 ...
随机推荐
- 2015 UESTC 搜索专题D题 基爷的中位数 二分
基爷的中位数 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/61 Descr ...
- leetcode 587. Erect the Fence 凸包的计算
leetcode.587.Erect the Fence 凸包问题.好像是我在leetcode做的第一个凸包问题吧. 第一次做,涉及到的东西还是蛮多的.有一个东西很重要,就是已知一个点和一个矢量,求这 ...
- Chrome无法播放m3u8格式的直播视频流的问题解决
出国,然后安装这个插件即可:Native HLS Playback https://chrome.google.com/webstore/detail/native-hls-playback/emnp ...
- 读CRecordset
void CDictCol::LoadDictCol(void) { // 加载数据字典信息 CString cstrSql; cstrSql.Format("SELECT dc.TblID ...
- 为什么Scrum不行？
这篇文章的原文在这里(原文链接)(下文不是全译,也不是部分译,我只是把其总结,有我自己的发挥,但是原意大致不变),这篇文章完全是在调侃Scrum的,作者第一段就是一个免费声明,其说他是Scrum和其它 ...
- linux下svn的用法
转载:http://blog.chinaunix.net/uid-22150747-id-189264.html 1.将文件checkout到本地目录 svn checkout path(path是服 ...
- JACOB的语法
转自:http://www.bitscn.com/pdb/java/200904/161117.html 如果你想写一个JAVA代码,其中需要调用JACOB提供的功能,而你还是新手,也许篇文章会大大降 ...
- nsq多播分发和负载均衡实验
什么是nsq?请参考实时分布式消息平台nsq. 本地如何搭建nsq?请参考本地搭建nsq经验分享. 从NSQ的设计文档中得知,单个nsqd被设计为一次能够处理多个流数据,NSQ中的数据流模型是由str ...
- thinkphp5(tp5)中success跳转页面和弹窗问题解决
自己做了一个form页面,对其操作后,根据$this->success('提示信息',''),执行后是通过笑脸页面跳转,而不是在本页弹框后刷新.源码里带的原来的例子是弹出框刷新,为什么我自己做的 ...
- java中的深浅克隆
假设有一个对象object,在某处又需要一个跟object一样的实例object2,强调的是object和object2是两个独立的实例,只是在开始的时候,他们是具有相同状态的(属性字段的值都相同). ...