当前位置:首页>>Jquery选择器

Jquery选择器

  • jquery
  • 2022-07-16 08:35:28
1. Jquery选择器

可以通过Jquery选择器能从网页文档中找到我们需要的DOM节点


1.1) 基本选择器

1.2) 属性选择器

1.3) 其他选择器

Chap02/demo01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // 基本选择器
        // $("#a1").css("background-color","red");  // 根据id
        // $(".c1").css("background-color","red");  // 根据class类别
        // $("a").css("background-color","red");  // 根据标签元素
        // 属性选择器
        // $("[href]").css("background-color","red");
        // $("[href='#']").css("background-color","red");
        // $("[href$='com']").css("background-color","red");
        // 其他选择器
        // $("p.c1").css("background-color","red");
        // $("ul li:first").css("background-color","red");
        $("ul li:last").css("background-color","red");
    });
</script>
<style type="text/css">
    .c1 {font-size: 40px;}
</style>
</head>
<body>
<p class="c1">Jquery选择器</p>
<ul>
    <li id="i1"><a id="a1" class="c1" href="http://www.baidu.com" >baidu</a></li>
    <li><a id="a2" class="c1" href="http://www.csdn.net">CSDN</a></li>
    <li><a href="http://www.iteye.com">iteye</a></li>
    <li><a href="http://www.cnblogs.com">博客园</a></li>
    <li><a class="c1" href="#">百度</a></li>
    <li><a href="http://www.google.com">谷歌</a></li>
</ul>
</body>
</html>

猜你喜欢