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 ...
随机推荐
- leetcode76. Minimum Window Substring
leetcode76. Minimum Window Substring 题意: 给定字符串S和字符串T,找到S中的最小窗口,其中将包含复杂度O(n)中T中的所有字符. 例如, S ="AD ...
- 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 ...
- Changing the Output Voltage of a Switching Regulator on the Fly
http://www.powerguru.org/changing-the-output-voltage-of-a-switching-regulator-on-the-fly/ There are ...
- C# 中的回车换行符
在 C# 中,我们用字符串 "\r\n" 表示回车换行符. string str = "第一行\r\n第二行"; 但是我们更推荐 Environment.New ...
- cocos2d3.0 Scale9Sprite
使用Scale9Sprite须要引入以下的头文件 #include "extensions/cocos-ext.h" USING_NS_CC; USING_NS_CC_EXT; 一 ...
- 实施CMMI3的体会
公司从去年年底开始实施CMMI3,记得当初上培训课的时候,听着老师介绍过程管理,项目管理,工程过程,支持过程这四大类过程域的时候,全部门上下听得稀里糊涂,从未想到这个鬼东西还这么复杂,这么麻烦. 公司 ...
- Basic Messager
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery -> filter使用方法
利用filter函数能够从wrapper set中过滤符合条件的DOM元素. 假设我们有一个内容例如以下的html文件,要获取类为external的<a>元素,使用filter能够非常ea ...
- 数学图形(1.20)N叶草
有N个叶子的草 相关软件参见:数学图形可视化工具,使用自己定义语法的脚本代码生成数学图形.该软件免费开源.QQ交流群: 367752815 vertices = t = to (*PI) r = n ...
- longest-palindrome
https://leetcode.com/problems/longest-palindrome/ public class Solution { public int longestPalindro ...