实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0408作业</title>
<style type="text/css">
li {
background-color: lightskyblue;
width: 300px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<!--1.获取元素的内容-->
<!--<div></div>-->
<!--<form action="" method="post">-->
<!--账号：<input type="text" name="account">-->
<!--<button>提交</button>-->
<!--</form>-->
<!--2.创建DOM元素-->
<!--3.在目标节点上添加或移动节点-->
<!--<ul>-->
<!--<li>列表项1</li>-->
<!--<li>列表项2</li>-->
<!--<li>列表项3</li>-->
<!--<li>列表项4</li>-->
<!--<li>列表项5</li>-->
<!--</ul>-->
<!--<button>append()</button>-->
<!--<button>prepend()</button>-->
<!--<button>after()</button>-->
<!--<button>before()</button>-->
<!--<p style="background-color: orange;width: 400px;">我是要被append()移动的节点1</p>-->
<!--<p style="background-color: orange;width: 400px;">我是要被prepend()移动的节点2</p>-->
<!--<p style="background-color: orange;width: 400px;">我是要被after()移动的节点3</p>-->
<!--<p style="background-color: orange;width: 400px;">我是要被before()移动的节点4</p>-->
<!--4.将节点添加或移动到目标节点-->
<!--<ul>-->
<!--<li>列表项1</li>-->
<!--<li>列表项2</li>-->
<!--<li>列表项3</li>-->
<!--<li>列表项4</li>-->
<!--<li>列表项5</li>-->
<!--</ul>-->
<!--<button>appendTo()</button>-->
<!--<button>prependTo()</button>-->
<!--<button>insertAfter()</button>-->
<!--<button>insertBefore()</button>-->
<!--<p style="background-color: orange;width: 400px;">我是要被append()移动的节点1</p>-->
<!--<p style="background-color: orange;width: 400px;">我是要被prepend()移动的节点2</p>-->
<!--<p style="background-color: orange;width: 400px;">我是要被after()移动的节点3</p>-->
<!--<p style="background-color: orange;width: 400px;">我是要被before()移动的节点4</p>-->
<!--5.元素包裹-->
<a href="https://www.tmall.com">天猫</a>
<a href="https://taobao.com">淘宝</a>
<a href="https://www.jd.com/">京东</a>
<a href="https://www.suning.com">苏宁</a>
<p>网上购物:</p>
<button>wrap()</button>
<button>wrapIner()</button>
<button>wrapAll()</button>
<button>unwrap()</button>
</body>
</html>
<script src="../0402源码/js/jquery-3.3.1.js"></script>
<!--1.获取元素的内容-->
<script type="text/html">
//html() 和 css() attr() 一样 根据参数不同 自带读取和设置功能
// 1.设置元素内容，可以包括任何内容：子元素和文本，与原生的innerHTML属性一样
// 创建文本节点
var res = $('div').html('这是一段文字')
// 创建元素节点
var res = $('div').html('<h2>我是h2标签</h2>')
// 获取元素内容
var res = $('div').html()
console.log(res); //输出： <h2>我是h2标签</h2>
// 2.获取元素中的文本内容:类似于原生中的textContent属性
// 获取单标签中的文本，会自动将子元素标签过滤，仅留下文本部分
var res = $('div').text()
console.log(res); //我是h2标签
// 如果元素内容有多个子元素,这些子元素的文本会合并
var res = $('div').html('<h2>我是h2标签</h2><p>我是p标签</p>')
var res = $('div').html()
console.log(res); //输出: <h2>我是h2标签</h2><p>我是p标签</p>
var res = $('div').text()
console.log(res); //输出: 我是h2标签我是p标签
// 3.获取或设置表单控件中的数据: val(),等价于原生中的表单元素的value属性
$('button').click(
function () {
// 读取value属性的值
alert($(':text').val()) //输入框输入:我是文本 点击按钮得到text的值
// 设置value属性的值
$(':text').val('574296004@qq.com')
alert($(':text').val())
}
)
</script>
<!--2.创建DOM元素-->
<script type="text/html">
//第一步:创建新元素,至少一对标签,尖括号绝对不能省略
//可以在标签中直接设置属性
var img = $('<img src="../0402源码/images/gyy.jpg"> ')
//第二步:给新元素添加内容或属性
img.css({
'width':150,
'border-radius':'10%',
'box-shadow':'3px 3px 3px #888'
})
//第三步:添加到页面中
img.appendTo('body')
// 可以使用简化步骤
$('<img>',{
src:'../0402源码/images/gyy.jpg',
style:"width:200px;border-radius:10%;box-shadow:3px 3px 3px #888", //属性之间加分号
title: '我是高圆圆',
click:function () {
alert($(this).attr('title'))
}
}).appendTo('body')
</script>
<!--3.在目标节点上添加或移动节点-->
<script type="text/html">
/*
* 1.插入位置
* 节点内容的前后
* 节点的前后
* 2、要插入的节点
* 对于新创建的节点：叫做添加操作
* 对已存在的节点：叫移动操作
* 3.对应的方法
* 插入到节点内容之后 append（）
* 插入到节点内容之前 prepend()
* 插入到节点之后：after（）
* 插入到节点之前:before()
* */
$('button').eq(0).on('click',function () {
/**
* 1.append()
* 语法: target.append(content)
* 参数: 要添加或移动的节点
* 功能: 插入到目标元素内容的后面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('我是append()新生成的节点1')
// $('ul').append(li) //新创建的li添加到了ul之后
//2.移动操作
$('ul').append($('p').eq(0)) //第一个p标签被移动到了ul中最后一个li后面
})
$('button:eq(1)').on('click',function () {
/**
* 2.prepend()
* 语法: target.prepend(content)
* 参数: 要添加或移动的节点
* 功能: 插入到目标元素内容的前面
*/
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('我是prepend()新生成的节点2')
//第二点: 将新节点插入到目标节点内容的后面
$('ul').prepend(li); //新创建的li被添加到了ul的最前面
// 2.移动操作
$('ul').prepend($('p:eq(1)'))
})
$('button:eq(2)').on('click',function () {
/**
* 3.after()
* 语法: target.after(content)
* 参数: 要插入的节点
* 功能: 插入到目标节点的后面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('我是after()新生成的节点3')
//第二点: 将新节点插入到目标节点的后面
// $('ul').after(li)
// $('li:eq(0)').after(li) //添加新创建的li到ul中第一个li的后面
//2.移动操作
$('li:eq(0)').after($('p:eq(2)'))
})
$('button:eq(3)').on('click',function () {
/**
* 4.before()
* 语法: target.after(content)
* 参数: 要插入的节点
* 功能: 插入到目标元素的前面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('我是before()新生成的节点4')
// $('ul').before(li)
// $('li:first').before(li)
//2.移动操作
// $('ul').before($('p:eq(3)'))
$('li:eq(0)').before($('p:eq(3)'))
})
</script>
<!--4.将节点添加或移动到目标节点-->
<script type="text/html">
/* 1.插入位置:
节点内容的前后
节点的前后
2.要插入的节点:
对于新创建的节点:叫添加操作
对已存在的节点: 叫移动操作
3.所以对应的应该有四个方法
插入到节点内容之后:appendTo()
插入到节点内容之前:prependTo()
插入到节点之后: InsertAfter()
插入到节点之前: InsertBefore()
*/
$('button').eq(0).on('click',function(){
/**
* 1.appendTo()
* 语法: content.appendTo(target)
* 参数: 要添加或移动到的节点
* 功能: 插入到目标元素内容的后面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('我是appendTo()新生成的节点1')
//第二点: 将新节点插入到目标节点内容的后面
// li.appendTo($('ul'))
//2.移动操作(请将添加操作的代码注释掉)
$('p:first').appendTo($('ul'))
})
$('button:eq(1)').click(function(){
/**
* 2.prependTo()
* 语法: content.prepend(target)
* 参数: 要添加或移动的节点
* 功能: 插入到目标元素内容的前面
*/
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('我是prependTo()新生成的节点2')
//第二点: 将新节点插入到目标节点内容的后面
// li.prependTo($('ul'))
//2.移动操作(请将添加操作的代码注释掉)
$('p:eq(1)').prependTo($('ul'))
})
$('button').eq(2).on('click',function(){
/**
* 3.insertAfter()
* 语法: content.after(target)
* 参数: 要插入的节点
* 功能: 插入到目标节点的后面
*/
//1. 添加操作
// 第一步: 生成节点元素,添加内容,并设置样式
var p = $('<li>').css('background-color','lightgreen').html('我是insertAfter()新生成的节点3')
//第二点: 将新节点插入到目标节点的后面
// p.insertAfter($('ul'))
// p.insertAfter($('li:eq(1)'))
//2.移动操作
//移动到<ul>之后
// $('p:eq(2)').insertAfter($('ul'))
//移动到第2个<li>之后
$('p:eq(2)').insertAfter($('li:eq(1)'))
})
$('button').eq(3).on('click',function(){
/**
* 4.InsertBefore()
* 语法: content.insertBefore(target)
* 参数: 要插入的节点
* 功能: 插入到目标元素的前面
*/
//1. 添加操作
// 第一步: 生成节点元素,添加内容,并设置样式
var p = $('<li>').css('background-color','lightgreen').html('我是insertBefore()新生成的节点4')
//第二点: 将新节点插入到目标节点的后面
// p.insertBefore($('ul'))
//插入到第3个<li>之前
// p.insertBefore($('li:eq(0)'))
//2.移动操作
//移动到<ul>之前
// $('p:eq(3)').insertBefore($('ul'))
//移动到第3个<li>之前
$('p:eq(3)').insertBefore($('li:eq(2)'))
})
</script>
<script>
$('button:eq(0)').click(function(){
/**
* 1.wrap(content):
* 功能:包裹每一个节点
* 参数:内容或元素
*/
//用法一.用一个新标签来包裹目标元素
// $('a').wrap($('<li>'))
//简写:
$('a').wrap('<li>') // 所有a标签外面被包括了一个li标签
//用法二.用已存在的标签来包裹目标节点
// $('a').wrap($('p'))
})
$('button:eq(1)').click(function(){
/**
* 1.wrapInner(content):
* 功能:包裹每一个节点的内容
* 参数:内容或元素
*/
//用法一.用一个新标签来包裹目标节点内容
// $('a').wrapInner('<strong>')
//用法二.用已存在的标签来包裹目标节点内容
$('a').wrapInner($('p'))
})
$('button:eq(2)').click(function(){
/**
* 1.wrapAll(content):
* 功能:包裹一组节点
* 参数:内容或元素
*/
//用法一.用一个新标签来包裹目标节点内容
// $('a').wrapAll('<div style="background-color: #ff8899">')
//用法二.用已存在的标签来包裹目标节点内容,给<li>再套一个<div>
$('li').wrapAll($('<div style="background-color: cyan">'))
})
$('button:eq(3)').click(function(){
/**
* 1.unwrap(content):
* 功能:删除节点上父元素
* 参数:无
*/
$('a').unwrap()
//可以一直往上走
// $('li').unwrap().unwrap()
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
