jQuery 中CSS 样式查元素⽅法⿏标事件
⼀、简单CSS 操作
1、设置css 样式
2、通过class 类名⽅式
⼆、通过筛选⽅法查中元素
三、⿏标事件
1）⿏标悬浮事件
$(‘div’).hover( function(){ ⿏标悬浮的操作 }, function(){ ⿏标离开的操作 })
注意：如果hover事件中只有1个function参数，代表⿏标悬浮和离开执⾏相同的操作
2）⿏标进⼊和离开
只会触发⼀次事件 mouseenter | mouseleave ⿏标进⼊（或离开）当前元素移动（触发⼀次事件），⿏
标再进⼊（或离开）当前元素的后代元素中移动（不再触发事件）//⽤于添加少量简短的类1、css ⽅式：    $('.box').css('color', 'red').css('backgorund-color', 'pink');2、css 对象⽅式：  $('.box').css( { color: 'red' }, {backgroundColor: 'pink'} )  //对象形式的需要⽤驼峰写法
1
2
3
4
51、添加类 addClass('类名')  //⽤于添加多个类样式2、移除类 removeClass('类名')3、切换类名 toggleClass('类名')
1
2
31、通过索引查元素  jquery 对象.eq(index)2、查⽗元素中的后代元素  jquery 对象.find('查的元
素') 3、查⽗元素中所有⼦元素  jquery 对象.children()4、查⽗元素中兄弟元素  jquery 对象.siblings()5、查下⼀个兄弟元素  jquery 对象.next()
1
2
3
4
5
6
7
8
9//⿏标悬浮或离开，都让元素进⾏切换  next()下⼀个兄弟元素 $('a').hover(function(){        $(this).next().slideToggle(1000);    })
1
2
3
4
触发多次事件 mouseover | mouseout ⿏标进⼊（或离开）当前元素移动（触发⼀次事件），⿏标再进⼊（或离开）当前元素的后代元素中移动（再次触发事件）    <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>
jquery在一个元素后追加标签5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>567891011121314151617181920212223242526272829303132333435

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。