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 ...
随机推荐
- 对于GTPv2协议头部的解析
参考3GPP TS 29.060 GTP的头部是可变的,GTP-C(control)和GTP-U(user)共同使用一个头部. GTP Header头部: -Version 用来标识GTP协议的版本, ...
- STN1170 Multiprotocol OBD to UART Interpreter
http://www.obdsol.com/stn1170/ STN1170 supports the following protocols: all legislated OBD II proto ...
- Ubuntu环境下配置GCC
Ubuntu网络环境下安装GCC及其头文件步骤: 1.Ubuntu环境下配置GCC 刚装好的GCC什么都不能编译,因为没有一些必须的头文件,所以要安装build-essential,安装了这个包会安装 ...
- gdb逆向调试
http://blog.csdn.net/yiling2012/article/details/35988361
- 咏南MORMOT中间件免费开源
咏南MORMOT中间件免费开源 源码放QQ群(92449782)共享文件里面
- 【spring boot】整合LCN，启动spring boot2.0.3 启动报错：Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean.
spring boot 2.0.3启动报错: Error starting ApplicationContext. To display the conditions report re-run yo ...
- Oracle EBS R12 - 怎样更改SYSADMIN的password
SQL> select * from v$version; BANNER ------------------------------------------------------------ ...
- java代码逆向工程生成uml
今天在看一个模拟器的源码,一个包里有多个类,一个类里又有多个属性和方法,如果按顺序看下来,不仅不能对整个模拟器的框架形成一个大致的认识,而且只会越看越混乱,所以,想到有没有什么工具可以将这些个类以及它 ...
- mysql DATE_FORMAT(date, format) 函数
DATE_FORMAT(date, format) 函数用法 DATE_FORMAT(date, format) 函数根据format字符串格式化date值. 1.把字符串转为日期格式 实例: SEL ...
- TYVJ-P1864 守卫者的挑战 题解
P1864 [Poetize I]守卫者的挑战 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜 ...