jQuery多选元素

https://zhidao.baidu.com/question/1765674439097210820.html

• jQuery支持多选，所以一次获取多个元素进行操作取决于你所写的选择器包含了哪些元素——如果只有一个元素，那就对一个元素进行操作；如果包含了多个元素，那就是都多个元素进行操作。下面给出实例演示：

  1. 创建Html元素：主体是一个li列表

• <div class= "box" >      <span>不同的选择器决定了不同的作用对象：</span>      <div class= "content" >          <ul>            <li>Glen</li>            <li>Tane</li>            <li>John</li>            <li>Ralph</li>          </ul>      </div>      <input type= "button"  value= "设置样式" > </div>

• 设置css样式：大致修饰一下

• 2. div.box{ width : 300px ; padding : 20px ; margin : 20px ; border : 4px  dashed  #ccc ;} div.box>span{ color : #999 ; font-style : italic ;} div.content{ width : 250px ; margin : 10px  0 ; padding : 20px ; border : 2px  solid  #ff6666 ;} li{ margin : 5px ; list-style :  none ;} . red { color : red ;}

  3. 根据不同的jquery代码观察不同的效果

  • $("li")包含了4个元素，所以一次操作了4个对象

• $( "li" ).addClass( 'red' );

  

• $("li").eq(1)将选择范围缩小到第二个li元素，即只有一个作用对象

• $( "li" ).eq(1).addClass( 'red' );

  

• $("li:gt(1)") 表示index大于1的li，也就是后两个li。同理可以用lt(N)表示index小于N

• $( "li:gt(1)" ).addClass( 'red' );