47 jquery 计时器选择器筛选器左边菜单栏

主要内容:

1 jquery的使用方法 : 先导入包, 然后再使用

<scipt src="包"></scipt>
<scipt >
    console.log($('#d1').text());
</scipt>

2 .选择器 :

　　1) 基本选择器

　　id选择器

$('#id1')

$('#id1')[0]     jQuery对象根据索引值能够拿到具体的标签对象

$('#id1')[0].innerText

　　类选择器

$('.c1')

　　标签选择器

#('h2')

　　组合选择器

$('.c1, h2')

　　2 ). 层级选择器

　　　　后代选择器 : $('div .c1') 找到div里所有包含.c1样式名的标签的子子代代

　　　　儿子选择器 : $(''div .c1') 找到div下面的儿子标签

　　　　毗邻选择器 : $('div .c1') 找到与div同级标签中的具有.c1样式名的下面相邻标签

　　　　兄弟选择器 : $('div .c1') 找到与div同级标签中的具有.c1样式名的所有标签

　　3) 属性选择器

　　　　1 ) [attribute] 找到具有该属性的标签

　　　　2 ) [attribute = value] $('[type="submit"]') 找到属性等于submit的值

　　　　3 ) [attribute != value] 找到不具有该属性的标签的所有标签,html,body等

　　4 ) 基本筛选器

$('#u1>li:first')

$('#u1 li:last')        

$('#u1 li:eq(3)')    #索引是3的元素

$('#u1 li:even')     #索引是偶数的元素  odd所以是奇数的元素

$('#u1 li:not(.l1)'  #将有.l1样式名的标签移除

$('div:has(span.c2)')#找后代中有span标签中的div标签      (找的是div标签)

　　5 ) 表单选择器

　　　　:text

　　　　:password

　　　　:submit

　　　　:checkbox:

　　　　:radio

　　　　:seleced

注意: 当checked的时候: 如果有select会把select选中, 应该写成$('input:checked')

3 筛选器

　　上一个.prev(),下一个next()

$('#l1').next()

$('#l1').nextUntil('#l4')

$('#l1').nextAll()

　　父标签.parent( ) 祖先选择器.parents()

$('#l2').parent()

$('#l2').parents()

　　儿子标签.children( ) 和兄弟标签.siblings()

$('#u1').siblings()
w.fn.init(7) [div, div, div, input, input, input, select#ww, prevObject: w.fn.init(1)]0: div1: div2: div3: input4: input5: input6: select#wwlength: 7prevObject: w.fn.init [ul#u1]__proto__:

$('#u1').children()
w.fn.init(5) [li#l1, li#l2, li#l3, li#l4, li#l5, prevObject: w.fn.init(1)]

　　查找.find() 查找与指定表达式匹配的元素.

$('#d1').find('.c1')
====等价于下面的
$('#d1 .c1')

　　筛选.filter() 筛选出与指定表达式匹配的元素的集合.

$('div').filter('.c1')   从结果中过滤出有c1样式类的
====等价于下面的
$('div.c1')

4 class样式类

addClass( ) //添加指定的样式类

removeClass( ) // 移除指定的css类名

hasClass( ) //判断样式存不存在

toggleClass( ) //如果有就删除, 如果没有就添加.

5 . 计时器

!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>计时器</title>
</head>
<body>

<input type="text" id="s1">
<input type="button" value="开始" id="s2">
<input type="button" value="结束" id="s3">

<script>
    var s1ele = document.getElementById('s1');
    var t;
    function f() {
          var d1 = new Date();
     s1ele.value= d1.toLocaleString();
    }
    f();
    var s2ele = document.getElementById('s2');  //点开始
    s2ele.onclick = function () {
        if(!t){    //如果点击两次开始, 则无法结束, 由于当点击两次, 则第二次的可以删除, 第一次执行的任务的id由于被覆盖, 找不到, 则无法删除, 计时器一直计数,无法停止.   则加入条件 , 在每次清楚id时, t设置为空, 如果不为空, 则不进行开始操作.则不会开启两个任务
          t = setInterval(f, 1000)
        }

    };
    var s3ele = document.getElementById('s3');  // 点结束
    s3ele.onclick = function () {
        clearInterval(t);                         // 根据id清楚定时任务
        console.log(t);
        t = null
    }
</script>
</body>
</html>

6 左边菜单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <style>
        .menu {
             100px;
            border: 1px solid darkgrey;
        }
        .item-title {
            height: 30px;
            line-height: 30px;
            background-color: #449900;
            color: white;
            text-align: center;
            border-bottom: 1px dotted darkgrey;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div class="menu">
    <div class="item">
        <div class="item-title">菜单一</div>
        <div class="item-body hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="item">
        <div class="item-title">菜单二</div>
        <div class="item-body hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="item">
        <div class="item-title">菜单三</div>
        <div class="item-body hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<!--<script src="jquery-3.3.1.js"></script>-->
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<script>
    var $titleEles = $(".item-title");
    for (var i=0;i<$titleEles.length;i++){
        $titleEles[i].onclick=function () {
            console.log(this);
            // 把我自己的hide移除
            //$(this).next().toggleClass("hide");
            // 把其他的item-body标签 添加上hide
            //$(this).parent().siblings().find(".item-body").addClass("hide");
            $(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");
        }
    }

    // $(".item-title").click(function () {
    //     $(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");
    // })
</script>
</body>
</html>

47 jquery 计时器 选择器 筛选器 左边菜单栏

47 jquery 计时器选择器筛选器左边菜单栏