jquery基础（4）

最新推荐文章于 2021-12-13 11:49:06 发布

xh943426

最新推荐文章于 2021-12-13 11:49:06 发布

阅读量164

点赞数

分类专栏：常用事件事件冒泡元素节点操作文章标签： jquery

本文链接：https://blog.csdn.net/xh943426/article/details/107565778

版权

常用事件同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

事件冒泡

1 篇文章 0 订阅

订阅专栏

元素节点操作

1 篇文章 0 订阅

订阅专栏

一、jquery事件

1.常用的DOM事件

1.1 鼠标事件
a.单机事件：click()

         $('p').click(function(){
			 alert('你点击了我');
		 })

b.双击事件：dblclick()

         $('p').dblclick(function(){
         			 alert('你双击了我');
         })

c.当鼠标指针穿过（进入）被选元素时：mouseenter()

         $('p').mouseenter(function(){
			 alert('你来了');
		 })

d.当鼠标指针离开被选元素时：mouseleave()

          $('p').mouseleave(function(){
			  alert('你走了');
		  })

e.当鼠标指针悬停在被选元素上时：hover()

  $("p").hover(function(){
    $("p").css("background-color","yellow");
    },function(){
    $("p").css("background-color","pink");
  });

1.2常用的键盘事件
a.当键盘或按钮被按下时（键按下的过程）：keypress()

  $("input").keypress(function(){
    $("span").text(i+=1);
  });

注：keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。

b.当键盘或按钮被按下时（键被按下）：keydown()

  $("input").keydown(function(){
    $("input").css("backgroundColor","yellow");
      })

c.当键盘键被松开时：keyup()

  $("input").keyup(function(){
    $("input").css("backgroundColor","pink");
      })

1.3表单事件
a.当提交表单时：submit()

  $("form").submit(function(){
    alert("提交");
  });

b.当元素的值改变时：change()

  $("input").change(function(){
    alert("文本已被修改");
      })

c.当元素获得焦点时：focus()

  $("input").focus(function(){
    $(this).css('backgroundColor','red');
      })

d.当元素失去焦点时发生 blur 事件：blur()

		$('input').blur(function(){
			alert('失去焦点');
		     })

1.4文档/窗口事件
a.当指定的元素已加载时(1.8版本已废弃)：load()

$("img").load(function(){
    alert("图片已载入");
});

b.当用户离开页面时(1.8版本已废弃)：unload()

$(window).unload(function(){
    alert("Goodbye!");
});

c.当用户滚动指定的元素时：scroll()

$("div").scroll(function(){
    $("span").text(x+=1);
});

d.当调整浏览器窗口大小时：resize()

$(window).resize(function(){
    $('span').text(x+=1);
});

1.5.其它事件
其它事件请参考jQuery API

二、jquery事件冒泡

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

	<div class="father" style="width: 200px;height: 200px;background-color: red;">
		    <div class="son" style="width: 100px;height: 100px;background-color: rosybrown;">
		        <div class="grandson" style="width: 50px;height: 50px;background-color: green;"></div>
		    </div>
		</div>
		<script type="text/javascript">
			$(function(){
				 var $box1 = $('.father');
				    var $box2 = $('.son');
				    var $box3 = $('.grandson');
				    $box1.click(function() {
				        alert('father');
				    });
				    $box2.click(function() {
				        alert('son');
						
				    });
				    $box3.click(function(event) {
				        alert('grandson');
				        event.stopPropagation();
				
				    });
				    $(document).click(function(event) {
				        alert('grandfather');
						 event.stopPropagation();
				    });
			})

2.阻止默认行为

//阻止右键菜单
$(document).contextmenu(function(event) {
    event.preventDefault();
});

//实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用
return false;

三、jquery事件委托

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

				<script type="text/javascript">
					$(function(){
						$('ul').on('click','li',function(){
							alert(2);
						})
					})
				</script>
			</head>
			<body>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</body>

四、jquery元素节点操作

1.创建节点

var div_1 = $('<div>');
var div_2= $('<div>你个嘚嘚</div>');

2.插入节点
a.内部插入

append(content fn)	在被选元素的结尾插入内容
appendTo()	在被选元素的结尾插入 HTML 元素
prepend(content fn)	在被选元素的开头插入内容
prependTo(content)	在被选元素的开头插入 HTML 元素

//将div_2插入body中
	var div_02=$('<div></div>');
     $('body').append(div_02);
//div_1在div_2后
     var div_1=$('<div></div>');
     div_1.appendTo($('body'));

b.外部插入

after(content fn)	在被选元素外部后插入内容
insertAfter(content)	在被选元素外部后插入 HTML 元素
before(content fn)	在被选元素外部前插入内容
insertBefore(content)	在被选元素外部前插入 HTML 元素

//每个 <p> 元素前插入内容
 $("p").before("<p>Hello world!</p>");
 //在每个<p>元素前插入一个<span>元素
 $("<span>Hello world!</span>").insertBefore("p");

c.包裹

wrap(html ele fn)	在每个被选元素的周围用 HTML 元素包裹起来
unwrap()	移除被选元素的父元素
wrapAll(html ele)	在所有被选元素的周围用 HTML 元素包裹起来
wrapInner(html ele fn)	在每个被选元素的内容周围用 HTML 元素包裹起来

//在每个p元素的内容上包装一个b元素
$("p").wrapInner("<b></b>")
//给每个P元素包裹一个div元素
$("p").wrap("<div></div>")
//给所有p元素包装一个div元素
$("p").wrapAll("<div></div>")
//移除每个p元素的父元素
$("p").unwrap();

d.替换

replaceWith(content fn)	把被选元素替换为新的内容
replaceAll(selector)	把被选元素替换为新的 HTML 元素

//用新文本替换第一个P元素
$("p:first").replaceWith("Hello world!");
    });
    //用一个span元素替换最后一个p元素
    $("<span><b>Hello world!</b></span>").replaceAll("p:last");
	});

e.删除

empty()	移除被选元素的所有子节点和内容
remove([expr])	移除被选元素（包含数据和事件）
detach([expr])	移除被选元素（保留数据和事件）

//移除所有的 <p> 元素
  $("p").detach();

f.复制

clone([Even[,deepEven]])	生成被选元素的副本

//克隆所有P元素，在body元素中插入它们
$("p").clone().appendTo("body");

xh943426

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery基础（4）

一、jquery事件1.常用的DOM事件1.1 鼠标事件a.单机事件：click() $('p').click(function(){ alert('你点击了我'); }) b.双击事件：dblclick() $('p').dblclick(function(){ alert('你双击了我'); }) c.当鼠标指针穿过（进入）被选元素时：mouseenter() $('p').mo
复制链接

扫一扫