周报

最新推荐文章于 2022-02-11 17:33:24 发布

好困鸭

最新推荐文章于 2022-02-11 17:33:24 发布

阅读量100

点赞数

分类专栏：基础文章标签： jquery

本文链接：https://blog.csdn.net/Misaki0728/article/details/112144414

版权

基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Jquery案例

基于jq的全选反选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 引入js库 -->
        <script src="jquery/jquery-1.11.3.js"></script>
    </head>
    <body>
        <input type="checkbox" name="ck">葵花宝典<br>
        <input type="checkbox" name="ck">辟邪剑谱<br>
        <input type="checkbox" name="ck">九阴真经<br>
        <input type="checkbox" name="ck">乾坤大挪移<br>
        <input type="checkbox" name="ck">九阳神功<br>
        <input type="checkbox" name="" id="selectAll">全选<br>
        <input type="checkbox" name="" id="selectNone">不选<br>
        <input type="checkbox" name="" id="selectReverse">反选<br>
        <script>
            $(function(){
                //全选
                $('#selectAll').click(function(){
                    $('input[name=ck]').prop('checked',$(this).prop('checked'));
                })

                //不选
                $('#selectNone').click(function(){
                    if($(this).prop('checked')){
                        $('input[name=ck]').attr('checked',false);
                    }
                })

                //反选
                $('#selectReverse').click(function(){
                    if($(this).prop('checked')){
                        //jquery循环遍历 i表示遍历到的元素索引(从0开始),e表示当前遍历到的元素(js dom对象)
                        $('input[name=ck]').each(function(i,e){
                            $(e).prop('checked',!$(e).prop('checked'));
                        })
                    }
                })

            })
        </script>
    </body>
</html>

可编辑表格实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 引入js库 -->
        <script src="jquery/jquery-1.11.3.js"></script>
    </head>
    <body>
        <input type="checkbox" name="ck">葵花宝典<br>
        <input type="checkbox" name="ck">辟邪剑谱<br>
        <input type="checkbox" name="ck">九阴真经<br>
        <input type="checkbox" name="ck">乾坤大挪移<br>
        <input type="checkbox" name="ck">九阳神功<br>
        <input type="checkbox" name="" id="selectAll">全选<br>
        <input type="checkbox" name="" id="selectNone">不选<br>
        <input type="checkbox" name="" id="selectReverse">反选<br>
        <script>
            $(function(){
                //全选
                $('#selectAll').click(function(){
                    $('input[name=ck]').prop('checked',$(this).prop('checked'));
                })

                //不选
                $('#selectNone').click(function(){
                    if($(this).prop('checked')){
                        $('input[name=ck]').attr('checked',false);
                    }
                })

                //反选
                $('#selectReverse').click(function(){
                    if($(this).prop('checked')){
                        //jquery循环遍历 i表示遍历到的元素索引(从0开始),e表示当前遍历到的元素(js dom对象)
                        $('input[name=ck]').each(function(i,e){
                            $(e).prop('checked',!$(e).prop('checked'));
                        })
                    }
                })

            })
        </script>
    </body>
</html>

事件绑定与事件委托

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery/jquery-1.11.3.js"></script>
	</head>
	<body>
		<div id="app">
			<button id="btn1">默认按钮</button>
		</div>
		<script>
			/**
			 * JS事件委托和事件绑定
			 * 事件绑定:针对已存在元素进行绑定
			 */
			$(function(){
				//事件绑定
				$('#btn1').click(function(){
					$('#app').append('<button class="btn">生成按钮</button>');
					return false;
				})
				//事件委托
				$('#app').on('click','.btn',function(){
					console.info('btn click');
				})
			})
		</script>
	</body>
</html>

动态菜单实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			ul{
				list-style: none;
			}
			#menu>li{
				float:left;
				margin:0 1px 0 0;
				width:200px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #27ae60;
			}
			a{
				display: block;
				font-size: 1.1em;
				color:#eee;
				text-decoration: none;
			}
			.submenu{
				background-color: #2ecc71;
				display: none;
			}
			.submenu>li{
				border-bottom: 1px solid rgba(255,255,255,.3);
			}
			.submenu>li:hover{
				background-color:rgba(0,0,0,0.2);
			}
		</style>
		<script src="jquery/jquery-1.11.3.js"></script>
	</head>
	<body>
		<ul id="menu">
			<li>
				<a href="">menu1</a>
				<ul class="submenu">
					<li><a href="">submenu1-1</a></li>
					<li><a href="">submenu1-2</a></li>
				</ul>
			</li>
			<li>
				<a href="">menu2</a>
				<ul class="submenu">
					<li><a href="">submenu2-1</a></li>
					<li><a href="">submenu2-2</a></li>
				</ul>
			</li>
			<li>
				<a href="">menu3</a>
				<ul class="submenu">
					<li><a href="">submenu3-1</a></li>
					<li><a href="">submenu3-2</a></li>
				</ul>
			</li>
		</ul>
		
		<script>
			$(function(){
				
				$('#menu>li').hover(function(){
					$(this).find('.submenu:not(:animated)').slideDown();
				},function(){
					$(this).find('.submenu:not(:animated)').slideUp();
				})
				
				
			})
		</script>
	</body>
</html>

好困鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
周报

Jquery案例基于jq的全选反选可编辑表格实现事件绑定与事件委托动态菜单实现基于jq的全选反选<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>  <script src="jquery/jquery-1.11.3.js">
复制链接

扫一扫