简单选择器的使用

最新推荐文章于 2023-03-16 20:36:22 发布

codetofuture

最新推荐文章于 2023-03-16 20:36:22 发布

阅读量256

点赞数

分类专栏： jquery 文章标签： jquery css dom

本文链接：https://blog.csdn.net/codetofuture/article/details/50167661

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习要素
1.简单选择器
2.进阶选择器
3.高级选择器

一、简单选择器

元素名： css模式 div{} || jQuery模式$(‘div’) ||描述：获取所有div元素的DOM对象
eg:这是test文件，通过元素名来更改dom的颜色

<!DOCTYPE html>
<html>
<head>
    <title>常规选择器</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="base.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div>
       <p>codetofuture</p>
       <p>codetofuture</p>
       <p>codetofuture</p>
   </div>
</body>
</html>

相对应的base.js

/**
此函数是匿名函数，等待页面dom加载完毕后，再加载内部函数；专业的讲就是延迟等待加载
相当于
  $(document).ready(function(){
    //body
  });
**/
$(function(){
   $("p").css("color","red");
});

ID： css模式 #{} || jQuery模式$(‘#‘) ||描述：获取一个ID为*元素的DOM对象
eg:这是test文件，ID元素名来更改dom的颜色

<!DOCTYPE html>
<html>
<head>
    <title>常规选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"  />
    <script type="text/javascript" src="jquery-1.8.2.js"></script>
    <script type="text/javascript" src="base.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div>
       <p id="ctf">codetofuture</p>
       <p>codetofuture</p>
       <p>codetofuture</p>
   </div>
</body>
</html>

相对应的base.js

/**
此函数是匿名函数，等待页面dom加载完毕后，再加载内部函数；专业的讲就是延迟等待加载
相当于
  $(document).ready(function(){
    //body
  });
**/
$(function(){
   $("#ctf").css("color","red");
});

类(class):css模式 .{} || jQuery模式$(‘.‘) ||描述：获取所有class为box的所有DOM对象

eg:这是test文件，ID元素名来更改dom的颜色

<!DOCTYPE html>
<html>
<head>
    <title>常规选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"  />
    <script type="text/javascript" src="jquery-1.8.2.js"></script>
    <script type="text/javascript" src="base.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div>
       <p id="ctf">codetofuture</p>
       <p>codetofuture</p>
       <p class="ctf">codetofuture</p>
   </div>
</body>
</html>

相对应的base.js

/**
此函数是匿名函数，等待页面dom加载完毕后，再加载内部函数；专业的讲就是延迟等待加载
相当于
  $(document).ready(function(){
    //body
  });
**/
$(function(){
   //$("p").css("color","red");
   $("#ctf").css("color","red");
   $(".ctf").css("color","blue");
});