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="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="#"> woshi B link</a> <span><a id="alink2" href="#"> woshi C link</a></span> </p> <p id="followMe2"> FollowMe <a id="alink00" href="#"> woshi AA link</a> <a id="alink11" href="#"> woshi BB link</a> <span><a id="alink22" href="#"> 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="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="#"> woshi B link</a>
<span><a id="alink2" href="#"> woshi C link</a></span>
</p>
<p id="followMe2"> FollowMe
<a id="alink00" href="#"> woshi AA link</a>
<a id="alink11" href="#"> woshi BB link</a>
<span><a id="alink22" href="#"> woshi CC link</a></span>
</p>
</body>
</html>
3.自定义选择
