jQuery笔记总结

一、常用时间:
1、focus事件,获取焦点事件,一般不往这个事件上绑定函数。一般作为让输入框自动获取焦点的方式,写法:$input.focus()
2、mouseover和mouseout鼠标移入事件,移入事件子元素也会被触发
3、mouseenter和mouseleave鼠标移入移出事件子元素不会被触发
4、hover可以将mouseenter 和mouseleave事件合并在一起些,写的:
$input.hover(function(){mouseenter的操作},function(){mouseleave的操作})

二、事件冒泡
原理:元素发生事件后,会将这个事件传递给父级,父级还会往上传,一直传到最顶级标签,一般最顶级标签写成 ( d o c u m e n t ) 阻 止 冒 泡 事 件 : r e t u r n f a l s e ; 三 、 事 件 委 托 原 理 : 利 用 事 件 冒 泡 的 特 性 , 将 事 件 绑 定 在 父 级 上 , 子 级 发 生 的 时 间 都 会 冒 泡 到 父 级 , 父 级 判 断 子 级 的 特 征 给 它 特 定 的 操 作 。 一 般 写 法 : (document) 阻止冒泡事件:return false; 三、事件委托 原理:利用事件冒泡 的特性,将事件绑定在父级上,子级发生的时间都会冒泡到父级,父级判断子级的特征给它特定的操作。 一般写法: (document)returnfalse;ul delegate(‘li’ , ‘click’ , function(){ $(this)指的是当前冒泡的子级 })
四、DOM(节点操作)
1、append和appendTo
2、prepend 和prependTo
3、after 和insertAfter
4、before 和insertBefore
5、remove删除节点

demo 列表操作,增、删、置顶和下降


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolisttitle>
	<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(){
            var $txt = $('#txt1');
            var $btn = $('#btn1');
            var $ul = $('#list');

            $btn.click(function(){
                var sVal = $txt.val();
				//内容输入完成,清空
				$txt.val('');
                if(sVal == ''){
                alert('请输入内容');
                return;
            }
				//添加内容
                var $li = $('
  • '+ sVal +'删除
  • '
    ) $ul.append($li) }) //事件代理方式解决新加数据删除问题。 $ul.delegate('a','click',function(){ var sHandler = $(this).prop('class');//获取元素属性值 if(sHandler == "del"){ $(this).parent().remove(); //删除该条记录 } if(sHandler =='up'){ if($(this).parent().prev().length == 0){ alert('到顶了') return; } $(this).parent().insertBefore($(this).parent().prev()); } if(sHandler == 'down'){ if($(this).parent().next().length == 0){ alert('到底了'); return; } $(this).parent().insertAfter($(this).parent().next()); } }) })
    script> head> <body> <div class="list_con"> <h2>To do listh2> <input type="text" name="" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn"> <ul id="list" class="list"> <li><span>学习htmlspan><a href="javascript:;" class="up">a><a href="javascript:;" class="down">a><a href="javascript:;" class="del">删除a>li> <li><span>学习cssspan><a href="javascript:;" class="up">a><a href="javascript:;" class="down">a><a href="javascript:;" class="del">删除a>li> <li><span>学习javascriptspan><a href="javascript:;" class="up">a><a href="javascript:;" class="down">a><a href="javascript:;" class="del">删除a>li> ul> div> body> html>

    你可能感兴趣的:(jQuery,笔记总结,前端)