<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" name="button2" class="button" value="添加图片元素">
<input type="button" name="button3" class="button" value="appendTo()添加元素到内部最后一项">
<input type="button" name="button4" class="button" value="prependTo()添加元素到内部第一项">
<input type="button" name="button5" class="button" value="insertAfter()添加元素到另一元素指定项后面">
<input type="button" name="button6" class="button" value="insertBefore()添加元素到另一元素指定项前面">
<form>
邮箱: <input type="text" name="email">
<input type="button" name="button1" class="button" value="提交">
</form>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<p style="background-color: orange;width: 300px;">我是要被appendTo()移动的节点1</p>
<p style="background-color: orange;width: 300px;">我是要被prependTo()移动的节点2</p>
<p style="background-color: orange;width: 300px;">我是要被insertAfter()移动的节点3</p>
<p style="background-color: orange;width: 300px;">我是要被insertBefore()()移动的节点4</p>
</body>
</html>
<script>
$('input[name="button1"]').click(function() {
//读取value属性的值
alert($(':text').val())
})
$('input[name="button2"]').click(function() {
$('<img>').attr('src', '../images/gyy.jpg').css('width', '200px').css('border-radius', '10%').css('box-shadow', '3px 3px 3px #888').appendTo('body')
})
$('input[name="button3"]').click(function() {
$('p:first').appendTo($('ul'))
})
$('input[name="button4"]').click(function() {
$('p:eq(1)').prependTo($('ul'))
})
$('input[name="button5"]').click(function() {
$('p:eq(2)').insertAfter($('li:eq(1)'))
})
$('input[name="button6"]').click(function() {
$('p:eq(3)').insertBefore($('li:eq(1)'))
})
</script>
博客列表 >jq学习
jq学习
- 1A7498的博客原创转载
- 2018年04月09日 13:10:22643浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
