• 第五十四天:jQuery内容的基础:


    1.上街内容的补充:

      1.1innerHTML:(获取子标签及子标签的内容·)

    var d1Ele=document.getElementById('d1');
    var d1H1=d1Ele.innerHTML;
    console.log(d1H1);
    var d1h1=d1Ele.innerHTML='';
    console.log('d1h1',d1h1);
    结果为:
    
        <div>dfhinhji</div>
        <p>fjinfjk</p>
        <h1>fjdsin</h1>
    
    01上界内容回顾.js:8 d1h1 
    View Code

      1.2输入框时间的问题:(清除有问题)

    function foo(){
        t1=new Date();
        strT1=t1.toLocaleString();
        var d1Ele=document.getElementById('i1');
        d1Ele.value=strT1;
    
    }
    var t;
    var startbutton=document.getElementById('start');
    startbutton.onclick=function(){
        if (t==undefined){
            t=setInterval(foo,3000);
            t=1;
        console.log(t);
        }
    
    }
    var stopbutton=document.getElementById('stop');
    stopbutton.onclik=function(){
        clearInterval(t);
        console.log('fhjh');
        t=undefined;
    }
    View Code

    今日新内容:jQuery

    2.基本选择器:

      2.1 id选择器:

    $('#d1');
    View Code

      2.2标签选择器:

    $('div');
    View Code

      2.3类选择器:

    userscript.html?id=3743f8e2-9258-415a-8a6b-6f0849b54fb6:12105  SpeedyPlay Info: waiting...
    $('.c1');
    View Code

      注如果想要获取具体的某一个元素可以先找到之后在通过索引进行取到:

    $('.c1')[0];
    <div id=​"d1" class=​"c1">​我是第一个div​</div>​
    View Code

    3。其他选择器:

      3.1找到所有元素属性的方法:

    $('*');
    结果为
    0: html
    1: head
    2: meta
    3: title
    4: body
    5: div#d1.c1
    6: div#d2.c1
    7: p#p1.c1
    8: h1#h1.c1
    9: script
    length: 10
    prevObject: k.fn.init [document]
    __proto__: Object(0)
    
    ​
    View Code

      3.2组合属性,(找到要不满足x和要不满足y的所有元素集合)

    $('div,p');
    结果为
    0: div#d1.c1
    1: div#d2.c1
    2: p#p1.c1
    length: 3
    View Code

    4.层级选择器:

      html程序:

    <div id="d1">
        <div id="d2">我是div里面的儿子div
            <div id="d3">我是div里面的孙子div</div>
            <p>我是div里面的孙子p</p>
        </div>
        <p>我是div里面的儿子p</p>
        <p>我是div里面的儿子p</p>
    </div>
    View Code

      4.1 x所有后代选择器

    $('#d1 div');
    结果为
    0: div#d2
    1: div#d3
    length: 2
    View Code

      4.2x后面所有的儿子选择器:

    $('#d1>p');
    结果为
    0: p
    1: p
    length: 2
    View Code

      4.3找到紧跟在x后面的y:

    $('#d4+p');
    结果为
    0: p
    length: 1
    View Code

      4.4x之后的所有兄弟·:

    $('#d5~p');
    结果为
    0: p#d4
    1: p
    length: 2
    View Code

    5.js和jQuery的特点去边和转换问题:

      5.1js中找到 id=d1的标签:

    document.getElementById('d1');
    <div id=​"d1">​…​</div>​
    View Code

      5.2通过jquery找到id=d1的标签:(jQuery在进行变量命名时要在前面加上$);

    $('#d1');
    结果为
    0: div#d1
    length: 1
    View Code

      5.3jQuery对象转换成Dom对象,用索引取出具体的标签:

    $('#d4')[0];
    结果为
    View Code

      5.4dom对象转换成jQuery对象,使用$(dom对象)

    var d4Ele=document.getElementById('d4');
    undefined
    $(d4Ele);
    结果为
    0: p#d4
    length: 1
    View Code

    6.筛选器:

    <div id="d1">
        <ul>
            <li>0</li>
            <li>0</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    View Code

      6.1选择同一级别标签中的第一个元素:

    $('#d1 li:first');
    View Code

      6.2选择同一级标签中的最后一个标签:

    $('#d1 li:last');
    View Code

      6.3先要找同一级标签中任意一个标签可以使用下面命令:

    $('#d1 li:eq(3)');
    View Code

      6.4也可以找同一级标签中大于某个数以上的标签:

    $('#d1 li:gt(3)');
    View Code

      6.5也可以找同一级标签中小于某个数以下的标签:

    $('#d1 li:lt(3)');
    View Code

      6.7属于同一个类型标签,但是不想要其中某一个元素的标签(这一个标签有一个独立的特征):(not就是移除不满足条件的)

    $('#d1 li:not(.c1)');
    结果为
    0: li
    1: li
    2: li
    3: li
    length: 4
    View Code

      6.8:属于同一个类型标签,但是想要其中某一个元素的标签(这一个标签有一个独立的特征):(has就是找出满足条件的标签)

    $('#d3 div:has(a)');
    View Code

    7.属性选择器在表单中的应用:

    $('input[name=hobby]');
    View Code

    8.常用的表单删选元素:

    1.:text; 2:password; 3: file; 4:radio; 5:checkbox; 6:sumbit; 7:reset; 8:button;  

      8.1使用方法:$([  ] )  列子如下:

    $('input[type=checkbox]');
    结果为
    0: input
    1: input
    2: input
    length: 3
    View Code

    9.jQuery的一些基本操作:

      9.1找同一级标签中的前面第一个标签:

    $('#d3').prev();
    结果为
    0: li#d2
    length: 1
    View Code

      9.2找同级标签中前面所有的标签:

    $('#d3').prevAll();
    结果为
    0: li#d2
    1: li#d1
    length: 2
    View Code

       9.3找同一级标签中的后面第一个标签:

    $('#d3').next();
    结果为
    0: li#d4
    length: 1
    View Code

      9.4找同级标签中前面所有的标签:

    $('#d2').nextAll();
    结果为
    0: li#d3
    1: li#d4
    length: 2
    View Code

      9.5找父类标签:

    $('#d4').parent();
    View Code

      9.6连着找父类:

    $('#d4').parent().parent();
    结果为
    0: div#d2
    length: 1
    prevObject: k.fn
    View Code

    10python中的类也可用链式操作:

    class Myteacher:
        def __init__(self,name):
            self.name=name
        def show(self):
            print(self.name)
            return self
        def text(self):
            print('haha')
    teacher=Myteacher('alex')
    teacher.show().text()
    View Code

    11.查找所有的父类:

    $('#d4').parents();
    结果为
    0: div#d3
    1: div#d2
    2: div#d1
    3: body
    4: html
    length: 5
    prevObject:
    View Code

    12查找所有的父类直到:

    $('#d4').parentsUntil('#d1');
    结果为
    0: div#d3
    1: div#d2
    length: 2
    prevObject: k.
    View Code

    13.查找自己的儿子;也可以用链式:

    $('#d1').children();
    View Code

    14.找自己所有的兄弟:(除了自己):

    $('#d1').siblings();
    结果为
    0: p
    1: p
    2: script
    length: 3
    View Code

      

      

  • 相关阅读:
    CI框架(Codeigniter)总结
    ssh自动下载SFTP文件
    数据库设计原则
    Java代码性能优化的 39个细节
    quartz定时任务时间设置
    Myeclipse 反编译工具插件
    Maven -- 使用Myeclipse创建Maven项目
    详解Java Web项目启动执行顺序
    java web项目下的lib和build path 中jar包问题解惑
    java读取存在src目录下和存在同级目录下的配置文件
  • 原文地址:https://www.cnblogs.com/ab461087603/p/12611890.html
Copyright © 2020-2023  润新知