jquery(三)节点操作-滚动事件-ajax

最新推荐文章于 2024-07-30 03:35:30 发布

V-Sugar

最新推荐文章于 2024-07-30 03:35:30 发布

阅读量297

点赞数

分类专栏：前端文章标签： jquery css js javascript html

本文链接：https://blog.csdn.net/weixin_43844838/article/details/107449010

版权

本文详细介绍了jQuery中的节点操作，包括如何插入、删除元素以及事件委托。接着讨论了滚动事件和函数节流的概念，阐述了如何处理高频触发的事件。此外，文章还深入讲解了AJAX的使用，包括json数据格式和参数设置，并提醒读者AJAX操作需要服务器环境支持。最后，展示了使用jQuery实现滚动条的示例。

摘要由CSDN通过智能技术生成

jquery库三

一、节点操作

1. 节点操作的内容

放到父级内容后面:
1. x.append(a): 在节点的尾部插入将a放到x中去父元素类后面放入子元素
2. a.appendTo(x): 将a放到x中子元素放到父元素的后面
放到父级内容的前面
1. prepend()
2. prependTO()
放到这个元素的后面同级的:
1. after()
2. insertAfter()
放到这个元素的后面同级的:
1. before()
2. insertBefore()
删除元素
().remove()

2. 使用验证实例

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>节点操作</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">
		$(function(){
      

			// 往里面的方法
			// 方法一：  当元素里面有内容的时候就不能用这种了
			// 直接用html的字符串的方式添加节点-性能最高
			// 直接覆盖掉原来的  或者要获取到后再家加上去
			// $('#div1').html($('#div1').html() + "<a href='#'>这是一个a标签</a>")
			

			// 方法二：
			// 节点操作
			

			// 往父级内容的后面插东西
			// 1. 新建一个带有属性的a元素，然后赋值给$a
			var $a = $('<a href="#">链接</a>');  // 有内容的放进去
			// 新建一个空的a元素
			var $a2 = $('<a>');  // 放一个空标签进去

			// 2. 用法一： append()  -- 在尾部加入 父元素类后面放入子元素
			$('#div1').append($a);
			$('#div1').append($a2);

			// 3. 用法二： appendTo()  子元素放到父元素的后面
			// $a.appendTo($('#div1'));


			var $p = $('<p>这是一个p元素</p>');

			// 放到元素的前面：
			// 1. prepend()
			$('#div1').prepend($p);

			// 2. prependTo()
			$p.prependTo($('#div1'));



			var $h2 = $('<h2>这是一个h2标签</h2>');

			// 放到#div1 后面 与#div1同级
			// 方法一:
			// $('#div1').after($h2);

			// 方法二：
			$h2.insertAfter($('#div1'));


			// 放到#div1 的前面  与#div1同级
			var $h3 = $('<h3>这是一个h3标签</h3>');
			// 方法一:
			// $('#div1').before($h3);

			// 方法二:
			$h3.insertBefore($('#div1'));



		});
	</script>

</head>
<body>
	<div id="div1">
		<h1>这是一个H1元素</h1>
	</div>

</body>
</html>

3. 节点操作+事件委托-计划表

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<style type="text/css">
		.list_con{
      
			width: 500px;
			/*height:500px;*/
			margin:50px auto 0;
			/*background-color: gold;*/
			font-size: 0px;
		}
		.list_con h2{
      
			font-size: 20px;
		}
		input{
      
			padding:0;
			font-size: 16px;
			/*outline: none;*/

		}
		.inputtxt{
      
			width:444px;
			height:30px;
			margin-right: 2px;
		}
		.inputbtn{
      
			width:50px;
			height:32px;
		}
		.list{
      
			font-size: 16px;
			list-style: none;
			padding: 0px;
			margin:16px 0 0;
		}
		.list li{
      
			border-bottom: 1px solid #666;
			height:40px;
			/*background-color: gold;*/
			line-height: 40px;
			/*text-indent: 32px;*/
			position: relative;
		}
		.list li span{
      
			float:left;

		}

		.list li a{
      
			float:right;
			margin:0 10px;
			text-decoration: none;
		}
		.list li a:hover{
      
			color:gold;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">

		$(function(){
      

			// 1. 获取
			var $inputtxt = $('#txt1');

			var $btn = $('#btn1');

			var $ul = $('#list');

			$inputtxt.focus();

			// 2. 操作按钮
			// // 3. ul中添加东西
			// 4. a标签移动事件
			$btn.click(function(){
      

				// 获取input输入框的值
				var $val = $inputtxt.val();

				if ($val == ""){
      
					alert("请输入内容");
					// 直接结束运行
					return;
				}

				// 修改值
				var $li = $('<li><span>'+$val+'</span><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a><a href="javascript:;" class="del">删除</a></li>');

				$ul.append