• jQuery学习二


    1.id选择器:

    // 4.如果页面中多个元素id相同,jquery只会获取第一个id的jquery对象
            var jquery = $('#name');
            alert(jquery.val());
    
            var jquery1 = $('#name');
            alert(jquery1.val());

    <body>
    <input type="text" name="name" id="name" value="张三">
    <input type="text" name="name" id="name" value="李四">
    </body>

    2.class选择器:

     // 5.获取出来的jquery是一个数组,如果页面中多个元素class相同,jquery只会获取第一个id的jquery对象
    
            var jquery3 = $('.name');
            alert(jquery3.val());  // 张三
            // 想获取非第一个元素的对象,需要根据索引获取到指定位置的DOM对象后,再转化成jquery对象进行使用
            alert($($('.name')[1]).val())
    
    <input type="text" name="name" name ="name" value="张三">
    <input type="text" name="name" name ="name" value="李四">

    3.parent—child选择器:

    // 6.获取div标签下所有class为name的元素
            alert($('div' > .name).length);  // 长度为2
    
    <div>
           <input type="text" name="name" name ="name" value="张三">
           <input type="text" name="name" name ="name" value="李四">
     </div>

    4.prev + next选择器:

    匹配所有紧邻在prev元素后的next元素。

     // 7.获取紧邻元素为div的之后的class元素
            alert($('div + .name').length);  // 只有一个元素,就是value为sssss的
    
       <div>
           <input type="text" name="name" name ="name" value="张三">
           <input type="text" name="name" name ="name" value="李四">
       </div>
           <input type="text" name="name" name ="name" value="sssss">
           <input type="text" name="name" name ="name" value="ttttt">

    5.prev ~ siblings选择器:

    获取div标签后的所有元素。

     // 8.获取div标签后的所有元素,长度为2,值为sssss和ttttt
            alert($('div ~ .name').length);
       <div>
           <input type="text" name="name" name ="name" value="张三">
           <input type="text" name="name" name ="name" value="李四">
       </div>
           <input type="text" name="name" name ="name" value="sssss">
           <input type="text" name="name" name ="name" value="ttttt">
    // 8.获取div标签后的所有元素,长度为2,值为sssss和ttttt
            alert($('div ~ .name').length);
    
       <div>
           <input type="text" name="name" name ="name" value="张三">
           <input type="text" name="name" name ="name" value="李四">
       </div>
       <div>
            <input type="text" name="name" name ="name" value="sssss">
       </div>
            <input type="text" name="name" name ="name" value="sssss">
            <input type="text" name="name" name ="name" value="ttttt">

    6.简单过滤选择器:匹配符合条件的元素

    7.属性选择器:【attribute】匹配包含给定属性的元素

     // 9.获取所有元素都有value属性的所有元素
            alert($('[value]').length);
            alert($('.name[value]').length); // 所有class为name的带有value的属性
  • 相关阅读:
    Linux 部署 nginx
    Linux 部署vue项目(使用nginx)
    git 操作规范
    mysql grant权限分配(转)。
    前端优化,包括css,jss,img,cookie
    关于js里的那一堆事件
    个人作业——软件工程实践总结作业
    Unity3D 快捷键
    Beta冲刺第二天
    Beta冲刺第一天
  • 原文地址:https://www.cnblogs.com/pengsi/p/7900349.html
Copyright © 2020-2023  润新知