jquery api 常见api 元素操作例子
2020-12-13 03:30
阅读：459
标签：style class blog code http java
append_prepend.html
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 title>method_1.htmltitle> 5 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 script type="text/javascript" src="../js/jquery-1.8.2.js">script> 7 head> 8 body> 9 ul> 10 li>第一项li> 11 li>第二项li> 12 li>第三项li> 13 ul> 14 hr/> 15 div>这是子元素，要插入到父元素内div> 16 script type="text/javascript"> 17 //DIV标签插入到UL标签之后(父子关系) 18 //$("ul").append( $("div") ); 19 //DIV标签插入到UL标签之前(父子关系) 20 $("ul").prepend( $("div") ); 21 script> 22 body> 23 html>
append_prepend2.html
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 title>method_1.htmltitle> 5 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 script type="text/javascript" src="../js/jquery-1.8.2.js">script> 7 head> 8 body> 9 select id="provinceID" size="2" style="width:60px"> 10 option>广东option> 11 select> 12 hr/> 13 select id="cityID" size="2" style="width:60px"> 14 option>湖南option> 15 select> 16 script type="text/javascript"> 17 //将"广东"添加到"湖南"之后，同时从省份下拉框中删除 18 //$("#cityID").append( $("#provinceID option") ) 19 20 //将"广东"添加到"湖南"之前，同时从省份下拉框中删除 21 $("#cityID").prepend( $("#provinceID option") ) 22 script> 23 body> 24 html>
after_before.html
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 title>method_1.htmltitle> 5 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 script type="text/javascript" src="../js/jquery-1.8.2.js">script> 7 head> 8 body> 9 ul> 10 li>第一项li> 11 li>第二项li> 12 li>第三项li> 13 ul> 14 hr/> 15 div>这是子元素，要插入到父元素外div> 16 script type="text/javascript"> 17 //DIV标签插入到UL标签之后(兄弟关系) 18 //$("ul").after( $("div") ); 19 20 //DIV标签插入到UL标签之前(兄弟关系) 21 $("ul").before( $("div") ); 22 23 script> 24 body> 25 html>
children_next_prev_siblings.html
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 title>method_1.htmltitle> 5 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 script type="text/javascript" src="../js/jquery-1.8.2.js">script> 7 head> 8 body> 9 p>Hellop> 10 div> 11 span> 12 Hello Again 13 b> 14 Bold 15 b> 16 span> 17 div> 18 p>And Againp> 19 hr/> 20 hr/> 21 script type="text/javascript"> 22 /*取得div元素的直接子元素内容，不含后代元素 23 $span = $("div").children(); 24 var content = $span.html(); 25 alert(content); 26 */ 27 28 /*取得div元素的下一个同级的兄弟元素内容 29 var $p = $("div").next(); 30 var content = $p.html(); 31 alert(content); 32 */ 33 34 /*取得div元素的上一个同级的兄弟元素内容 35 var $p = $("div").prev(); 36 var content = $p.html(); 37 alert(content); 38 */ 39 40 //依次取得div元素的上下一个同级的所有兄弟元素的内容 41 var $all = $("div").siblings(); 42 $all.each(function(){ 43 alert( $(this).html() ); 44 }); 45 script> 46 body> 47 html>
clone_true.html
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
head>
title>method_1.htmltitle>
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
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 title>method_1.htmltitle> 5 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 script type="text/javascript" src="../js/jquery-1.8.2.js">script> 7 head> 8 body> 9 hr/> 10 script type="text/javascript"> 11 //创建div元素，添加"哈哈"文本，ID属性，并添加到文档中 12 13 /*dom方式 14 var divElement = document.createElement("div"); 15 divElement.innerHTML = "哥哥"; 16 divElement.id = "2013"; 17 document.body.appendChild(divElement); 18 */ 19 20 //jquery方式 21 var $div = $("呵呵"); 22 $(document.body).append( $div ); 23 24 script> 25 body> 26 html>
removce_element.html
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 title>method_1.htmltitle> 5 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 script type="text/javascript" src="../js/jquery-1.8.2.js">script> 7 head> 8 body> 9 ul> 10 li>第一项li> 11 li id="secondID">第二项li> 12 li>第三项li> 13 ul> 14 div>这是div元素div> 15 script type="text/javascript"> 16 //删除ID为secondID的LI元素 17 //$("#secondID").remove(); 18 19 //删除所有LI元素（方式一） 20 //$("ul li").remove(); 21 22 //删除UL元素（方式二） 23 $("ul").remove(); 24 25 script> 26 body> 27 html>
removeAttr.html
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 title>method_1.htmltitle> 5 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 script type="text/javascript" src="../js/jquery-1.8.2.js">script> 7 head> 8 body> 9 table> 10 tr> 11 td> 12 添加属性border/align/width 13 td> 14 td> 15 删除属性align 16 td> 17 tr> 18 table> 19 script type="text/javascript"> 20 //为元素添加属性border/align/width 21var $table = $("table").attr("border","2").attr("align","center").attr("width","70%"); 2223//将元素的align属性删除 24 $table.removeAttr("align"); 25script>26body>27html>
replaceWith.html
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 title>method_1.htmltitle> 5 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 script type="text/javascript" src="../../js/jquery-1.8.2.js">script> 7 head> 8 body> 9 table border="1" align="center"> 10 tr> 11 td> 12 div style="width:165px;height:23px"> 13 双击会被替换成文本框 14 div> 15 td> 16 td> 17 不会变 18 td> 19 tr> 20 table> 21 script type="text/javascript"> 22 //双击中的文本，用文本框替换文本 23 $("div").dblclick(function(){ 24 //创建文本框 25 var $input = $(""); 26 27 //文本框替换div标签 28 $(this).replaceWith( $input ); 29 30 //为文本框添加焦点失去事件 31 $input.blur(function(){ 32 33 //获取用户在文本框中填入的内容 34 var content = $(this).val(); 35 36 //用户div标签替换文本框 37 var $newDiv = $("" + content + ""); 38 39 $(this).replaceWith($newDiv); 40 41 42 }); 43 44 }); 45 46 47 //div标签.replaceWith(文本框); 48 49 script> 50 body> 51 html>find_attr.html
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 title>method_1.htmltitle> 5 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 script type="text/javascript" src="../js/jquery-1.8.2.js">script> 7 head> 8 body> 9 form> 10 table> 11 tr> 12 td> 13 input type="text" name="username" value="张三"/> 14 td> 15 td> 16 input type="password" name="password" value="123456"/> 17 td> 18 tr> 19 table> 20 form> 21 script type="text/javascript"> 22 /*取得form下第一个input元素的type属性 23 var typeAttrValue = $("form input:first").attr("type"); 24 alert(typeAttrValue); 25 */ 26 27 //设置form下最后个input元素的为只读文本框 28 $("form input:last").attr("readonly","readonly"); 29 script> 30 body> 31 html>
jquery api 常见api 元素操作例子,搜素材,soscw.com
jquery api 常见api 元素操作例子
标签：style class blog code http java
原文地址：http://www.cnblogs.com/friends-wf/p/3810019.html
上一篇：java web 项目启动
文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：jquery api 常见api 元素操作例子
文章链接：http://soscw.com/index.php/essay/27700.html
文章标题：jquery api 常见api 元素操作例子
文章链接：http://soscw.com/index.php/essay/27700.html
评论
亲，登录后才可以留言！