掌握jQuery开发环境搭建基础语法选择器添加CSS样式_用jquery制作一个选择器,使用css样式-优快云博客

本文介绍jQuery的基础用法，包括页面加载事件、元素操作、选择器及事件绑定等。通过实例演示了不同选择器的应用场景，如标签选择器、类选择器、ID选择器等，并展示了如何利用jQuery简化DOM操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入jquery库 -->
    <script src="../js/jquery.js"></script>
</head>
<body>
     <h2>我是h2</h2>

    <h1>第一个</h1>
    <h3 id="tree" class="name">
        <h3>第二个</h3>
        <h4>第一个子类</h4>
        <h4>第二个子类</h4>
        <h4>第三个子类</h4>
    </h3>
    <h1>第三个</h1>
    <h4>第四个</h4>

    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li class="h">第三个</li>
        <li id="a">第四个</li>
        <li class="asas">第五个</li>
    </ul>

    <script>
        //jQuery如何表示加载事件?
        //ready()方法用于在当前页面加载完成后执行
        $(document).ready(function (){
            //加载事件触发的内容
            alert('Hello,jQuery!');
        });
        //jQuery如何操作元素 以及让元素做什么事
        //jQuery基础选择器
        $("h3").html("这是标签选择器");
        $(".name").html("这是类选择器");
        $("#tree").html("这是id选择器");
        $("h1,#tree").html("这是并集选择器");

      //jQuery层次选择器
      $("h3>h4").html("子类选择器");
      $("h3 h4").html("后代选择器");
      $("h3~h1").html("层次选择器");
      $("h3+h1").html("相邻元素选择器");
      $(function (){
          //jquery语法不仅能调用方法
          $('h3').hide(); //隐藏选中的标签元素
          //还能添加事件
          $('h4').mouseover(function (){ //鼠标移入事件
              $('h3').show(); //显示选中的标签元素
          });
      });

      $(function (){
          //jquery基础过滤选择器 html方法
          $('li:not(#a)').html('not里面可以放标签或选择器，选取除了给定外的所有元素');
          $('li:even').html('下标为偶数');
          $('li:odd').html('下标为奇数');
          $('li:first').html('第一个元素');
          $('li:last').html('最后一个元素');

          ////jquery基础过滤选择器 css样式写法
          $('li:even').css("background-color","red");
          $('li:odd').css("background-color","green");
          $('li:lt(3)').css("color","white");

          //jQuery属性选择器
          $('li[class!="asas"]').css("color","black");
          $('li[class^="a"]').css("color","red");
          $('li[class="asas"]').css("color","green");
          $('li[class]').css("color","white");

      });
        
//解决美元符号"$"冲突的问题如下 （在其他库之前导入jQuery库,美元符号"$"可以直接使用jQuery“）
      //方式一：使用jQuery.noConflict()函数将美元符号"$"的控制权移交给其它JavaSript库。
      //方式二：接收jQuery.noConflict()函数返回的jQuery引用，自定义一个新的快捷键符号。
      /*  var $j = jQuery.noConflict(); //自定义一个新的”$j“符号
        $j(function (){
            console.log("在控制台输出!");
        }) */

    </script>

</body>
</html>