jQuery基本案例

简介: jQuery基本案例

1.点击按钮获取输入框中的值(JS对比jQuery)


2.分别使用基本选择器,改变元素的背景颜色和字体颜色(div、p、span)


3.使用层次选择器,选择某个元素下面的所有元素和子元素


4.使用过滤选择器,选择li中的元素


5.表格隔行换色


6.获取表单中的单选、多选、下拉值


7.下拉菜单

~~~html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style-type: none;
      }
      a {
        text-decoration: none;
        font-size: 14px;
      }
      .nav {
        margin: 100px;
      }
      .nav > li {
        position: relative;
        float: left;
        width: 80px;
        height: 41px;
        text-align: center;
      }
      .nav li a {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 41px;
        color: #333;
      }
      .nav > li > a:hover {
        background-color: #eee;
      }
      .nav ul {
        display: none;
        position: absolute;
        top: 41px;
        left: 0;
        width: 100%;
        border-left: 1px solid #fecc5b;
        border-right: 1px solid #fecc5b;
      }
      .nav ul li {
        border-bottom: 1px solid #fecc5b;
      }
      .nav ul li a:hover {
        background-color: #fff5da;
      }
    </style>
  </head>
  <body>
    <ul class="nav">
      <li>
        <a href="#">微博</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
    </ul>
    <script src="./jquery-3.6.0.js"></script>
    <script>
      $(function () {
        // 鼠标经过
        $(".nav>li").mouseover(function () {
          // 显示元素(this 表示当前元素)
          $(this).children("ul").show();
        });
        // 鼠标离开
        $(".nav>li").mouseout(function () {
          $(this).children("ul").hide();
        });
      });
    </script>
  </body>
</html>
~~~
#### 案例:排他思想
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                // 2. 当前的元素变化背景颜色
                $(this).css("background", "pink");
                // 3. 其余的兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body>
</html>
~~~
链式编程
~~~js
$(this).css("color", "red").siblings().css("color", "");
~~~


目录
相关文章
|
5月前
|
JavaScript 前端开发
Javascript知识【jQuery属性操作&案例:重写复选框操作】
Javascript知识【jQuery属性操作&案例:重写复选框操作】
|
5月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery样式操作&案例:jQuery隔行换色】
Javascript知识【jQuery样式操作&案例:jQuery隔行换色】
|
6月前
|
JavaScript
jQuery 五角星评分案例(详细代码)
jQuery 五角星评分案例(详细代码)
61 0
|
6月前
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
38 0
|
6月前
|
JavaScript
jQuery 选择水果小案例
jQuery 选择水果小案例
27 0
|
2月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
14 0
|
2月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
12 0
|
2月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
17 0
|
2月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
14 0
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
11 0

相关产品

  • 云迁移中心