JS（JQuery高级）

最新推荐文章于 2019-10-16 16:44:48 发布

qq_1405449844

最新推荐文章于 2019-10-16 16:44:48 发布

阅读量111

点赞数

分类专栏： JS 文章标签： JS JQuery

本文链接：https://blog.csdn.net/qq_45621713/article/details/102403874

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JQuery 高级

1. 动画
	1. 三种方式显示和隐藏元素
		1. 默认显示和隐藏方式
			1. show([speed,[easing],[fn]])
				1.speed:动画的速度，三个预定义('slow','normal','fast'),或表示动画时长毫秒值
				2.easing:切换效果，默认值'swing',可选参数'linear'
					*swing 先慢，再快，最后慢
				3.fn,function，回调函数，在动画执行完之后调用一次
			2. hide([speed,[easing],[fn]])
			3. toggle([speed],[easing],[fn])
		
		2. 滑动显示和隐藏方式
			1. slideDown([speed],[easing],[fn])
			2. slideUp([speed,[easing],[fn]])
			3. slideToggle([speed],[easing],[fn])

		3. 淡入淡出显示和隐藏方式
			1. fadeIn([speed],[easing],[fn])
			2. fadeOut([speed],[easing],[fn])
			3. fadeToggle([speed,[easing],[fn]])

 <script>
    	function hideFn() {
    		//第一种隐藏方式
    		/*$('#showDiv').hide(2000, 'linear', function() {
    			alert('动画执行完毕');
    		});*/

    		//第二种，滑动
    		// $('#showDiv').slideUp(1000);

    		//第三种,淡入淡出
    		$('#showDiv').fadeOut(1000);
    	}

    	function showFn() {
    		// $('#showDiv').show(2000);
    		// $('#showDiv').slideDown(1000);
    		$('#showDiv').fadeIn(1000);
    	}

    	function toggleFn() {
    	//$('#showDiv').toggle(1000);
    	//$('#showDiv').slideToggle(1000);
    	$('#showDiv').fadeToggle(1000);
    	}
    </script>
    <body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>

2. 遍历
	1.js   for(初始化值;结束循环条件;步长)
	2.jq
		1.jq对象.each(function(索引,元素){})
			this  表示每个元素对象
			回调函数返回值： function返回false   结束循环(break)
						  function返回true    结束本次循环，继续下次循环(continue)	
		2.$.each(function)
		3.for(元素 of 容器对象)  3.0版本以后使用

<script>
    	$(function() {
    		//1.获取所有li标签
    		var cities = $('#city li'); //后代选择器
    		//cities jq对象   cities[i] js对象
    		//js遍历
    		/*for(var i = 0; i < cities.length; i++) {
    			// alert($(cities[i]).html());
    			// alert(i + '  ' + cities[i].innerHTML);
    		}*/

    		//第一种jq遍历
    		/*cities.each(function(index, element) {
    			//this获取到的是一个js对象
    			//alert(this.innerHTML);
    			//alert($(this).html());
    			//alert(index + ' ' + element.innerHTML);
    			if ('上海' === element.innerText) {
    				//break;//因为不是for循环，所以不能用break和continue
    				return false;
    				// return true 相当于continue
    				// return false 相当于break
    			}
    			alert(this.innerHTML);
    		})*/

    		//第二种方式
    		/*$.each(cities,function() {
    			alert(this.innerHTML);
    		})*/

    		//第三种方式
    		for (li of cities) {
    			alert(li.innerHTML);
    		}
    	})
    </script>

<body>
	<ul id="city">
	    <li>北京</li>
	    <li>上海</li>
	    <li>天津</li>
	    <li>重庆</li>
	</ul>
</body>

3. 事件绑定
	1.jq的标准事件绑定方式
		jq对象.事件方法(回调函数)
			当回调函数为空的时候，会触发浏览器默认行为
			focus()   submit()提交表单

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
   	<script src="../js/jquery-3.3.1.js"></script>
   	<script>
   		//1.获取name对象，绑定click事件
   		$(function() {
   			/*$('#name').click(function() {
   				alert('被点击了');
   			})*/

   			//给name绑定鼠标移入移出事件
   			/*$('#name').mouseover(function() {
   				alert('鼠标移入');
   			});

   			$('#name').mouseout(function() {
   				alert('鼠标移出');
   			})*/

   			//链式编程
   			/*$('#name').mouseover(function() {
   				alert('鼠标移入');
   			}).mouseout(function() {
   				alert('鼠标移出');
   			});*/

   			$('#name').focus(function() {
   				console.log(1);
   			});

   		})
   		
   	</script>
</head>
<body>
	<input id="name" type="text" value="绑定点击事件">
</body>
</html>

	2.on绑定事件/off解除绑定
		jq对象.on('事件名称', 回调函数)
		jq对象.off('事件名称')   当不写参数的时候，解除所有事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src='../js/jquery-3.3.1.js'></script>
    <script type="text/javascript">
    	$(function() {
    		//1.使用on给按钮绑定事件
    		$('#btn').on('click', function() {
    			alert('点击了');
    		});

    		//2.使用off解绑事件
    		$('#btn2').click(function() {
    			//解除btn的单击事件
    			//$('#btn').off('click');
    			//将事件源上的所有事件全部解除
    			$('#btn').off();

    		});
    	})	
    </script>
</head>
<body>
	<input id="btn" type="button" value="使用on绑定点击事件">
	<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>

	3.事件切换
		jq对象.toggle(fn1, fn2,.....) 依次执行(可循环)参数函数
		从1.9版本之后，jq不在支持toggle  所以要用migrate(迁移)插件回复此功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/jquery-migrate-1.0.0.js"></script>
    <script>
    	//在jq3.3 toggle弃用
    	$(function() {
    		//获取按钮，绑定toggle事件
    		$('#btn').toggle(function() {
    			$('#myDiv').css('backgroundColor', 'green');
    		}, function() {
    			$('#myDiv').css('backgroundColor', 'red');
    		});
    	})
    </script>
</head>
<body>
	
    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        点击按钮变成绿色，再次点击红色
    </div>
</body>
</html>

4. 插件：增强JQuery的功能
	1.实现方式：
		1. $.fn.extend(对象)
			增强jq对象的功能   $('#id').新功能();

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>对象进行方法扩展</title>

    <!-- $('#btn').demo1() -->
    <script src="../js/jquery-3.3.1.js"></script>
   	<script>
   		//使用jq插件,给jq对象添加两个方法,check()选中所有复选框,uncheck()取消选中

   		//1.定义jq对象插件
   		$.fn.extend({
   			check:function() {
   				//选中复选框   this 调用该方法的jq对象
   				this.prop('checked', true);
   			},
   			uncheck:function() {
   				//取消选中复选框
   				this.prop('checked', false);
   			}
   		});

   		$(function() {
   			//获取按钮
   			$('#btn-check').click(function() {
   				//获取所有复选框对象
   				$('input[type="checkbox"]').check();
   			});
   			//复选框对象调用方法

   			$('#btn-uncheck').click(function() {
   				//获取所有复选框对象
   				$('input[type="checkbox"]').uncheck();
   			});
   		})
   	</script>
</head>
<body>
	<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
	<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
	<br/>
	<input type="checkbox" value="football">足球
	<input type="checkbox" value="basketball">篮球
	<input type="checkbox" value="volleyball">排球

</body>
</html>

		2. $.extend(对象)
			$.新功能();

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>方法扩展</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <script>
    	//对全局方法进行扩展,max求两个值的最大值, min求两个值的最小值
    	//1.定义插件
    	//$.fn.extend
    	$.extend({
    		max:function(a, b) {
    			return a >= b ? a : b;
    		},
    		min:function(a, b) {
    			return a <= b ? a : b; 
    		}
    	})

    	var max = $.max(4, 5);
    	//alert(max);

    	var min = $.min(4, 5);
    	alert(min);


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

qq_1405449844

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS（JQuery高级）

JQuery 高级1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1.speed:动画的速度，三个预定义('slow','normal','fast'),或表示动画时长毫秒值 2.easing:切换效果，默认值'swing',可选参数'linear' *swing 先慢，再快，...
复制链接

扫一扫

专栏目录