jQuery第四天

最新推荐文章于 2024-08-06 12:58:11 发布

彭于晏爱编程

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量76

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_59708269/article/details/124778574

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.文档_增删改

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>17_文档_增删改</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }

  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }

  .div2 {
    position: absolute;
    width: 100px;
    height: 100px;
    /*top: 50px;*/
    background: red;
  }

  .div3 {
    position: absolute;
    top: 250px;
  }
</style>

<body>
<ul id="ul1">
  <li>AAAAA</li>

  <li title="hello">BBBBB</li>
  <li class="box">CCCCC</li>

  <li title="hello">DDDDDD</li>
  <li title="two">EEEEE</li>
  <li>FFFFF</li>

</ul>
<br>
<br>
<ul id="ul2">
  <li>aaa</li>
  <li title="hello">bbb</li>
  <li class="box">ccc</li>
  <li title="hello">ddd</li>
  <li title="two">eee</li>
  <p>按实际四</p>
</ul>

<!--
1. 添加/替换元素
  * append(content)
    向当前匹配的所有元素内部的最后插入指定内容
  * prepend(content)
    向当前匹配的所有元素内部的最前面插入指定内容
  * before(content)
    将指定内容插入到当前所有匹配元素的前面
  * after(content)
    将指定内容插入到当前所有匹配元素的后面替换节点
  * replaceWith(content)
    用指定内容替换所有匹配的标签删除节点
2. 删除元素
  * empty()
    删除所有匹配元素的子元素
  * remove()
    删除所有匹配的元素
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 向id为ul1的ul下添加一个span(最后)
   2. 向id为ul1的ul下添加一个span(最前)
   3. 在id为ul1的ul下的li(title为hello)的前面添加span
   4. 在id为ul1的ul下的li(title为hello)的后面添加span
   5. 将在id为ul2的ul下的li(title为hello)全部替换为p
   6. 移除id为ul2的ul下的所有li
   */

  //1. 向id为ul1的ul下添加一个span(最后)
  var $ul1 = $('#ul1')
  $ul1.append('<span>append()添加的span</span>')
  $('<span>appendTo()添加的span</span>').appendTo($ul1)

  //2. 向id为ul1的ul下添加一个span(最前)
  $ul1.prepend('<span>prepend()添加的span</span>')
  $('<span>prependTo()添加的span</span>').prependTo($ul1)

  //3. 在id为ul1的ul下的li(title为hello)的前面添加span
  $ul1.children('li[title=hello]').before('<span>before()添加的span</span>')

  //4. 在id为ul1的ul下的li(title为hello)的后面添加span
  $ul1.children('li[title=hello]').after('<span>after()添加的span</span>')

  //5. 将在id为ul2的ul下的li(title为hello)全部替换为p
  $('#ul2>li[title=hello]').replaceWith('<p>replaceAll()替换的p</p>')
  
  //6. 移除id为ul2的ul下的所有li
  $('#ul2').empty()  // <p>也会删除
  $('#ul2>li').remove()
</script>
</body>
</html>

二.事件绑定与解绑

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>18_事件绑定与解绑</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }

  .out {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }

  .inner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50px;
    background: red;
  }

  .divBtn {
    position: absolute;
    top: 250px;
  }

</style>

<body style="height: 2000px;">

<div class="out">
  外部DIV
  <div class="inner">内部div</div>
</div>

<div class='divBtn'>
  <button id="btn1">取消绑定所有事件</button>
  <button id="btn2">取消绑定mouseover事件</button>
  <button id="btn3">测试事件坐标</button>
  <a href="http://www.baidu.com" id="test4">百度一下</a>
</div>

<!--
1. 事件绑定(2种)：
  * eventName(function(){})
    绑定对应事件名的监听,	例如：$('#div').click(function(){});
  * on(eventName, funcion(){})
    通用的绑定事件监听, 例如：$('#div').on('click', function(){})
  * 优缺点:
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
  * off(eventName)
3. 事件的坐标
  * event.clientX, event.clientY  相对于视口的左上角
  * event.pageX, event.pageY  相对于页面的左上角
  * event.offsetX, event.offsetY 相对于事件元素左上角
4. 事件相关处理
  * 停止事件冒泡 : event.stopPropagation()
  * 阻止事件默认行为 : event.preventDefault()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  /*
   需求：
   1. 给.out绑定点击监听(用两种方法绑定)
   2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
   3. 点击btn1解除.inner上的所有事件监听
   4. 点击btn2解除.inner上的mouseover事件
   5. 点击btn3得到事件坐标
   6. 点击.inner区域, 外部点击监听不响应
   7. 点击链接, 如果当前时间是偶数不跳转
   */
  //1. 给.out绑定点击监听(用两种方法绑定)
  $('.out').click(function () {
   console.log('click out')
   })
   $('.out').on('click', function () {
    console.log('on click out')
  })

  //2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
 
   $('.inner')
   .mouseenter(function () { // 进入
    console.log('进入')
   })
   .mouseleave(function () { // 离开
   console.log('离开')
   })
 

   $('.inner')
   .on('mouseenter', function () {
   console.log('进入2')
   })
   .on('mouseleave', function () {
   console.log('离开2')
   })

  $('.inner').hover(function () {
    console.log('进入3')
  }, function () {
    console.log('离开3')
  })


  //3. 点击btn1解除.inner上的所有事件监听
  $('#btn1').click(function () {
    $('.inner').off()
  })

  //4. 点击btn2解除.inner上的mouseenter事件
  $('#btn2').click(function () {
    $('.inner').off('mouseenter')
  })

  //5. 点击btn3得到事件坐标
  $('#btn3').click(function (event) { // event事件对象
    console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角
    console.log(event.clientX, event.clientY) // 原点为窗口的左上角
    console.log(event.pageX, event.pageY) // 原点为页面的左上角
  })

  //6. 点击.inner区域, 外部点击监听不响应
  $('.inner').click(function (event) {
    console.log('click inner')
    //停止事件冒泡
    event.stopPropagation()
  })
  
  //7. 点击链接, 如果当前时间是偶数不跳转
  $('#test4').click(function (event) {
    if(Date.now()%2===0) {
      event.preventDefault()
    }
  })
</script>
</body>
</html>

三.事件面试题

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>19_事件切换</title>
</head>
<style type="text/css">
	* {
		margin: 0px;
	}
	.div1 {
		position: absolute;
		width: 200px;
		height: 200px;
		top: 50px;
		left: 10px;
		background: olive;
	}
	.div2 {
		position: absolute;
		width: 100px;
		height: 100px;
		top: 50px;
		background: red;
	}
	.div3 {
		position: absolute;
		width: 200px;
		height: 200px;
		top: 50px;
		left: 230px;
		background: olive;
	}
	.div4 {
		position: absolute;
		width: 100px;
		height: 100px;
		top: 50px;
		background: yellow;
	}

	.divText{
		position: absolute;
		top: 330px;
		left: 10px;
	}

</style>
<body>

<div class="divText">
	区分鼠标的事件
</div>

<div class="div1">
	div1.....
	<div class="div2">div2....</div>
</div>

<div class="div3">
	div3.....
	<div class="div4">div4....</div>
</div>
<!--
区别mouseover与mouseenter?
	* mouseover: 在移入子元素时也会触发, 对应mouseout
	* mouseenter: 只在移入当前元素时才触发, 对应mouseleave
								hover()使用的就是mouseenter()和mouseleave()
区别on('eventName', fun)与eventName(fun)
	* on('eventName', fun): 通用, 但编码麻烦
	* eventName(fun): 编码简单, 但有的事件没有对应的方法
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
	$('.div1')
		.mouseover(function () {
			console.log('mouseover 进入')
		})
		.mouseout(function () {
			console.log('mouseout 离开')
		})

	$('.div3')
		.mouseenter(function () {
			console.log('mouseenter 进入')
		})
		.mouseleave(function () {
			console.log('mouseleave 离开')
		})

</script>
</body>
</html>

四.事件委托1_引入

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>20_事件委托_引入.html</title>
</head>

<body>

<ul>
  <li>11111</li>
  <li>1111111</li>
  <li>111111111</li>
  <li>11111111111</li>
</ul>

<li>22222</li>
<br>
<button id="btn">添加新的li</button>
<br>

<!--
绑定事件监听的问题: 新加的元素没有监听
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
  /*
   需求：
   1. 点击 li 背景就会变为红色
   2. 点击 btn 就添加一个 li
  */
  $('ul>li').click(function () {
    this.style.background = 'red'
  })

  $('#btn').click(function () {
    $('ul').append('<li>新增的li....</li>')
  })
</script>
</body>
</html>

五.事件委托2

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>20_事件委托2</title>
</head>

<body>
<ul>
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

<li>22222</li>
<br>
<button id="btn1">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button>

<!--
1. 事件委托(委派/代理):
  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  * 监听回调是加在了父辈元素上
  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
  * 委托方: 业主  li
  * 被委托方: 中介  ul
3. 使用事件委托的好处
  * 添加新的子元素, 自动有事件响应处理
  * 减少事件监听的数量: n==>1
4. jQuery的事件委托API
  * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  * 移除事件委托: $(parentSelector).undelegate(eventName)
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
  // 设置事件委托delegate
  $('ul').delegate('li', 'click', function () {
    // console.log(this)
    this.style.background = 'red'
  })

  $('#btn1').click(function () {
    $('ul').append('<li>新增的li....</li>')
  })

  $('#btn2').click(function () {
    // 移除事件委托
    $('ul').undelegate('click')
  })

</script>
</body>
</html>

六.淡入淡出

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>21_淡入淡出</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }

  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50px;
    left: 10px;
    background: red;
  }
</style>

<body>
<button id="btn1">慢慢淡出</button>
<button id="btn2">慢慢淡入</button>
<button id="btn3">淡出/淡入切换</button>

<div class="div1">
</div>

<!--
淡入淡出: 不断改变元素的透明度(opacity)来实现的
1. fadeIn(): 带动画的显示
2. fadeOut(): 带动画隐藏
3. fadeToggle(): 带动画切换显示/隐藏
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求：
   1. 点击btn1, 慢慢淡出
     * 无参
     * 有参
       * 字符串参数
       * 数字参数
   2. 点击btn3, 慢慢淡入
   3. 点击btn3, 淡出/淡入切换，动画结束时提示“动画结束了”
   */

  var $div1 = $('.div1')

  $('#btn1').click(function () {
    // $div1.fadeOut()
    // $div1.fadeOut('slow')
    $div1.fadeOut(1000, function () {
      alert('动画完成了!!!')
    })
  })

  $('#btn2').click(function () {
    $div1.fadeIn()
  })

  $('#btn3').click(function () {
    $div1.fadeToggle()
  })
</script>
</body>
</html>

七.滑动

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>22_滑动</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }

  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50px;
    left: 10px;
    background: red;
  }
</style>
<body>
<button id="btn1">慢慢收缩</button>
<button id="btn2">慢慢展开</button>
<button id="btn3">收缩/展开切换</button>

<div class="div1">
</div>

<!--
滑动动画: 不断改变元素的高度实现
1. slideDown(): 带动画的展开
2. slideUp(): 带动画的收缩
3. slideToggle(): 带动画的切换展开/收缩
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求：
   1. 点击btn1, 向上滑动
   2. 点击btn2, 向下滑动
   3. 点击btn3, 向上/向下切换
   */
  var $div1 = $('.div1')

  // 1. 点击btn1, 向上滑动
  $('#btn1').click(function () {
    $div1.slideUp(3000)
  })

  // 2. 点击btn2, 向下滑动
  $('#btn2').click(function () {
    $div1.slideDown()
  })

  // 3. 点击btn3, 向上/向下切换
  $('#btn3').click(function () {
    $div1.slideToggle()
  })

</script>
</body>
</html>

八.显示与隐藏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>23_显示与隐藏</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }

  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50px;
    left: 10px;
    background: red;
    display: none;
  }
</style>
<body>
<button id="btn1">瞬间显示</button>
<button id="btn2">慢慢显示</button>
<button id="btn3">慢慢隐藏</button>
<button id="btn4">显示隐藏切换</button>

<div class="div1">
</div>

<!--
显示隐藏，默认没有动画, 动画(opacity/height/width)
1. show(): (不)带动画的显示
2. hide(): (不)带动画的隐藏
3. toggle(): (不)带动画的切换显示/隐藏
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
  需求:
  1. 点击btn1, 立即显示
  2. 点击btn2, 慢慢显示
  3. 点击btn3, 慢慢隐藏
  4. 点击btn4, 切换显示/隐藏
   */
  var $div1 = $('.div1')
  //1. 点击btn1, 立即显示
  $('#btn1').click(function () {
    $div1.show()
  })

  //2. 点击btn2, 慢慢显示
  $('#btn2').click(function () {
    $div1.show(1000)
  })

  //3. 点击btn3, 慢慢隐藏
  $('#btn3').click(function () {
    $div1.hide(1000)
  })

  //4. 点击btn4, 切换显示/隐藏
  $('#btn4').click(function () {
    $div1.toggle(1000)
  })
</script>
</body>
</html>

九.自定义动画

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>24_自定义动画</title>
  <style type="text/css">
    * {
      margin: 0px;
    }

    .div1 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 300px;
      background: red;
    }
  </style>
</head>
<body>
<button id="btn1">逐渐扩大</button>
<button id="btn2">移动到指定位置</button>
<button id="btn3">移动指定距离</button>
<button id="btn4">停止动画</button>

<div class="div1">
  爱在西元前，学在尚硅谷
</div>

<!--
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
1. animate(): 自定义动画效果的动画
2. stop(): 停止动画

-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求：
    1. 逐渐扩大
      1). 宽/高都扩为200px
      2). 宽先扩为200px, 高后扩为200px
    2. 移动到指定位置
      1).移动到(500, 100)处
      2).移动到(100, 20)处
    3.移动指定的距离
      1). 移动距离为(100, 50)
      2). 移动距离为(-100, -20)
    4. 停止动画
   */
  var $div1 = $('.div1')

  /*
   1. 逐渐扩大
     1). 宽/高都扩为200px
     2). 宽先扩为200px, 高后扩为200px
   */
  $('#btn1').click(function () {
    /*
    $div1.animate({
      width: 200,
      height: 200
    }, 1000)
    */
    $div1.animate({
        width: 200
      }, 1000)
      .animate({
        height: 200
      }, 1000)

  })

  /*
   2. 移动到指定位置
     1).移动到(500, 100)处
     2).移动到(100, 20)处
   */
  $('#btn2').click(function () {
    // 1).移动到(500, 100)处
    /*
    $div1.animate({ // 向右下移动
      left: 500,
      top: 100
    }, 1000)
    */

    // 2).移动到(100, 20)处
    $div1.animate({ // 向左上移动
      left: 100,  // 300
      top: 20  // 50
    }, 1000)
  })

  /*
   3.移动指定的距离
     1). 移动距离为(100, 50)
     2). 移动距离为(-100, -20)
   */
  $('#btn3').click(function () {
    // 1). 移动距离为(100, 50)
    /*$div1.animate({
      left: '+=100',
      top: '+=50'
    }, 1000)*/

    // 2). 移动距离为(-100, -20)
    $div1.animate({
      left: '-=100',
      top: '-=20'
    }, 3000)
  })

  $('#btn4').click(function () {
    $div1.stop()
  })

</script>
</body>
</html>

彭于晏爱编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery第四天

一.文档_增删改<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>17_文档_增删改</title></head><style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; h
复制链接

扫一扫

专栏目录