013-jQuery案例

最新推荐文章于 2024-04-27 02:33:39 发布

weixin_45615613

最新推荐文章于 2024-04-27 02:33:39 发布

阅读量60

点赞数

本文链接：https://blog.csdn.net/weixin_45615613/article/details/102459013

版权

2019 10 09

div显示和隐藏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 1.引入jquery -->
   	<script src="../js/jquery-3.3.1.js"></script>
	<script>
		// 2.入口函数
		/*$(function() {
			$("#btn1").click(function() {
				$('#showDiv').hide(1000,'linear',function() {
					alert('隐藏');
				})
			})
		});

		function showFn() {
			$('#showDiv').show(2000);
		}*/

		function toggleFn() {
			$('#showDiv').fadeToggle(1000);
		}
		
		function hideFn() {
			$('#showDiv').fadeOut(1000);
		}

		function showFn() {
			$('#showDiv').fadeIn(1000);
		}
	</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()" id="btn1">
<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>
</html>

遍历

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
	<script src="../js/jquery-3.3.1.js"></script>
    <script>
    	//1.js的遍历方式
    		// for(初始化值;循环结束条件;步长)
    	//2.jq的遍历方式
    		// 1.    jq对象.each(callback)
    		// 2.    $.each(object, [callback(回调函数)])
    		// 3.    for(... of ...);增强for循环

    	//1.js的遍历方式
    	$(function() { 
    		//1.获取所有的ul的li标签  cities是jq对象    city是一个js对象   jq html()

    		var cities = $('#city li');
    		//2.遍历li
    		// for(var i = 0; i < cities.length; i++) {
    		// 	alert(cities[i].innerText);
    		// }

    		//jq的第一种方式
    		/*cities.each(function() {
    			// js对象
    			// alert(this.innerHTML);
    			// jq对象
    			alert($(this).html());
    		});*/
    		/*cities.each(function(index, element) {
    			alert(index + ' ' + element.innerHTML);
    			//如果遍历到上海，则结束循环;
    			if ('上海' === $(element).html()) {
    				//跳出循环  true表示continue
    				//注意，jq遍历不是for循环，所以不能用break 
    				//return  true 表示continue
    				//return false 表示break
    				return false;    			
    			}
    		})*/

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

    		//jq的第三种方式
    		for (li of cities) {
    			alert($(li).html());

    		}
    	});


    	//2.
    </script>
</head>
<body>
	<ul id="city">
	    <li>北京</li>
	    <li>上海</li>
	    <li>天津</li>
	    <li>重庆</li>
	</ul>
</body>
</html>

绑定点击事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 1.引入jq -->
    <script src="../js/jquery-3.3.1.js"></script>
    <script>
    	// 2.入口函数
    	$(function() {
    		//获取name对象，绑定click事件
    		/*$('#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>

解绑

<!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绑定点击事件
    		// jq对象.on('事件名称', 回调函数)
    		$('#btn').on('click', function() {
    			alert('点击');
    		});

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

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

事件切换

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

扩展

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