zoukankan      html  css  js  c++  java
  • 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的属性
  • 相关阅读:
    4-vim-工作模式-01-职责以及切换模式
    3-vim-打开和新建文件-02-删除交换文件
    poj1011Stick(dfs+剪枝)
    POJ 1251 Jungle Roads (prim)
    poj 2502 Subway
    poj 3624 Charm Bracelet (01背包)
    拦截导弹问题(动态规划)
    Policy Gradient
    深入了解马尔科夫决策过程(Markov Decision Process)
    深度学习中调参对模型容量的影响
  • 原文地址:https://www.cnblogs.com/pengsi/p/7900349.html
Copyright © 2011-2022 走看看