jQuery学习二

1.id选择器：

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

        var jquery1 = $('#name');
        alert(jquery1.val());

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的属性