jQuery高级

最新推荐文章于 2021-08-22 09:12:50 发布
最新推荐文章于 2021-08-22 09:12:50 发布
阅读量116 收藏
点赞数
文章标签： jquery html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41775886/article/details/112971669
版权

jQuery高级

1. 事件冒泡

  • 什么是事件冒泡
    在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

  • 阻止事件冒泡
    事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止，需要在函数定义的时候加上一个参数。

  • 阻止默认行为

    event.preventDefault();

  • 阻止事件冒泡和阻止默认行为可以合并写为 return false;

  • 需要注意几个概念：

  1. 不管事件函数是否绑定，那么它都会在对应的时候触发响应的事件，只是没有处理的动作而已
  2. 父子关系是在html标签里相对的，而不是他们在网页看到的摆放的位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grandfather{
            width: 300px;
            height: 300px;
            background-color: purple;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 400px;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //var $son = $('.son');

            // ev是发生事件时，系统自动产生的事件对象，通过第一个参数传入，需要在函数定义的位置把这个参数加上
            $('.son').click(function(ev){
                alert(1);
                // 阻止事件冒泡往上传
                ev.stopPropagation();
            });

            $('.father').click(function(){
                alert(2);
                return false;
            });

            $('.grandfather').click(function(){
                alert(3);
            });

            // $(document)表示顶级标签,相当于<html>标签
            $(document).click(function(){
                alert(4);
            });
        })
    </script>
</head>
<body>
    <!-- .grandfather>.father>.son -->
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

2. 事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

  • delegate()方法

    • 参数1：代理的选择器

    • 参数2：代理的事件

    • 参数3：绑定的动作函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $li = $('.list li');
            var $list = $('.list');

            // 这样写里面会绑定8次，效率不高
            // $li.click(function(){
            //     $(this).css('color', 'red');
            // });

            // 使用事件委托，效率高
            // 参数1：代理的选择器
            // 参数2：代理的事件
            // 参数3：绑定的动作函数
            $list.delegate('li', 'click', function(){
                $(this).css('background', 'gold');
            });
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>
</body>
</html>

3. Dom操作(改变html的结构)

Dom操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况：

  1. 移动现有标签的位置
  2. 将新创建的标签插入到现有的标签中

创建新标签

var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>');

移动或者插入标签的方法

  1. append()和appendTo()：在现存元素的内部，从后面放入元素
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

  1. prepend()和prependTo()：在现存元素的内部，从前面放入元素

  2. after()和insertAfter()：在现存元素的外部，从后面放入元素

  3. before()和insertBefore()：在现存元素的外部，从前面放入元素

删除标签

$('#div1').remove();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $h01 = $('#h01');
            var $h02 = $('#h02');
            var $p01 = $('#p01');
            var $div01 = $('#div01');
            
            // 当前元素里面的后面放另外一个元素
            // $div01.append($h01);
            // 当前元素要放到另外一个元素的里面的后面
            $h01.appendTo($div01);

            // 当前元素里面的前面要放另外一个元素
            // $div01.prepend($h02);
            // 当前元素要放到另外一个元素的里面的前面
            $h02.prependTo($div01);

            // 当前元素外面的后面要放另外一个元素
            // $div01.after($p01);
            // 当前元素要放到另外一个元素的外面的后面
            $p01.insertAfter($div01);

            // 创建新标签
            // 创建一个空的div
            var $newdiv01 = $('<div>');
            // 创建一个有内容的div
            var $newdiv02 = $('<div>这是新创建的第二个div</div>');

            // 当前元素外面的前面要放另外一个元素
            $div01.before($newdiv01);
            // 当前元素要放到另外一个元素的外面的前面
            $newdiv02.insertBefore($div01);

            // 删除标签
            $newdiv02.remove();
        })
    </script>
</head>
<body>
    <h4 id="h01">这是div01外面的h4</h4>
    <h2 id="h02">这是div01外面的h2</h2>
    <p id="p01">这是div01上面的p标签</p>
    <div id="div01">
        <h3>这是div01里面的h3</h3>
        <p>这是div01里面的p标签</p>
    </div>
</body>
</html>

4. Todolist练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<style type="text/css">
		.list_con{
			width:600px;
			margin:50px auto 0;
		}
		.inputtxt{
			width:550px;
			height:30px;
			border:1px solid #ccc;
			padding:0px;
			text-indent:10px;			
		}
		.inputbtn{
			width:40px;
			height:32px;
			padding:0px;
			border:1px solid #ccc;
		}
		.list{
			margin:0;
			padding:0;
			list-style:none;
			margin-top:20px;
		}
		.list li{
			height:40px;
			line-height:40px;
			border-bottom:1px solid #ccc;
		}

		.list li span{
			float:left;
		}

		.list li a{
			float:right;
			text-decoration:none;
			margin:0 10px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// 1. 选择需要操作的元素
			var $txt = $('#txt1');
			var $btn = $('#btn1');
			var $list = $('#list');
		
			// 2. 给增加按钮绑定click事件
			$btn.click(function(){
				// 3. 读取输入框里面的值
				var sVal = $txt.val();
				// 4. 清空输入框的内容
				$txt.val("");
				
				// 5. 判断是否为空，空的提示要输入内容
				if(sVal == ""){
					alert('请输入计划内容！');
					return;
				}

				// 6. 创建一个li标签
				var $newli = $('<li><span>'+sVal+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
				
				// 7. 将新创建的li放到ul的里面的后面
				$list.append($newli);

				// var $del2 = $newli.find('.del');
				// $del2.click(function(){
				// 	$(this).parent().remove();
				// });
			});

			// 选择所有删除的标签
			// var $del = $('.del');

			// 给删除标签绑定事件，来删除计划
			// $del.click(function(){
			// 	$(this).parent().remove();
			// });

			// 上面写法代码冗余且性能不高，使用事件委托
			// 8. 给ul绑定委托事件，代理它里面所有a标签的点击操作
			$list.delegate('a', 'click', function(){
				// 9. 获取当前点击的a标签的class名称，从而判断要做什么操作
				var sTr = $(this).prop('class');
				
				// 10.判断sTr如果是del，就做删除操作
				if(sTr == 'del'){
					$(this).parent().remove();
				}else if(sTr == 'up'){
					// 11. 判断sTr如果是up，就做上移操作
					if($(this).parent().prev().length == 0){
						alert('已经是最上面一个啦！');
						return;
					}
					$(this).parent().insertBefore($(this).parent().prev());
				}else{
					if($(this).parent().next().length == 0){
						alert('已经是最下面一个啦！');
						return;
					}
					$(this).parent().insertAfter($(this).parent().next());
				}
			});

		})

	</script>	
</head>
<body>

	<div class="list_con">
	<h2>To do list</h2>
		<input type="text" name="" id="txt1" class="inputtxt">
		<input type="button" name="" value="增加" id="btn1" class="inputbtn">
		
		<ul id="list" class="list">

			<li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
			<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
			<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>

		</ul>

	</div>
</body>
</html>

5. JavaScript对象直接量

可以类比结构体记忆

javascript中的对象，可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象。

创建javascript对象可以用对象直接量的方式直接创建：

var person = {
    name:'Rose',
    age: 18,
    sayName:function(){
        alert('My name is' + this.name);
    }
}

// 调用属性和方法：
alert(person.age);
person.sayName();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // 通过对象直接量的方式来创建一个对象
        var oPerson = {
            name:'alin',
            age:21,
            showname:function(){
                alert('我的名字是：'+this.name);
            },
            showage:function(){
                alert('我的年龄是：'+this.age);
            }
        };

        // 调用对象的属性和方法
        alert(oPerson.name);
        oPerson.showage();

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

6. json数据格式

JavaScript中的json定义时，必须用""包裹key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 定义一个json数据
        var sJson = '{\
            "name":"alin",\
            "age":18,\
            "hobby":["study","shopping","basketball"],\
            "school":{"name":"tyut","location":"taiyuan"}\
        }';

        // 将json数据转化成JavaScript对象
        var oJson = JSON.parse(sJson);
        
        // alert(oJson.name);
        // alert(oJson.hobby[0]);
        alert(oJson.school.location);

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

7. ajax

ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。

ajax需要在服务器环境下运行。

**$.ajax使用方法 **

常用参数：
1、url 请求地址
2、type 请求方式，默认是’get’，常用的还有’post’
3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’text’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是’true’，表示异步

<script>
    $(function(){
	/*
    $.ajax({
        url:'js/data01.json',
        type:'get',
        dataType:'json',
        success:function(dat){
            // alert(dat.name);
            $('.login_info').show().children().html(dat.name);
            $('.login_btn').hide();
        },
        error:function(){
            alert('服务器超时, 请重试!');
        }
    });
	*/
    $.get('js/data01.json', function(dat){
        $('.login_info').show().children().html(dat.name);
        $('.login_btn').hide();
    }, 'json');
})
</script>
alin Wang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery高级编程
09-01
《jQuery高级编程》从开发人员的层次对iQuery提供了一个全面的介绍。另外还深入介绍了iQuery的很多高级特性。, , 在《jQuery高级编程》第1部分中，深入介绍了iQuery的基础知识、介绍了如何选择或操作DOM元素，以及...
jquery高级编程
11-21
jquery高级编程文档，学习文档，学习文档，学习文档。
JQuery高级
Happy_Boy_z的博客
12-22 189
JQuery高级动画遍历 动画 三种方式显示和隐藏元素 默认显示和隐藏方式 show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed],[easing],[fn]) 参数： speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：100...
学习的第十天
zxc1006183503的博客
08-16 108
今日内容： 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) speed：动画的速度，三个与选项"slow" "normal" "fast"或者放毫秒值 easing:指...
Jquery高级
troysps的博客
05-13 877
Jquery 高级 什么是事件: 事件是可以被 JavaScript 侦测到的行为 比如: JavaScript 创建动态页面。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。 jquery事件 focus事件 获取焦点事件 一般不...
jquery 高级
wahaha
09-17 116
1. 动画 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) ...
JQuery的动画、遍历、事件绑定
qq_44341488的博客
07-11 103
动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast") 或表示动画时长的毫秒数值(如：1000)。 2. easing：用来指定切换效果，默认是"swing"，可用参数"lin...
jQuery高级在线配色器插件特效代码
03-20
jQuery高级在线配色器插件是一款功能很强大和超实用的前端小工具，搞前端的网友们有了它之后就可以快速的生成自己喜欢的颜色搭配方案出来，可以离线使用。
JavaWeb快速入门--JQuery(2)
龙源IT 的博客
05-02 764
JQuery 高级：动画、遍历、绑定事件
JQuery高级操作详解
小皮皮LL的博客
08-22 772
文章目录JQuery高级操作详解1.动画2.遍历3.事件绑定4.插件 文章目录JQuery高级操作详解1.动画2.遍历3.事件绑定4.插件 JQuery高级操作详解 1.动画 三种方式显示和隐藏元素： 默认显示和隐藏方式 show([speed,[easing],[fn]])。（显示） hide([speed,[easing],[fn]])。（隐藏） toggle([speed,[easing],[fn]])。（在显示和隐藏之间切换） 三个参数： 1.speed：动画的速度。三个预定义的值(“s
jquery 多条件搜索特效 高级查询
11-23
jquery 多条件搜索特效 高级查询 含单选，多选组合查询
jQuery的动态使用总结
zjq_1234的博客
02-13 131
 1. 动画          1. 三种方式显示和隐藏元素              1. 默认显示和隐藏方式     1. show([speed,[easing],[fn]])            1. 参数：                         1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如...
JQuery 高级
云别
09-26 211
JQuery 高级 1. 动画 * JS对象：显示与隐藏 js对象.display=block/none; 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速...
《jquery高级编程》 jd
最新发布
07-22
《jQuery高级编程》是一本面向有一定前端开发基础的读者，深入探讨jQuery框架的高级应用与技巧的书籍。这本书内容广泛且深入，包括了jQuery的核心原理、高级选择器、动画效果、Ajax异步请求、事件处理、插件开发等等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值