编程知识 cdmana.com

jQuery选择器及操作类名的方法

jQuery选择器
  • css2.1和css3选择器

    • 参数:必须是字符串格式的选择器
<div id="box"><p>1</p><p>2</p></div> <p>hello</p><script src="../jq/jquery-1.12.4.min.js"></script><script> //jQuery选择器 //css2.1 css3 选择器 //参数必须是字符串格式的选择器 //基础选择器 $("*") $("p") $(".box") $("#box") //高级选择器 $(".box p").html("高级选择器") $(".box p").css("width" , 100);
<input type="button" value="btn1" disabled="disabled"><br><input type="button" value="btn2"><script src="../jq/jquery-1.12.4.min.js"></script><script>//表单对象属性$("input:disabled").css("background-color","red");//选中被禁用的disabled的input标签$("input:enabled").css("background-color","skyblue");//选中没有被禁用的, enabled的$(":input").css("background-color","pink");//选中所有的input标签$(":text").css("background-color","pink");//只会改变input表单里的type=text的文本框的css样式
  • 筛选选择器

    • 也叫过滤选择器,jQuery中新增的自己的选择器

      使用方法:在基础选择器后面增加一些筛选的单词,筛选出前面选择器选中内容中的一部分,也可作为高级选择器的一部分

//筛选选择器$("p:first").css("background-color","purple");$("p:last").css("background-color", "purple");//选择任意位置$("p:eq(5)").css("background-color", "purple");//选择大于下标为5的项$("p:gt(5)").css("background-color", "purple");//选中 下标 为奇数的项,下标为1,3,5,7的项$("p:odd").css("background-color", "skyblue");//选中 下标 为奇数的项,下标为1,3,5,7的项$("p:odd").css("background-color", "skyblue");//not 除了这些项,p的样式都是("background-color", "skyblue")的$("p:not(eq(3))").css("background-color", "skyblue");$("p:not(.p1)").css("background-color", "skyblue");
常用的有:
 $(":first")      第一个 $(":last")      最后一个 $(":eq(index)")   下标为index的项 $(":gt(index)")    大于下标为index的项  $(":lt(index)")    小于下标为index的项 $(":odd")      下标为奇数的项 $(":even")     下标为偶数的项 $(":not(selector)")  去除所有与给定选择器匹配的元素
筛选方法

过滤方法,jQuery中除了用选择器选择元素,jQuery对象内还封装了一些对应的筛选方法

  • 常用:
    $("p").first()
    $("p").last()
    $("p").eq(3)
$("p").first().css("background-color", "red");$("p").eq(4).css("background-color", "skyblue");
案例 表格隔行变色

原生Js方法:

<head> <style>  table{   margin: 0 auto;   border-collapse: collapse;  }  td,tr{   width: 70px;   height: 40px;  } </style></head><body> <table border="1">  <tr>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>  </tr>  <tr>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>  </tr>  <tr>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>  </tr>  <tr>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>  </tr>  <tr>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>  </tr>  <tr>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>   <td></td>  </tr>  <tr>   <td></td>   <td></td>   <td></td>   <td>.........

版权声明
本文为[程序猿欧文]所创,转载请带上原文链接,感谢
https://my.oschina.net/mikeowen/blog/5000865

Scroll to Top