jQuery编程（jQuery概述、基本使用、常用API(jQuery选择器、样式操作、效果、属性操作、内容文本值、元素操作、尺寸位置操作)）

于 2023-08-04 14:35:17 发布
阅读量409 收藏 1
点赞数
分类专栏： JavaScript 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73809176/article/details/131646628
版权

1.概述

1.1 JavaScript库

JavaScript库：即一个js文件，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预定好的函数在里面，比如动画animate、hide、show，比如获取元素等。

常见的JavaScript库:

  • jQuery
  • Prototype
  • YUI
  • Dojo
  • Ext JS
  • 移动端的zepto

1.2  jQuery 的概念

jQuery是一个快速、简洁的JavaScript库，j——JavaScript，Query——查询

学习jQuery本质——学习调用函数和方法

2. jQuery的基本使用

2.1 jQuery的下载

官网网址：https://jquery.com/

2.2  jQuery的使用步骤

  1. 引入jQuery文件，如  <script src="jquery.min.js"></script>
  2. 使用即可（使用入口函数）

2.3 jQuery 的入口函数！！！

        $（function () {

            ...     // 此处是页面DOM加载完成的入口

        });

        $(document).ready(function() {

            ...     // 此处是页面DOM加载完成的入口

        });

注：两种写法都是页面DOM加载完毕后再去执行js代码

1.等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。

2.相当于原生js中的DOMContentLoaded。

        // $('div').hide();

        $(function() {
            $('div').hide();
        });
        
        // $(document).ready(function() {
        //     $('div').hide();
        // });

2.4 jQuery 的顶级对象 $

1. $ 是jQuery的别称（另外的名字），在代码中可以使用jQuery代替 $ ，但一般为了方便，通常都直接使用 $

2. $ 是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法

        // 1. $ 是jQuery的别称（另外的名字） 
        // $(function() {
        //     alert(11);
        // });
        jQuery(function() {      // 还可以这样写
            // alert(11);
            // $('div').hide();
            jQuery('div').hide();  // 还可以这样写
        });
        // 2.  $ 同样是jQuery的 顶级对象

2.5 jQuery对象和DOM对象

  1. 使用原生js获取过来的对象就是DOM对象
  2. 用jQuery 方式获取过来的对象是jQuery 对象。
  3. jQuery 对象本质：通过$把DOM元素进行了包装后产生的对象（ jQuery 对象以伪数组形式存储）
  4. jQuery 对象只能使用jQuery 方法，DOM对象则使用原生的JavaScript属性和方法
        // 1. DOM 对象：用原生js获取过来的对象就是DOM对象
            var myDiv = document.querySelector('div');     // myDiv 是DOM对象
            console.dir(myDiv);
        // 2.jQuery 对象：用jQuery 方式获取过来的对象是jQuery 对象。 本质：通过$把DOM元素进行了包装
            $('div');    // $('div'); 是一个jQuery对象
            console.dir($('div'));
        // 3.jQuery 对象只能使用jQuery 方法，DOM对象则使用原生的JavaScript属性和方法
            myDiv.style.display = 'none';
            // $('div').style.display = 'none';     // 报错。$('div')是一个jQuery对象，不能使用原生js的属性和方法
            // myDiv.hide();         // 报错。 myDiv是一个DOM对象，不能使用jQuery里面的hide方法

注： console.dir(myDiv); 和 console.dir($('div')); 打印出来的结果不同，结果如下：

  • 5. jQuery对象和DOM对象之间是可以相互转换的

因为原生js比jQuery更大，原生js的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

1）DOM对象转换为jQuery对象：$(DOM对象)

$('div');

2）jQuery对象转换为DOM对象（两种方式）

$('div') [index];         index 是索引号

$('div').get(index);             index 是索引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <video src="mov.mp4" muted></video>
    <!-- muted可以让浏览器中，下面代码play()方法实现自动播放 -->
    <script>
        // 1.DOM对象转换为jQuery对象
        // （1）我们直接获取视频，得到的是jQuery对象
        $('video');
        // (2) 我们已经使用原生js 获取过来的DOM对象
        var myvideo = document.querySelector('video');
        $(myvideo);
        // $(myvideo).play();          // 报错 jQuery里面没有play这个方法
        // 2. jQuery对象转换为DOM对象
        // myvideo.play();
        $('video')[0].play();
        $('video').get(0).play();
    </script>
</body>
</html>

3. jQuery 常用API（和webAPI相似）

（3.4.1素材）

3.1  jQuery 选择器（和webAPI中获取元素相似）

3.1.1  jQuery 基础选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

$("选择器")     // 里面选择器直接写 CSS 选择器即可，但是要加引号（单双均可）

3.1.2 jQuery 层级选择器

 jQuery 设置样式

$('div').css('属性', '值')

 3.1.3 隐式迭代（重要）

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

<!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>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1.获取4个div元素
        $("div")            // 这个对象是 jQuery 对象
        console.log($("div"));          // w.fn.init(4)
        // 2.给4个div设置背景颜色为粉色  jQuery对象不能使用style
        $("div").css("background", "pink");
        $("ul li").css("color", "red");
    </script>
</body>

</html>

3.1.4 jQuery 筛选选择器

        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
        })

 3.1.5 jQuery 筛选方法（重点）

 重点记住： parent() children() find() siblings() eq()

        // 注意一下都是方法 带括号
        $(function() {
            // 1.父 parent()  返回的是最近一级的父级元素
            console.log($('.son').parent());
            // 2. 子
            // (1) 亲儿子  children()  子代选择器  ul>li
            $('.nav').children('p').css("color", "red");
            // (2) 可以选里面所有的孩子 包括儿子和孙子 find()
            $('.nav').find('p').css("color", "blue");
        })

        // 注意一下都是方法  带括号
        $(function() {
            // 1.兄弟元素siblings  除了自身元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            // 2.第n个元素
            var index = 2;
            // (1) 我们可以利用选择器的方式选择
            // $("ul li:eq(2)").css("color", "blue");
            // $("ul li:eq("+index+")").css("color", "blue");
            // (2) 我们可以利用选择方法的方式选择
            $("ul li").eq(2).css("color", "blue");
            // $("ul li").eq(index).css("color", "skyblue");
            // (3) 判断是否有某个类名
            console.log($("div:first").hasClass("current"));       // true
        })
案例：新浪下拉菜单
<!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>
    <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>
    <script src="jquery.min.js"></script>
</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>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠标经过
            $(".nav > li").mouseover(function() {
                // $(this)  jQuery当前元素 this不要加引号
                // show()  显示元素
                $(this).children("ul").show();
            });
            // 鼠标离开
            // hide()  隐藏元素
            $(".nav li").mouseout(function() {
                $(this).children("ul").hide();
            });
        })
    </script>
</body>

</html>

3.1.6 jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

<!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>

案例：淘宝服饰精品案例

（3.4.1素材-12-精品展示案例）

案例分析：

① 核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
② 需要得到当前小li 的索引号，就可以显示对应索引号的图片
③ jQuery 得到当前元素索引号 $(this).index()
④ 中间对应的图片，可以通过 eq(index) 方法去选择
⑤ 显示元素 show() 隐藏元素 hide()

        $(function() {
            // 1.鼠标经过左侧的小li
            $("#left li").mouseover(function() {
                // 2.得到当前小li的索引号
                var index = $(this).index();
                // console.log(index);
                // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
                $("#content div").eq(index).show();
                // 4. 让其余的图片（就是其他的兄弟）隐藏起来
                $("#content div").eq(index).siblings().hide();
            });
        })

3.1.7 链式编程（让代码更加简洁、优雅）

链式编程是为了节省代码量，看起来更优雅。

即原来的代码：

        $(function() {

            // 1. 隐式迭代 给所有按钮都绑定了点击事件

            $("button").click(function() {

                // 2.让当前颜色变为红色

                $(this).css("color", "red");

                // 3. 让其余的姐妹元素不变色

                $(this).siblings().css("color", "");

            })

        })

变为：

$(function() {

        $("button").click(function() {

                $(this).css("color", "red").sibling().css("color", ''")

         })

});

3.2 jQuery 样式操作

3.2.1 操作 css 方法 修改样式

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

1. 参数只写属性名，则是返回属性值

$(this).css(''color'');

2. 参数是属性名，属性值，逗号分隔，是设置（或修改样式）一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(''color'', ''red'');

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性名、属性值为数字 --> 可以不用加引号（即如果不是数字则必须加引号）   如果是复合属性（backgroundColor）则必须采用驼峰命名法

$(this).css({

        "color": "white",        // 或者 backgroundColor: "yellow",    

        "font-size": "20px",      // width: 400,

});

3.2.2 设置类样式方法

作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。

1. 添加类

$(“div”).addClass(''current'');

2. 移除类

$(“div”).removeClass(''current'');

3. 切换类

$(“div”).toggleClass(''current'');

<!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>
    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }
        
        .current {
            background-color: red;
            transform: rotate(360deg);
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="current"></div>
    <script>
        $(function() {
            // 1.添加类 addClass()
            $("div").click(function() {
                // $(this).addClass("current");
            })
            // 2.删除类   removeClass()
            $("div").click(function() {
                // $(this).removeClass("current");
            })
            // 3.切换类     toggleClass()  可以同时做到添加类、删除类
            $("div").click(function () {
                $(this).toggleClass("current");
            })
        })
    </script>
</body>

</html>

案例：tab 栏切换

① 点击上部的li，当前li 添加current类，其余兄弟移除类。
② 点击的同时，得到当前li 的索引号
③ 让下部里面相应索引号的item显示，其余的item隐藏

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        $(function () {
            // 1.点击上部的li，当前的li添加current类，其余兄弟移除类
            $(".tab_list li").click(function () {
                // 链式编程操作
                $(this).addClass("current").siblings().removeClass("current");
                // 2.点击的同时，得到当前li的索引号
                var index = $(this).index();
                // 3.让下部里面相应索引号的item显示，其余的item隐藏
                // $(".tab_con .item").eq(index).css("display", "block").siblings().css("display", "none");
                $(".tab_con .item").eq(index).show().siblings().hide();
            })
        })

    </script>
</body>

</html>

3.2.3 类操作与className区别

原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

3.3. jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

显示隐藏：

show()
hide()
toggle()

滑动
slideDown()
slideUp()
slideToggle()

淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

自定义动画

animate()

3.3.1 显示隐藏效果

1. 显示语法规范   show()
show([speed,[easing],[fn]])
显示参数
  • （1）参数都可以省略， 无动画直接显示。
  • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”（匀速）。
  • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.隐藏语法规范   hide()
hide([speed,[easing],[fn]])
 隐藏参数
  • （1）参数都可以省略， 无动画直接显示。
  • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
3. 切换语法规范  toggle()
toggle([speed,[easing],[fn]])
切换参数
  • （1）参数都可以省略， 无动画直接显示。
  • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

建议：平时一般不带参数，直接显示隐藏即可。

        $(function () {
            // 显示  show
            $("button").eq(0).click(function () {
                // $("div").show("fast");
                $("div").show(1000, function () {
                    alert(1);        // function(){}函数为回调函数
                });
            })
            // 隐藏 hide
            $("button").eq(1).click(function () {
                // $("div").hide("fast");
                $("div").hide(1000, function () {
                    alert(1);        // function(){}函数为回调函数
                });
            })
            // 切换
            $("button").eq(2).click(function() {
                $("div").toggle(1000);
            })
        })

3.3.2 滑动效果

1. 下滑效果语法规范  slideDown()
slideDown([speed,[easing],[fn]])
下滑效果参数
  • （1）参数都可以省略。
  • （2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • （3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.上滑效果语法规范   slideUp()
slideUp([speed,[easing],[fn]])
上滑效果参数
  • （1）参数都可以省略。
  • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
 3.滑动切换效果语法规范  slideToggle()
slideToggle([speed,[easing],[fn]])
滑动切换效果参数
  • （1）参数都可以省略。
  • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3.3.3 事件切换   hover()

hover([over,]out)

  • （1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
  • （2）out:鼠标移出元素要触发的函数（相当于mouseleave）
  • （3）如果只写一个函数，则鼠标经过和离开都会触发它

3.3.4 动画队列及其停止排队方法

1. 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

2. 停止排队   stop()

stop()

(1）stop() 方法用于停止动画或效果。
(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

案例：简洁版滑动下拉菜单

<!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>
    <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>
    <script src="jquery.min.js"></script>
</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>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        // 方法一 分为鼠标经过和鼠标离开
        // $(function () {
        //     // 鼠标经过
        //     $(".nav > li").mouseover(function () {
        //         // $(this)  jQuery当前元素 this不要加引号
        //         // 方法①  show()  显示元素
        //         // $(this).children("ul").show();
        //         // 方法②  下拉菜单slideDown()
        //         $(this).children("ul").slideDown(200);
        //     });
        //     // 鼠标离开
        //     // hide()  隐藏元素
        //     $(".nav li").mouseout(function () {
        //         // $(this).children("ul").hide();
        //         $(this).children("ul").slideUp(200);
        //     });
        // })

        // // 方法二 1. 事件切换 hover 就是鼠标经过和鼠标离开的复合写法
        // $(function() {
        //     // $(".nav>li").hover(function() {}, function() {});     第一个 function函数是鼠标经过函数 第二个function函数是鼠标离开函数
        //     $(".nav>li").hover(function() {
        //         $(this).children("ul").slideDown(200);
        //     }, function() {
        //         $(this).children("ul").slideUp(200);
        //     });
        // })

        // 方法二 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
        $(function() {
            $(".nav>li").hover(function() {
                $(this).children("ul").stop().slideToggle();       // stop()方法 动画停止排队 ，必须写到动画的前面
            })
        })
    </script>
</body>

</html>

3.3.5 淡入淡出效果

1. 淡入效果语法规范  fadeIn()

fadeIn([speed,[easing],[fn]])

 淡入效果参数
  • （1）参数都可以省略。
  • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
2.淡出效果语法规范   fadeOut()

fadeOut([speed,[easing],[fn]])

淡出效果参数
  • （1）参数都可以省略。
  • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
3.淡入淡出切换效果语法规范   fadeToggle()

fadeToggle([speed,[easing],[fn]])

淡入淡出切换效果参数
  • （1）参数都可以省略。
  • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
4.渐进方式调整到指定的不透明度  fadeTo()

fadeTo([[speed],opacity,[easing],[fn]])

效果参数
  • （1）opacity 透明度必须写，取值 0~1 之间。
  • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
  • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

案例：高亮显示案例

 （具体见 3.4.1素材 23-高亮显示案例）

        $(function() {
            $(".wrap li").hover(function() {
                // 鼠标进入的时候，其他li标签 透明度 为 0.5
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {
                // 鼠标离开 ，其他li标签 透明度 为 1
                $(this).siblings().stop().fadeTo(400, 1);
            })
            
            
        })

3.3.6 自定义动画   animate()

1. 语法

animate(params,[speed],[easing],[fn])

2. 参数
  • （1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
  • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
<!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>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,      // 需要有定位
                    top: 300,
                    opacity: .4,
                    width: 400,
                }, 500)
            })
        })
    </script>
</body>

</html>

案例：王者荣耀手风琴效果

① 鼠标经过某个小li 有两步操作：
② 当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
③ 其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出

 （具体见 3.4.1素材 24-手风琴案例）

3.4  jQuery 属性操作

3.4.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。

1. 获取属性语法

prop(''属性'')

2. 设置属性语法

prop(''属性'', ''属性值'')

3.4.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

1. 获取属性语法

attr(''属性'')                    // 类似原生 getAttribute()

2. 设置属性语法

attr(''属性'', ''属性值'')               // 类似原生 setAttribute()

改方法也可以获取 H5 自定义属性

3.4.3 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构（即源代码不会改变）。一旦页面刷新，之前存放的数据都将被移除。

1. 附加数据语法

data(''name'',''value'')                  // 向被选元素附加数据

2. 获取数据语法

date(''name'')                      // 向被选元素获取数据

同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型

<!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>
    <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function () {
            // element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));          // http://www.itcast.cn
            $("a").prop("title", "我们都挺好");
            $("input").change(function () {          // change事件——发生了改变就会执行
                console.log($(this).prop("checked"));      // false/true
            })
            // console.log($("div").prop("index"));       // 1
            // 2.元素的自定义属性 attr()
            console.log($("div").attr("index"));           // 1
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));       // 2
            // 3.数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "anny");
            console.log($("span").data("uname"));            // anny
            // 这个方法获取data-index  h5自定义属性 第一个 不用写data- 而且返回的是数字型
            console.log($("div").data("index"));          // 2

        })


    </script>
</body>

</html>

案例：购物车案例模块-全选

（3.4.6素材 02-购物车） 

① 全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
② 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
③ 把全选按钮状态赋值给3小复选框就可以了。
④ 当我们每次点击小的复选框按钮，就来判断：
⑤ 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。

⑥ :checked 选择器  ——  :checked 查找被选中的表单元素。

3.5  jQuery 内容文本值

主要针对元素的内容还有表单的值操作。

1. 普通元素内容 html()（ 相当于原生inner HTML)

html()          // 获取元素的内容（小括号为空）

html(''内容'')            // 设置元素的内容

2. 普通元素文本内容 text() (相当与原生 innerText )

text()                                     // 获取元素的文本内容

text(''文本内容'')                  // 设置元素的文本内容

3. 表单的值 val()（ 相当于原生value)

val()                  // 获取表单的值

val(''内容'')                // 设置表单的值

    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1.获取设置元素内容 html()
        console.log($("div").html());        // <span>我是内容</span>
        // $("div").html("123");
        // 2.获取设置元素文本内容 text()
        console.log($("div").text());             // 我是内容
        $("div").text("123");
        // 3.获取设置表单值 val()     
        console.log($("input").val());          // 请输入内容
        $("input").val("123");
     
    </script>

案例：购物车案例模块-增减商品数量

（3.4.6素材 02-购物车） 

① 核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
② 注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。
③ 修改表单的值是val() 方法
④ 注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值
⑤ 减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。

案例：购物车案例模块-修改商品小计

（3.4.6素材 02-购物车） 

① 核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计
② 注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum）
③ 修改普通元素的内容是text() 方法
④ 注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)
⑤ parents（"选择器") 可以返回指定祖先元素
⑥ 最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
⑦ 用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件
⑧ 用最新的表单内的值 乘以 单价即可 但是还是当前商品小计

3.6  jQuery 元素操作

主要是遍历、创建、添加、删除元素操作。

3.6.1 遍历元素  

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。

语法1：each()

$("div").each(function (index, domEle) { xxx; }）

  • 1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
  • 2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象      dom对象没有css方法
  • 3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法2：$.each()

$.each(object，function (index, element) { xxx; }）

  • 1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
  • 2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

案例：购物车案例模块-计算总计和总额

（3.4.6素材 02-购物车）  

① 核心思路：把所有文本框里面的值相加就是总计数量。总额同理
② 文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可
③ 点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额
④ 因此可以封装一个函数求总计和总额的， 以上2个操作调用这个函数即可。
⑤ 注意1： 总计是文本框里面的值相加用 val() ,总额是普通元素的内容用text()
⑥ 要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加

3.6.2 创建元素

语法：

$(''<li></li>'');

动态的创建了一个 <li>

3.6.3 添加元素

1. 内部添加

element.append(''内容'')

把内容放入匹配元素内部最后面，类似原生 appendChild。

element.prepend(''内容'')

把内容放入匹配元素内部最前面。

2. 外部添加

element.after(''内容'') // 把内容放入目标元素后面

element.before(''内容'') // 把内容放入目标元素前面

  • ① 内部添加元素，生成之后，它们是父子关系。
  • ② 外部添加元素，生成之后，他们是兄弟关系。

3.6.4 删除元素

element.remove()             // 删除匹配的元素（本身）

element.empty()                // 删除匹配的元素集合中所有的子节点

element.html('''')                // 清空匹配的元素内容

  • ① remove 删除元素本身。
  • ② empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
            // 2.添加元素

            // (1) 内部添加  
            $("ul").append(li);      // 内部添加并且放到内容的最后面
            $("ul").prepend(li);     // 内部添加并且放到内容的最前面

            // (2) 外部添加
            var div = $("<div>123</div>");
            $(".test").after(div);
            $(".test").before(div);
            // 3.删除元素
            // $("ul").remove();      // 可以删除匹配的元素本身   自杀
            // $("ul").empty();          // 可以删除匹配元素里面所有的子节点 孩子
            $("ul").html("");


            
        })
    </script>

案例：购物车案例模块-删除商品模块

（3.4.6素材 02-购物车）  

① 核心思路：把商品remove() 删除元素即可
② 有三个地方需要删除： 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
③ 商品后面的删除按钮： 一定是删除当前的商品，所以从 $(this) 出发
④ 删除选中的商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品
⑤ 清理购物车： 则是把所有的商品全部删掉

案例：购物车案例模块-选中商品添加背景

（3.4.6素材 02-购物车）  

① 核心思路：选中的商品添加背景，不选中移除背景即可
② 全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
③ 小的复选框点击： 如果是选中状态，则当前商品添加背景，否则移除背景
④ 这个背景，可以通过类名修改，添加类和删除类

3.7. jQuery 尺寸、位置操作

3.7.1 jQuery 尺寸 

  •  以上参数为空，则是获取相应值，返回的是数字型。
  •  如果参数为数字，则是修改相应值。
  •  参数可以不必写单位
        $(function () {
            // 1.width() / height() 获取设置元素 width和height大小
            console.log($("div").width());   // 200
            // $("div").width(300);

            // 2.innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
            console.log($("div").innerWidth());   // 220
            // 3.outerWidth() / outerHeight() 获取设置元素 width和height + padding + boder大小
            console.log($("div").outerWidth());
            // 4.outerWidth(true) / outerHeight(true) 获取设置元素 width和height + padding + boder + margin大小
            console.log($("div").outerWidth(true));
        })

3.7.2 jQuery 位置

位置主要有三个： offset()、position()、scrollTop()/scrollLeft()

1. offset() 设置或获取元素偏移
  • ① offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
  • ② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
  • ③ 可以设置元素的偏移：offset({ top: 10, left: 30 });
2. position() 获取元素偏移
  • ① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
  • ② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
  • ③ 该方法只能获取
        $(function() {
            // 1.获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());           // Object {left: 110, top: 110, [[Prototype]]: ...}
            console.log($(".son").offset().top);       // 110
            $(".son").offset({
                top: 200,
                left: 200
            });

            // 2.获取距离带有定位的父级位置（偏移） position  如果没有带有定位的父级 则以文档为准
            // 这个方法只能获取不能设置
            console.log($(".son").position());

            
        })

3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
  • ① scrollTop() 方法设置或返回被选元素被卷去的头部。
  • ② 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

案例：带有动画的返回顶部

① 核心原理： 使用animate动画返回顶部。
② animate动画函数里面有个scrollTop 属性，可以设置位置
③ 但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0})。而$("document").stop().animate({scrollTop:0})的动画效果无效

<!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>
    <style>
        body {
            height: 2000px;
        }
        
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            $(document).scrollTop(100);          // 页面直接跳到 被卷去的头部距离页面顶部100位置上
            // 被卷去的头部 scrollTop()    /   被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // $(document).scrollTop();
                // console.log($(document).scrollTop());
                if ( $(document).scrollTop() >= boxTop) {
                    $(".back").show();           // 或者 $(".back").fadeIN()
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);    // 直接跳回顶部，并没有带有动画
                $("body, html").stop().animate({
                    scrollTop: 0
                })
                // $("document").stop().animate({
                //     scrollTop: 0
                // });     // 不能是文档而是html和body元素做动画
            })
        })
    </script>
</body>

</html>

案例： 品优购电梯导航

① 当我们滚动到 今日推荐 模块，就让电梯导航显示出来
② 点击电梯导航页面可以滚动到相应内容区域
③ 核心算法：因为电梯导航模块和内容区模块一一对应的
④ 当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
⑤ 就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top
⑥ 然后执行动画即可

案例： 品优购电梯导航

① 当我们点击电梯导航某个小li， 当前小li 添加current类，兄弟移除类名
② 当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，也会添加current类， 兄弟移除current类。
③ 触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。
④ 需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
⑤ 判断的条件： 被卷去的头部 大于等于 内容区域里面每个模块的offset().top
⑥ 就利用这个索引号找到相应的电梯导航小li添加类。

夏天的遥遥漓曦
关注
专栏目录
jquery.roundabout.js 应用及api参数
wwww001001的博客
01-15 4065
&amp;amp;amp;amp;amp;lt;!--2019年-01月-15号 星期二 14:11:03 --&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;en&amp;amp;amp;amp;quot;&
jQuery选择器及jQuery基本操作
01-08
jQuery选择器及基本操作是jQuery库的核心组成部分，它极大地简化了JavaScript中DOM元素的选取和操作。jQuery选择器允许开发者使用CSS1至CSS3的选择器语法来定位HTML元素，使得代码更加简洁、高效。 1. **jQuery选择...
Roundabout for jQuery
weixin_30820077的博客
05-12 110
效果图： Roundabout是一个转换静态HTML元素结构为交互式播放区域的jQuery插件（而且并不仅仅是一个转盘，还有许多的形状） 首先你要下载好Jquery.min.js,和Jquery-Roundabout.min.js，我会在文件里上传。 然后直接给上源代码。duration是转的快慢，值越大， 转的越慢。还有一些其他功能，详见百度Jquery-roundabout。 ...
php国际象棋棋盘,PHP实现国际象棋棋盘的样式效果（代码示例）
weixin_33989935的博客
03-13 225
国际象棋棋盘，相信大家都知道是什么样，那么如果让你用代码来实现这种样式，你会选择用什么代码语言来实现呢？在本篇文章中，我们将给大家介绍用PHP来实现国际象棋棋盘的样式效果方法，非常有趣好玩，感兴趣的朋友可以参考~php代码示例如下： 国际象棋棋盘 ...
JQuery 国际象棋棋盘 实现代码
12-09
当时没觉得有什么，今天回头看看，觉得还有点意思，拿来给大家鉴定一下。 首先要实现棋子的排布，这毫无疑问得用div+css了。 具体代码可以看Jquery做的国际象棋棋盘（查看源代码） 。 一开始我给每种棋子都写了类，实际上这是比较愚蠢的行为。首先，这样子css代码会有冗余。其次，在棋子div上绑定侦听器时会比较麻烦，要判断是否棋子div时，我不得不靠类名中的-b和-w后缀来判断是否棋子。但是如果我们将棋子的共同属性提取出来专设一个类qizi，那么这两个问题都可以迎刃而解。 在代码中我特意没有将之前的代码去掉，你可以在注释的代码中看到。为了让黑棋和白旗都可以移动，我不得不把一个方法写上两边，你看
jQuery操作元素的内容和样式完整实例分析
11-27
总的来说，jQuery提供了简单易用的API来操作DOM元素的内容和样式，使得开发者可以更方便地实现动态效果和交互。了解并熟练掌握这些方法，对于进行前端开发来说至关重要。在实际项目中，根据需求灵活运用这些方法，...
js学习笔记——（15）jQuery选择器、样式操作、效果
01-20
jQuery选择器 jQuery提供了一套丰富的选择器，使得开发者可以更加方便地选取DOM元素。这些选择器主要分为以下几类： #### 1.1 基础选择器 - `$(‘#id’)`：通过ID选择器选取ID为指定字符串的元素。 - `$(‘.class...
jQuery基本选择器选择元素使用介绍
10-27
在使用jQuery选择器时，我们通常将选择器与jQuery方法一起使用，如`.css()`方法，它用来改变选中元素的样式；`.html()`和`.text()`等用于获取或设置元素的HTML或文本内容；以及`.hide()`和`.show()`等用于控制元素的...
浅谈jQuery 选择器和dom操作
01-19
JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class 和标签名来查找DOM元素。这个非常重要，下面的内容都是以此为基础，逐级提高的。 1).“$(“#id”)”，...
Java实现国际象棋棋盘的绘制并插入棋子
12-09
JavaFx实现国际象棋棋盘的绘制并插入棋子，将棋子相关图片存于image文件夹中并放至于.java文件所在目录中，并调用。
JQuery实现简单的国际象棋棋盘
drclef的博客
03-15 7092
介于网上没有简单的JQuery的国际象棋棋盘在此写了一个，供大家参考 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } ul, li { list-style: none }
使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。
杨明金的博客
11-11 4979
查看本章节 查看作业目录 需求说明： 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。 要求如下： 点击页面的“更改样式”按钮后，使用 jQuery 设置标题“Web 前端技术”的字体颜色为红色 第一层的无序列表 <ul> 即“使用 DIV+CSS 设计前端页面”“使用 JavaScript+jQuery 制作页面特效”，列表符号是正方形 第二层无序列表是说明具体章节内容的，其列表符号是三角形 实现思路： 在 HTML 页面中
jQuery |获取并设置样式css
weixin_33695450的博客
12-29 321
jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些： addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样...
jQuery介绍与基本使用
Just__2009的博客
10-07 589
jQuery 入口 在使用jQuery前，需先导入jQuery文件。压缩版为佳。 当脚本位于html内容前，需要为jQuery创建一个入口（window.οnlοad=function(){}同理），位于内容末尾则不用。 入口有两种写法，一种为简洁入口，一种为标准入口。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.g...
weixin_34405332的博客
07-18 119
2019独角兽企业重金招聘Python工程师标准>>> ...
python 绘制围棋棋盘_[案例] 绘制国际象棋棋盘？（turtle 登场）
weixin_39830012的博客
11-25 659
案例介绍今天我们来用 turtle 画一个国际象棋棋盘，大小为 8x8。​国际象棋棋盘 turtle 绘图（海归绘图）很适合用来引导孩子学习编程，请想象绘图区有一只机器海龟，起始位置在 x-y 平面的（0, 0）点，先执行 import turtle，再执行 turtle.forward(15)，它将朝所面对的 x 轴 正方向前进 15 像素，随着它的移动画出一条线段。再执行 turtle.rig...
jQuery选择器详解与基本操作入门
jQuery选择器及jQuery基本操作是一份详尽的教程，主要介绍了在jQuery中如何使用选择器来操作DOM元素，以及jQuery提供的基础操作功能。jQuery选择器是其核心内容，它允许开发者使用CSS1-CSS3的标准选择器、自定义属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值