jquery_1

1jquery选择器

jquery的基本语法：$(selector).action();

比如 $("div").css("color","red");

2jquery查找筛选器

2.1基本选择器

$("*") $("#id") $(".class") $("element") $(".class,p,div")

2.2层级选择器

$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
$("*").css("color","red");
$(".class").css("color","red");
$(".inner,p,div").css("color","red");
$(".outer+p").css("color","red"); //毗邻选择器
$(".outer~p").css("color","red");

2.3基本筛选器

在有多个<li>标签时候，需要对某些标签进行特定修饰

$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)") $("lt:gt(2)")
$("li:first").css("color","red")
$("li:eq(0)").css("color","blue")
$("li:even").css("color","pink");
$("li:gt(2)").css("color","green")
$("li:lt(2)").css("color","green")

$("li:first")同$("li:eq(0)")

even操作基数对象

gt(2)操作大于1后面对象，从索引3开始

lt(2)操作2前面的对象，即1和2

2.4属性选择器

$('[id="div1"]') $('["alex="sb"][id]')
$("[alex='sb'][id='p2']").css("color","red")

2.5表单选择器

$("[type="text"]")----->$(":text")   注意只适用于input标签  :$("input:checked")

:text等同于[type='text'](限定于input表单类型)

$("[type='text']").css("width","200px")
$(":text").css("width","400px")

2.6查找筛选器

$("div").children(".test")    $("div").find(".test")

$(".test").next()    $(".test").nextAll()    $(".test").nextUntil()

$("div").prev()    $(""div).prevAll()    $("div").prevUntil()

$(".test").parent()    $(".test").parents()    $(".test").parentUntil()

$("div").siblings()

3jquery练习之左侧菜单栏

点击任一某一个菜单，隐藏其余菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            height:1000px;
            width:1250px;
        }
        .menu{
            float:left;
            background-color:lightgrey;
            width:30%;
            height:1000px;
        }
        .content{
            float:left;
            background-color:rebeccapurple;
            width:70%;
            height:1000px;
        }
        .menu .con .one{
            margin-top:30px;
        }

        .menu .con .two{
            margin-top:30px;
        }

        .menu .con .three{
            margin-top:30px;
        }

        .title{
            background-color:aqua;
            line-height:40px;
        }

        .hide{
            display:none;
        }
    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="con">
                <div class="one">111</div>
                <div class="two">222</div>
                <div class="three">333</div>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="con hide">
                <div class="one">111</div>
                <div class="two">222</div>
                <div class="three">333</div>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="con hide">
                <div class="one">111</div>
                <div class="two">222</div>
                <div class="three">333</div>
            </div>
        </div>
    </div>
    <div class="content"></div>
</div>

<script src="jquery-3.5.0.js"></script>
<script>
    function show(self){
        $(self).next().removeClass("hide");
        $(self).parents().siblings().children(".con").addClass("hide");
    }
</script>
</body>
</html>
View Code

 

posted on 2020-04-19 19:42  yukun093  阅读(100)  评论(0)  编辑  收藏  举报

导航