一些日常比较常用前端小功能_前端简单功能-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45476500/article/details/108324667

本文详细介绍了使用JQuery处理鼠标移入移出事件的方法，包括mouseover、mouseout、mouseenter和mouseleave的区别。同时，讲解了如何通过JQuery进行DOM操作，如添加和移除class，获取和设置元素属性，以及元素内容的插入。此外，还提供了清除浮动和从前一页面获取参数的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery移入移出事件

//移入子元素时同样会触发
$('.gt_dh').mouseover(function() {
	$(".gt_dh_inner").addClass("bai");
});
//当鼠标从元素移入到子元素时，移出事件不会被触发
$('.gt_dh').mouseout(function() {
	$(".gt_dh_inner").removeClass("bai");
});

//移入子元素时不会触发
$('.gt_dh').mouseenter(function() {
	$(".gt_dh_inner").addClass("bai");
});
$('.gt_dh').mouseleave(function() {
	$(".gt_dh_inner").removeClass("bai");
});

当给前一个div中的元素添加float属性时，不让后面的div中的元素跟在后面

比如:

<div><p  style="float">1111111</p></div>

<div><p  style="float">22222222</p></div>

会显示在一行中：

111111122222222

解决方案：给后面的div一个属性： clear:both

<div><p  style="float: left;color: black;">1111111</p></div>

<div style="clear:both"><p  style="float: left;color: black;">22222222</p></div>

这样的话就不会跟在第一个div的后面了

1111111

22222222

获取前一个页面传过来的参数进行转换使用

function getQueryString(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = decodeURI(window.location.search).substr(1).match(reg);

if(r != null) return (r[2]);

return null;

}

//比如参数名称为：id

var id =getQueryString('id');

点击事件和显示隐藏

$(".div").click(function(){

    //隐藏           
    $("#div1").hide();
    //显示
    $("#div1").show();

    //淡入               
    $("#div1").fadeIn(毫秒) 
    //淡出  
    $("#div1").fadeOut(毫秒)

    //如果元素已经淡出，会添加淡入效果，如果元素已经淡入，会像元素添加淡出效果
    $(‘.div1’).fadeToggle(毫秒)
    //并不完全淡出，淡出的效果是设置的透明度的效果
    $("#div1").fadeTo(毫秒,透明度（0~1）);

    //滑动显示（向下滑动）            
    $("#div1").slideDown(毫秒);    
    //滑动隐藏
    $("#div1").slideUp(毫秒);
    //和fadeToggle()的效果是一样的
    $("#div1").slideToggle(毫秒);

});

jquery为元素添加/移除一个class

//添加 
$("p").addClass("cur");
//移除
$("p").removeClass("cur");

获取元素的属性值/为元素的属性赋值

//获取元素id的值
$('div').attr('id');
//让元素的id为1
$('div').attr('id'，1);

在元素中插入内容

在元素结尾插入内容：
 $("div").append(" <b>Hello world!</b>");

$("<b>Hello World!</b>").appendTo("div");

在元素开头插入内容：
 $("div").prepend(" <b>Hello world!</b>");

 $("<b>Hello World!</b>").prependTo("div");


在元素之后插入内容：
$("div").after("<b>Hello World!</b>");

在元素之前插入内容：
$("div").before("<b>Hello World!</b>");