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>

$("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标记中的第二个元素

巴特西

JQ学习总结之选择器

最新文章

热门文章