首页 > 代码库 > JQuery总结

JQuery总结

1.通过CSS进行选择

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>A 通过CSS进行选择</title> <style> .alinked{ color: aqua; } </style> <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> /* 与window.onload的区别就是 这个可以当框架加载完毕就执行 实现在#followMe 后面追加标签 */ $(function () { $("<p>second p</p>").insertAfter("#followMe"); //选择节点 //$("p a#alink").addClass("alinked"); //选择父元素的所有满足条件的直接子节点, // $(" #followMe p>a").addClass("alinked"); //这样的顺序不对不能实现效果 //$(" p#followMe > a").addClass("alinked"); //p和id之间不能空格 //特性选择器 //匹配所有以http开头的a标签 正则的表达方法一样 $("a[href^=http]").addClass("alinked"); //a[href$=pdf] 以...结尾 //a[href*=pdf] 包含这个 //匹配所有带有特定method的表单 from[method] //input[type=text] // li:has(a) li里面包含a标签的 找到的结果是li标签 (li a) 这样的找到的是a标签 }); </script> </head> <body> <p id="followMe"> FollowMe <a id="alink" href="http://www.baidu.com"> woshi A link</a> <a id="alink1" href="http://www.mamicode.com/#"> woshi B link</a> <span><a id="alink2" href="http://www.mamicode.com/#"> woshi C link</a></span> </p> <p id="followMe2"> FollowMe <a id="alink00" href="http://www.mamicode.com/#"> woshi AA link</a> <a id="alink11" href="http://www.mamicode.com/#"> woshi BB link</a> <span><a id="alink22" href="http://www.mamicode.com/#"> woshi CC link</a></span> </p> </body> </html>

 

 

技术分享

技术分享

 

2.通过位置对元素进行选择

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过位置选择</title>
</head>
<style>
    .alinked{
        color: aqua;
    }
</style>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">
    $(function(){
        $("#followMe2 a:first").addClass("alinked");   //第一个出现的a标签
//        $("#followMe a:odd").addClass("alinked"); // 所有为奇数的段落
        $("#followMe a:even").addClass("alinked"); //所有为偶数的段落 但是是从0开始的
        //$("li:last-child")
        //$("li:first-child")
        //$("li:nth-child(n)")  第n个子节点  从1开始计数 其他的都从0开始
    });

</script>
</head>
<body>

<p id="followMe"> FollowMe
    <a id="alink" href="http://www.baidu.com"> woshi A link</a>
    <a id="alink1" href="http://www.mamicode.com/#"> woshi B link</a>
    <span><a id="alink2" href="http://www.mamicode.com/#"> woshi C link</a></span>
</p>

<p id="followMe2"> FollowMe
    <a id="alink00" href="http://www.mamicode.com/#"> woshi AA link</a>
    <a id="alink11" href="http://www.mamicode.com/#"> woshi BB link</a>
    <span><a id="alink22" href="http://www.mamicode.com/#"> woshi CC link</a></span>
</p>
</body>
</html>

3.自定义选择

 技术分享

 

JQuery总结