jQuery中CSS样式查找元素方法鼠标事件_jquery 根据css获取所有元素-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40576178/article/details/110091556

一、简单CSS操作

1、设置css样式

//用于添加少量简短的类
1、css方式：
    	$('.box').css('color', 'red').css('backgorund-color', 'pink');
2、css对象方式：
		$('.box').css( { color: 'red' }, {backgroundColor: 'pink'} )  //对象形式的需要用驼峰写法

2、通过class类名方式

1、添加类	addClass('类名')		//用于添加多个类样式
2、移除类	removeClass('类名')
3、切换类名	toggleClass('类名')

二、通过筛选方法查找jquery中元素

1、通过索引查找元素			jquery对象.eq(index)

2、查找父元素中的后代元素		jquery对象.find('查找的元素')	

3、查找父元素中所有子元素		jquery对象.children()

4、查找父元素中兄弟元素		jquery对象.siblings()

5、查找下一个兄弟元素			jquery对象.next()

三、鼠标事件

1）鼠标悬浮事件

$(‘div’).hover( function(){ 鼠标悬浮的操作 }, function(){ 鼠标离开的操作 })

注意：如果hover事件中只有1个function参数，代表鼠标悬浮和离开执行相同的操作

//鼠标悬浮或离开，都让元素进行切换		next()下一个兄弟元素
 $('a').hover(function(){
        $(this).next().slideToggle(1000);
    })

2）鼠标进入和离开

只会触发一次事件
mouseenter | mouseleave 鼠标进入（或离开）当前元素移动（触发一次事件），鼠标再进入（或离开）当前元素的后代元素中移动（不再触发事件）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: brown;
        }
        h2 {
            width: 100px;
            height: 50px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div>
        <h2>hello</h2>
    </div>

    <script src="./jquery-3.3.1.js"></script>
    <script>
         $('div').mouseenter(function () {
            console.log('触发了');  //元素上移动仅触发1次事件
        }); 
    </script>

</body>
</html>

触发多次事件
mouseover | mouseout 鼠标进入（或离开）当前元素移动（触发一次事件），鼠标再进入（或离开）当前元素的后代元素中移动（再次触发事件）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: brown;
        }
        h2 {
            width: 100px;
            height: 50px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div>
        <h2>hello</h2>
    </div>

    <script src="./jquery-3.3.1.js"></script>
    <script>
         $('div').mouseover(function () {
            console.log('触发了');  //元素上移动触发多次事件
        }); 
    </script>

</body>
</html>