JQ事件和DOM

最新推荐文章于 2024-11-23 11:32:36 发布

人形BUG制造机

最新推荐文章于 2024-11-23 11:32:36 发布

阅读量268

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_47655184/article/details/107394136

版权

在这里插入图片描述

1.隐藏和显示
1.style中的display属性
1.none，隐藏
2.block，显示为块
2.JQ中的显示和隐藏
1.show（时间）函数
2.hide（时间）函数
3.渐隐渐现
1.渐隐

$("#out").click(function(){
		$("#pic").fadeOut(2000);
	});//渐隐

	2.渐现

$("#in").click(function(){
		$("#pic").fadeIn(2000);
	});//渐现

	3.渐隐渐现

$("#in_out").click(function(){
		$("#pic").fadeToggle(2000);
	});//渐隐渐现

4.滑动
	1.向上滑动收起：slideDown（时间）
	2.向下滑动收起：slideUp（时间）

2.事件
1.判断对象是否有该样式：if( $this).hasClass("one")){}； 2.样式切换：$ ("#one").toggleClass(“one”);
3.判断输入是否为空
1.username==""
2.username.toLocaleString()==0；
4.添加修改节点属性，关键词attr： $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲one").attr({sty\dots$ ("#one").removeAttr(“style”);
6.添加节点（前后顺序）
// $ul").append(li_1);//追加到最后 //(li_2).appendTo($ (“ul”));//追加到最后
// li_1.after(li_2);//1在2之前
// li_1.insertAfter(li_2);//2在1之前
// li_1.before(li_2);//2在1之前
// li_1.insertBefore(li_2);//1在2之前
// $ul").prepend(li_3);//追加到最前面 // (li_2).prependTo($ (“ul”));//追加到最前面
7.移除节点
1.//li_1.remove();//删除节点
2.//li_1.detach();//删除节点，保留事件
8.替换节点
1.// $KaTeX parse error: Expected 'EOF', got '#' at position 12: ("<a href="#̲" id="one">百度</\dots$ (“p”));//把p标签整体代换为a
2.// $(“p”).replaceWith(“百度”);//把a标签整体代换为p

3.绑定事件
1.绑定关键词bind
1.绑定单个事件：

	$("#dangdang").bind(
"mouseover",
function(){
	$("#content").slideDown(2000);
	$("#dangdang").css("cursor","pointer");
});

		2.绑定多个事件：

$("#dangdang").bind({
	mouseover:function(){
		$("#content").slideDown(2000);
		$("#dangdang").css("cursor","pointer");
	},
	mouseout:function(){
		$("#content").slideUp(2000);
	}
});

2.解绑关键词unbind：

$("#unbind").click(function(){
		$("#dangdang").unbind("mouseout");
	});

4.解除事件冒泡
1.event.stopPropagation();//排除父级影响
2.event.preventDefault();//阻止表单默认提交
3.return false;//可多用（可代替上方两个）

5.hover（鼠标移动事件）

$("#dangdang").hover(
		function(){
			$("#content").slideDown(2000);
			$("#dangdang").css("cursor","pointer");			
		},
		function(){
			$("#content").slideUp(2000);		
		}
	);

2020年7月16日