search

博客列表 >4月8号作业jquery作业

4月8号作业jquery作业

小蚂蚁的博客
小蚂蚁的博客原创
2018年04月16日 18:33:171050浏览

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>元素内容</title>
</head>
<body>
<div>
</div>
     <form>
       邮箱：<input type="text" name="email">
       <button>提交</button>

     </form>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
   // html(),text(),val(),自带获取器getter,修改的setter
   // html
   // 创建文本节点
  // var res=$('div').html('都是不同')
  //  // 创建元素节点
  //  var res=$('div').html('<h3>都是不同<h3>')
  //  // 无参可获取内容
  //  var res=$('div').html()



     // text()
    // 创建文本节点
   // var res=$('div').text('都是不同')
   //  // 无参可获取内容
   //  var res=$('div').text()


    // var()获取和设置表单元素的内容
    //   第一种 $('button:first').click(function(){
    //            alert('ok')
    //           })
     //  第2种 $('button:nth:eq(0)').click(function(){
     //     alert('ok')
     // })
     // 第三种
      // $('button').eq(0)click(function(){
      //     alert('ok')
      //        }）
        
        // 获取文本框内容及调用内容
         $('button').eq(0).click(function(){
              alert($(':text').val())
          })

// console.log(res)
</script>

 






<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创建元素</title>    
</head>
<body>
    
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
   // 原生创建新元素
   // 创建标签
  // var img = document.createElement('img')
  var img = document.createElement('img')

  // 给新元素添加内容和样式
   // img src='../images/hg.jpg'
   img.src = '../images/hg.jpg'
   img.width=200
   img.style.borderRadius='20%'
   img.style.boxShadow='3px 3px 3px #666'

// 将新元素添加到页面中
    document.body.appendChild(img)

     // 用jquery改写
     // 第一步：创建元素
     // var img=$('img')
     img.attr('src','../images/hg.jpg')
     // img.width(150)
     img.appendTo('body')
      // 一不到位
      // $('img src="../images/hg.jpg" width="150">').appendTo('body')
      // .css('border-radius',17%)
      // console.log(node)
</script>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>目标节点上添加或移动节点</title>
    <style type="text/css">
    li{
        background-color: lightskyblue;
        width: 300px;
        margin-bottom: 5px;
    }
    </style>
</head>
<body>
  <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:300px;">我是append()移动节点</p>
  <p style="background-color:orange;width:300px;">我是prepend()移动节点</p>
  <p style="background-color:orange;width:300px;">我是after()移动节点</p>
  <p style="background-color:orange;width:300px;">我是before()移动节点</p>
 
</body>
</html>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
  // 1.oppend()
  // 语法:target.oppend(content
  //     参数  节点
  //  功能；插入到目录元素的后面内容
    

    // 操作
      var li=$('<li>').text('新建节点').css('background-color','lightgreen')
      // 新建节点
      $('ul').append(li)
      //第二点: 将新节点插入到目标节点内容的后面
       // 移动操作
      $('ul').append($('p:first'))
     

      // console.log(li)

})

$('button').eq(1).on('click',function(){
  // prepend()
  // 语法:target.oppend(content
  //     参数  节点
  //  功能；插入到目录节点的后面内容
    

    // 操作
      var li=$('<li>').text('新建节点').css('background-color','lightgreen')
      // 新建节点
      $('ul').prepend(li)
      //第二点: 将新节点插入到目标节点内容的前面
       // 移动操作
      $('ul').prepend($('p:eq(1)'))
     

      // console.log(li)

})

   // 插入ul后面
$('button').eq(2).on('click',function(){
  // after()
  // 语法:target.oppend(content
  //     参数  节点
  //  功能；插入到目录节点后面内容
    

    // 操作
      var  p=$('<p>').text('新建节点70').css('background-color','lightgreen')
      // 新建节点
      // $('ul').after(p)
      $('li:eq(3)').after(p)

      //第二点: 将新节点插入到目标节点内容的指定位置
       // 移动操作
      // $('ul').after(p)
      $('li:eq(3)').after(p)


      // 针对存在的节点进行移动
       $('ul').after($('p:eq(3)'))
        // ('li:eq(3)').after($('p:eq(3)'))
        
       
        console.log(li)

})
     $('button').eq(3).on('click',function(){
     // 1.before()
     // 语法:target.oppend(content
     //     参数  节点
    //  功能；插入到目录元素的后面内容
    

    // 操作
      var p=$('<p>').text('新建节点777').css('background-color','lightgreen')
      // 新建节点
      $('ul').before(p)
      // $('li:eq(4)').before(p)
      //第二点: 将新节点插入到目标节点内容的之间
       // 移动操作
      // $('ul').before($('p:first'))
         $('li:eq(4)').before($('p:eq(2)'))

      // console.log(li)
})

      

</script>




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>目标节点上添加与移动节点</title>
    <style type="text/css">
    li{
        background-color: lightskyblue;
        width: 300px;
        margin-bottom: 5px;
    }
    </style>
</head>
<body>
  <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:300px;">我是append()移动节点</p>
  <p style="background-color:orange;width:300px;">我是prepend()移动节点</p>
  <p style="background-color:orange;width:300px;">我是after()移动节点</p>
  <p style="background-color:orange;width:300px;">我是before()移动节点</p>
</body>
</html>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
  // 1.oppend()
  // 语法:target.oppend(content
  //  功能；插入到目录元素的后面内容
    // 操作
      var li=$('<li>').text('新建节点').css('background-color','lightgreen')
      // 新建节点
      $('ul').appendTo(li)
      //第二点: 将新节点插入到目标节点内容的后面
       // 移动操作
      $('ul').appendTo($('p:first'))
    
      // console.log(li)

})

$('button').eq(1).on('click',function(){
  // prepend()
  // 语法:target.oppend(content
  //  功能；插入到目录节点的后面内容
    

    // 操作
      var li=$('<li>').text('新建节点').css('background-color','lightgreen')
      // 新建节点
      $('ul').prependTo(li)
      //第二点: 将新节点插入到目标节点内容的前面
       // 移动操作
      $('ul').prependTo($('p:eq(1)'))
     

      // console.log(li)

})

   // 插入ul后面
$('button').eq(2).on('click',function(){
  // after()
  // 语法:target.oppend(content
  //  功能；插入到目录节点后面内容
    

    // 操作
      var  p=$('<p>').text('新建节点70').css('background-color','lightgreen')
    
      // $('ul').after(p)
      $('li:eq(3)').insertAfter(p)

      //第二点: 将新节点插入到目标节点内容的指定位置
       // 移动操作
      // $('ul').insertAfter(p)
      $('li:eq(3)').insertAfter(p)


      // 针对存在的节点进行移动
       $('ul').insertAfter($('p:eq(3)'))
        // ('li:eq(3)').insertAfter($('p:eq(3)'))
        
       
        // console.log(li)

})
     $('button').eq(3).on('click',function(){
     // 1.before()
     // 语法:target.oppend(content
    //  功能；插入到目录元素的后面内容
    

    // 操作
      var p=$('<p>').text('新建节点777').css('background-color','lightgreen')
      // 新建节点
      $('ul').before(p)
      // $('li:eq(4)').before(p)
      //第二点: 将新节点插入到目标节点内容的之间
       // 移动操作
      // $('ul').before($('p:first'))
         $('li:eq(4)').before($('p:eq(2)'))

      console.log(li)
})

      

</script>




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>5.元素包裹</title>
</head>
<body>
    <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 type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

    $('button:eq(0)').click(function(){
        
        //用一个新标签来包裹目标元素
        // $('a').wrap($('<li>'))
        //简写:
        $('a').wrap('<li>')

        //用已存在的标签来包裹目标节点
        // $('a').wrap($('p'))
    })
    
    $('button:eq(1)').click(function(){
        //.用一个新标签来包裹目标节点内容
        $('li').wrapInner('<strong>')
        

        //.用已存在的标签来包裹目标节点内容
        $('li').wrapInner($('p'))
    })
    
    $('button:eq(2)').click(function(){
        //.用一个新标签来包裹目标节点内容
        $('li').wrapAll('<ul style="background-color: wheat">')
        //.用已存在的标签来包裹目标节点内容,给<li>再套一个<div>
        $('li').wrapAll($('<div style="background-color: cyan">'))
    })
    $('button:eq(3)').click(function(){
         // 1.unwrap(content):删除节点上父元素
        $('li').unwrap()
        //可以一直往上走
        $('li').unwrap().unwrap()
        
    })
    
</script>

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4.将节点添加或移动到目标节点</title>
	<style type="text/css">
		li {
			background-color: lightskyblue;
			width: 300px;
			margin-bottom: 5px;
		}
	</style>
</head>
<body>
	<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: 300px;">我是要被appendTo()移动的节点1</li>
	<p style="background-color: orange;width: 300px;">我是要被prependTo()移动的节点2</li>
	<p style="background-color: orange;width: 300px;">我是要被insertAfter()移动的节点3</li>
	<p style="background-color: orange;width: 300px;">我是要被insertBefore()()移动的节点4</li>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">


	$('button').eq(0).on('click',function(){
		 
		var li = $('<li>').css('background-color','lightgreen').html('我是appendTo()新生成的节点1')
		
		li.appendTo($('ul'))

	
	})
		
	$('button').eq(1).on('click',function(){	
		
		$('p:eq(1)').prependTo($('ul'))
	})
	$('button').eq(2).on('click',function(){
	
	
		var p = $('<li>').css('background-color','lightgreen').html('我是insertAfter()新生成的节点3')
		
		p.insertAfter($('ul'))
		
	})

	$('button').eq(3).on('click',function(){
	
		var p = $('<li>').css('background-color','lightgreen').html('我是insertBefore()新生成的节点4')
	
		$('p:eq(3)').insertBefore($('li:eq(2)'))
	})
	
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


上一条：4.8-元素的创建移动及包裹下一条：PHP中mysqli 操作数据库
jquery目标节点上 ，移动节点
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多