简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 4月8号作业jquery作业
Blogger Information
Blog 24
fans 0
comment 0
visits 15257
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
4月8号作业jquery作业
小蚂蚁的博客
Original
1041 people have browsed it

<!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>

运行实例 »

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


Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！