JQ学习总结之选择器

一、window.onload 和 $(document).ready()区别

1)window.onload   执行时机：必须等待网页中所有的内容加载完毕后（包括图片）才能执行。

编写个数：不能同时编写多个，window.onload=function(){alert("test1")};

window.onload=function(){alert("test2")};

结果只会输出“test2”；

2)$(document).ready(function(){})可以简写成$(fucntion(){

})

执行时机：网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完。

编写个数：能同时编写多个，$(function(){alert("test1");})

$(function(){alert("test1");})

结果两次都输出

二、选择器

1、id选择器 $("#cc")  类选择器$(".xx" )

2、特殊选择器: 偶数行  $("tr:odd")  奇数行$("tr:even")

     table {
        border-collapse:collapse;
        }
      tr,td,th {
        border:1px solid green;
        }
   <table>
         <tr><th>班级</th><th>姓名</th></tr>
         <tr><td>一班</td><td>张三</td></tr>
         <tr><td>二班</td><td>李四</td></tr>
         <tr><td>三班</td><td>王五</td></tr>
     </table>

<script>
                   $(function () {
                             //$("tr:odd").css("background", "pink");                 //行内样式
                               $("tr:even").css({                                              //行内样式多个
                                        "background": "green",
                                         "color":"red"
                                       });
                               $("tr:first").css("background", "yellow");

$("tr:last").addClass("bg");

})

</script> 

$("td:nth-child(1)") //所有表格行的第一个单元格，就是第一列。
$("li>a") //返回<li>标记的所有子元素<a>，不包括孙。
$("a[href$=pdf]") //选择所有超链接，并且这些超链接的href属性是一pdf结尾。
$.trim() //函数用于去除字符串两端的空白字符

3、使用选择器

3.1属性选择器

$("a[title]").addClass("myClass");                            //给a标签的title属性增加myClass样式

$("a[href = 'xx.html']").addClass("myClass");

$("a[href^=http://]").addClass("myClass");              //所有以http://开头的a标签

$("a[href$=html]").addClass("myClass");                //所有以html结尾的a标签

$("a[href*=iascc]").addClass("myClass");                //所有href中含有iascc的a标签

3.2包含选择器

$("li:has(a)")                                                           //包含超链接的所有li

3.3位置选择器

$("p:first")                                                               //整个页面里面的第一个p标签

$("p:last")                                                               //整个页面里面的最后一个p标签

$("p:first-child")                                                      //选择所有的p标签，且这些p标签是父元素的第一个。

$("p:last-child")                                                      //选择所有的P标记，且这些p标签是父元素的最后一个。

$("p:nth-child(1)").class("color",'red')

$("p:nth-child(odd)").addClass("myClass")            //选择所有的p标签，且这些p标签是父标记的奇数行。

$("p:odd").addClass("myClass")                            //整个页面的偶数行P标记

$("p:eq(4)").addClass("myClass")                          //第五个标记   eq（索引）

$("p:gt(2)").addClass("myClass")                           //从第n个(不包括n本身)之后的所有p

$("p:lt(2)").addClass("myClass")                           //从第n个(不包括n本身)之前的所有p

3.4过滤选择器

$("li").filter($("li[class]")).css("color","red")               //过滤出

$("input[name="a"]").addClass("myClass")

$(":button")                                                              //所有按钮

$(":checkbox")                                                         //所有复选框   等同于$("input[type='checkbox']")

$("div:contains(foo)")                                               //所有包含了文本“foo”元素

$(":disable")                                                             //所有被禁用的元素  等同于  $("input[disabled=disabled]").attr("value","aaa")

$(":enable")                                                              //所有没有被禁用的元素

$(":file")                                                                    //所有上传文件

$(':input')                                                                  //所有表单元素

$(":selected")                                                            //所有下拉菜单中被选中的项

$(":visible")                                                                //所有可见的元素

$(":submit")                                                               //所有提交按钮

3.5反向过滤

$("input:not(:radio)")                                                  //表示input中所有非raido元素

$("input:not(filter)")                                                     //必须是过滤选择器，而不是其他选择器

4、管理选择

4.1   提取元素

$("img[title]")[1]     等同于$("img[title]").eq(1)           //获取所有设置了title属性的img标记中的第二个元素