b站 4天从零玩转jQuery【黑马程序员】部分案例代码_突出显示

最新推荐文章于 2022-02-15 03:39:12 发布

加强亚索

最新推荐文章于 2022-02-15 03:39:12 发布

阅读量630

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/qq_45801837/article/details/106337685

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 620px;
            height:415px;
            background: #ffe889;
            margin: 100px auto;
            border:2px solid white;
        }
        li{
            list-style: none;
            float: left;
            margin-left: 5px;
            margin-top: 5px;
        }
        #div1 img{
            display: block;
            border:0;
            width: 200px;
            height: 200px;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#div1").find("li").mouseenter(function () {
                $(this).css("opacity",1).siblings("li").css("opacity",0.4);
                $("body").css("background","black");
                $("#div1").css("background","black")
            });
            $("#div1").mouseleave(function () {
                $("#div1").find("li").css("opacity",1);
            })
        })
    </script>
</head>
<body>
<div id="div1">
    <ul>
        <li><a href="#"><img src="../../image/网页背景图%20(1).jpeg"></a></li>
        <li><a href="#"><img src="../../image/网页背景图%20(1).jpeg"></a></li>
        <li><a href="#"><img src="../../image/网页背景图%20(1).jpeg"></a></li>
        <li><a href="#"><img src="../../image/网页背景图%20(1).jpeg"></a></li>
        <li><a href="#"><img src="../../image/网页背景图%20(1).jpeg"></a></li>
        <li><a href="#"><img src="../../image/网页背景图%20(1).jpeg"></a></li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述
笔记，有一些选择方法

jQuery其他选择器
$("*") 	                    选取所有元素
$(this) 	                选取当前 HTML 元素
$("p.intro") 	            选取 class 为 intro 的 <p> 元素
$("p:first") 	            选取第一个 <p> 元素
$("ul li:first") 	        选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 	    选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 	            选取带有 href 属性的元素
$("a[target='_blank']") 	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 	            选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 	            选取偶数位置的 <tr> 元素
$("tr:odd") 	            选取奇数位置的 <tr> 元素
$("#father>div")            获取id为father的所有子div


选择器，方法
$("ul").children("li")                相当于 $("ul-li"),子类选择器
$("ul").find("li")                    相当于$("ul li"),后代选择器
$("#first").siblings("li")            查找兄弟节点，不包括自己本身
$("#first").parent()                  查找父亲
$("li").eq(2)                         相当于$("li:eq(2)"),index从0开始
$("li").next()                        找下一个兄弟
$("li").prev()                        找上一个兄弟


层级选择器
$("ul>li")          选取儿子，不选孙子
$("ul li")          ul下所有li元素，包括孙子


过滤选择器
$("li:eq(2)").css("color","red)          li索引号为2的元素，从零开始
$("li:odd").css("color","red")           li索引号为奇数的元素
$("li:even").css("color","green")           li索引号为偶数的元素

我好想关于写博客没啥构思，有啥就写啥了，不知道你们能不能看懂。

加强亚索

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
b站 4天从零玩转jQuery【黑马程序员】部分案例代码_突出显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #div1{ width: 620px;
复制链接

扫一扫