jQuery基础总结(一)

最新推荐文章于 2021-09-09 15:37:52 发布

等的人心好烦

最新推荐文章于 2021-09-09 15:37:52 发布

阅读量301

点赞数

分类专栏： jquery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/yongchaocsdn/article/details/78629237

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先看一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回顾js</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div{
            height:200px;
            background:pink;
            margin-botton:10px;
            display:none;/*隐藏div*/
        }
    </style>
    <script>
        window.onload=function () {
            document.getElementById("demo").onclick=function () {
                //1.让div展示出来
                //2.给div一个文本内容
                var divs=document.getElementsByTagName("div");
                for(var i=0;i<divs.length;i++){
                    divs[i].style.display="block";
                    //用innerHTML比较好
                    divs[i].innerText="我是内容";
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="我是按钮" id="demo"/>
<div></div>
<div></div>
<div></div>
</body>
</html>

这里写图片描述

1.1 回顾前面学到的js我们遇到的一些痛点

window.onload 事件有个事件覆盖的问题，我们只能写一个
代码容错性差
浏览器兼容性问题
书写很繁琐，代码量多
代码很乱，各个页面到处都是
动画效果，我们很难实现

1.2 jQuery解决问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回顾js</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div{
            height:200px;
            background:pink;
            margin-botton:10px;
            display:none;/*隐藏div*/
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#demo").click(function () {
                $("div").show(1000).html("我是内容");
            });
        });
    </script>
</head>
<body>
<input type="button" value="我是按钮" id="demo"/>
<div></div>
<div></div>
<div></div>
</body>
</html>

解决了我们上面遇到所有问题

1.3 jQuery的基本使用

这里写图片描述
min：它是压缩过的版本
区别：我们开发过程中，会用未压缩的版本，或者压缩的。
项目上线的时候，我们要用压缩过的版本。
版本问题：
1. 1.xxx 版本 jQuery-1.11.1.js
2. 2.xxx 版本不再支持IE6、7、8

1.3.1 引包

1.要把我们的jQuery源文件拿到我们的项目里面来
2.在我们的页面中引用jQuery文件
这里写图片描述
问题：

如果遇到这种问题，那肯定是没有引用我们的jQuery源文件。
用jQuery之前，先引入jQuery，然后，再去写我们的jQuery代码。

1.3.2 入口函数

这里写图片描述
$(document).ready(function(){}); $(function(){});

1.3.3 事件处理程序

事件源
Js方式：document.getElementById(“id”) jQuery方式：$(“#id”)
事件
Js方式 :document.getElementById(“id”).onclick jQuery方式: $(“#id”).click
区别：jQuery的事件不带on
事件处理程序

Js 书写方式:
document.getElementById(“id”).onclick = function(){
    // 语句
}
jQuery 书写方式: 
$(“#id”).click(function(){
    // 语句
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.1.min.js"></script>
    <style type="text/css">
        div{
            height:200px;
            background: #000;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#btnClick").click(function () {
                //语句
                $("div").hide();
            });
        });
    </script>
</head>
<body>
<input type="button" value="点击" id="btnClick"/>
<div></div>
</body>
</html>

这里写图片描述

1.4 jQuery详细介绍

1.4.1 $问题

a) Js命名归法：下划线、字母、$、数字
b) 但是不能以数字作为开头

var $ = “我是$符号”;
jQUery的两个变量：$ 和 jQuery
jQuery占用了我们两个变量：$ 和 jQuery

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        /*$(document).ready(function () {
         // var $ = "我是$";
         /!*$("#btn").click(function () {

         });*!/

         /!*jQuery("#btn").click(function () {
         console.log("我是jQuery");
         });*!/

         });*/

        var iQuery = function (dom) {
//            return {};
            var obj = {
                ready: function (func) {
                    //console.log("我是ready");
                    //func();
                    // 判断一下 docuemnt.onload 有没有被赋值（或者说有没有这个事件）
                    // 1.有：接收一个旧的函数，然后呢，我先去调用新的函数，接着再调用旧的函数
                    // 2.没有：直接赋值个onload事件
                    if (typeof dom.onload === "function") {
                        var oldFunc = dom.onload;
                        dom.onload = function () {
                            // 调用新的函数
                            func();
                            // 调用旧的函数
                            oldFunc();
                        }
                    } else {
                        dom.onload = func;
                    }
                }
            };

            return obj;
        };

        iQuery(window).ready(function () {
            alert("第一调用");
        });

        iQuery(window).ready(function () {
            alert("第二调用");
        });


        var obj = {
            ready: function () {

            }
        };

        var obj1 = new Object();
        obj1.ready = function () {

        };

        //Object.create();
    </script>
</head>
<body>
<input type="button" value="我是按钮" id="btn"/>
</body>
</html>

这里写图片描述

1.4.2 js入口函数跟jQuery入口函数的区别：

Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行
jQuery的入口函数是在 html所有标签都加载之后，就回去执行。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            //alert($("#img3").width());
            alert(document.getElementsByTagName("img")[2].clientWidth);
        };

        /*$(function () {
            //alert(document.getElementsByTagName("img")[2].clientWidth);
            alert($("#img3").width());
        });*/

    </script>
</head>
<body>
<img src="imgs/01.jpg" alt=""/>
<img src="imgs/02.jpg" alt=""/>
<img id="img3" src="imgs/03.jpg" alt=""/>


</body>
</html>

1.5 Js创建对象

三种方式：
1. var obj = {};
2. var obj1 = new Object();
3. var obj2 = Object.create();
1跟2的区别：
&ems;推荐使用第一个方式
第二种方式存在效率问题，因为要new对象，会涉及到原型查找的问题。

var obj = {
            ready: function () {

            }
        };

        var obj1 = new Object();
        obj1.ready = function () {

        };

        //Object.create();

1.6 jQuery基本选择器

1.6.1 回顾CSS选择器

这里写图片描述

1.6.2 jQuery基本选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            /*color: red;*/
            font-size: 18px;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // # id选择器
            // js dom.style.backgroundColor = "";
            // 设置被选择元素的样式属性
            //$("#b03").css("background","red");
            // 获取被选择元素的样式属性
            /*var bg = $("#b03").css("color");
            console.log(bg);*/

            /*var bg = $("#b03").css("font-size");
            console.log(bg);*/

            // 类选择器
            /*$(".liItem").css("background","red");*/

            // 标签选择器
            //$("li").css("background","red");

            // jQuery的一个 特点：隐式迭代

            // * 通配符选择器
            //$("*").css("font-size","20px");

            // , 并集选择器
            //$(".liItem,div").css("background","blue");

            $("#demo").css("background","red");
            /*$("#demo").css({
                "color":"red",
                "font-size" : ""
            });*/

            // 交集选择器
            $("li#b03").css("font-size","20px");

        });
    </script>
</head>
<body>
<ul>
    <li class="liItem aa" id="demo">兄弟很多1</li>
    <li>兄弟很多2</li>
    <li id="b03">兄弟很多3</li>
    <li>兄弟很多4</li>
    <li class="liItem">兄弟很多5</li>
    <li id="demo1">兄弟很多6</li>
    <li>兄弟很多7</li>
    <li class="liItem">兄弟很多8</li>
</ul>

<div class="aa">
    我是div的内容
</div>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            font-size: 20px;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // css
            // 获取 .css("background-color")
            //$("li").css("font-size");

            // 设置样式
            //$("li").css("background-color","red");

            // 设置多个样式
            /*$("li").css({
                "background-color": "red",
                "font-size": "20px",
                "color": "white"
            });*/

            // 设置样式，可以根据我们自己的意愿来设置
            $("li").css("font-size", function (i,v) {
                // index: 指定当前元素的索引号
                // value: 表示当前元素要设置的样式，此处指：background-color
                /*console.log(index);
                console.log(value);*/
                //return (i + 1) * parseInt(v) + "px";

                // 只设置第三个
                if(i === 2) {
                    return (i + 1) * parseInt(v) + "px";
                }
            });
        });
    </script>
</head>
<body>
<ul>
    <li>我是li元素</li>
    <li>我是li元素</li>
    <li>我是li元素</li>
    <li>我是li元素</li>
</ul>
</body>
</html>

规律：$(selector).css(“background”,”red”);

1.7 jQuery是什么

jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。

1.7.1 Javascipt跟jQuery的区别：

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
这里写图片描述
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

1.8 jQuery其他选择器

1.8.1 层级选择器

这里写图片描述
层级选择器选择了选择符后面那个元素，比如，div > p，是选择>后面的p元素。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // document 是不被引号包裹的
            //$("li").css("font-size","30px");

            // 后代选择器
            //$(".wrap li").css("background","red");

            // 子代选择器
            //$(".wrap > ul > li").css("font-size","30px");

            // 紧邻选择器
            //$(".wrap + div").css("font-size","30px");

            // 兄弟选择器
            $(".liItem ~ li").css("font-size","40px");
        });

        // jQuery的第二种入口函数
        /*$(function () {});*/
    </script>
</head>
<body>

<div class="wrap">
    <ul>
        <li>姐妹很多01
            <p>
            <ul>
                <li>孩子很多</li>
                <li>孩子很多</li>
                <li>孩子很多</li>
            </ul>
            </p>
        </li>
        <li>姐妹很多02</li>
        <li>姐妹很多03</li>
        <li class="liItem">姐妹很多04</li>
        <li>姐妹很多05</li>
        <li>姐妹很多06</li>
        <li>姐妹很多07</li>
        <li>姐妹很多08</li>
        <li>姐妹很多09</li>
        <li>姐妹很多10</li>
    </ul>
</div>
<p>我是p元素</p>
<div>
    我是第一个div后面的兄弟div
</div>
<div>
    我是第er个div后面的兄弟div
</div>

</body>
</html>

1.8.2 过滤选择器

这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // :odd
            //$("li:odd").css("background","red");

            // :even
            //$("li:even").css("background","green");

            // :eq(index)
            //$("ul li:eq(4)").css("font-size","30px");


            // :lt(index)
            //$("li:lt(6)").css("font-size","30px");

            // :gt(index)
            //$(".ulList1 li:gt(7)").css("font-size","40px");

            // :first
            //$(".ulList li:first").css("font-size","40px");

            // :last
            $("li:last").css("font-size","40px");
        });
    </script>
</head>
<body>
<ul class="ulList">
    <li>01男嘉宾</li>
    <li>02男嘉宾</li>
    <li>03男嘉宾</li>
    <li>04男嘉宾</li>
    <li>05男嘉宾</li>
    <li>06男嘉宾</li>
    <li>07男嘉宾</li>
    <li>08男嘉宾</li>
    <li>09男嘉宾</li>
    <li>10男嘉宾</li>
</ul>
<ul class="ulList">
    <li>01男嘉宾</li>
    <li>02男嘉宾</li>
    <li>03男嘉宾</li>
    <li>04男嘉宾</li>
    <li>05男嘉宾</li>
    <li>06男嘉宾</li>
    <li>07男嘉宾</li>
    <li>08男嘉宾</li>
    <li>09男嘉宾</li>
    <li>10男嘉宾</li>
</ul>
</body>
</html>

1.8.3 属性选择器

这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // 属性选择器
            /*$("a[href]").css("color","red");*/

            // [attr=value]
            //$("a[href='http://web.itcast.cn']").css("font-size","40px");

            // [attr!=value]
            //$("a[href!='http://www.baidu.com']").css("font-size","40px");

            // [attr^=value]
            //$("a[href^='http']").css("font-size","40px");

            // [attr$=value]
            //$("a[href$='cn']").css("font-size","40px");

            // [attr*=value]
            //$("a[href*='it']").css("font-size","40px");

            // [attr][attr] 都满足 交集
            $("a[href][title*='的']").css("font-size","40px");
        });
    </script>
</head>
<body>
    <div class="divItem">
        <a href="www.baidu.com" title="谁啊？">百度</a>
        <a href="http://web.itcast.cn" title="我是title的内容">前端移动</a>
        <a href="http://sina.com.cn">新浪</a>
        <a>我没有href</a>
    </div>
</body>
</html>

1.8.4 筛选选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // .eq()
            // 类比 ":eq(index)" 选择器
            //$("span").eq(1).css("font-size","40px");

            // .first()
            // 类比 ":first" 选择器
            //$("span").first().css("font-size", "40px");

            // .parent()
            // 选择父亲元素
            //$("#sp").parent().css("background", "gold");

            //$("p").parent("#div").css("background", "gold");

            // .siblings()
            // 选择所有的兄弟元素
            //$("#li04").siblings(".liItem").css("background", "gold");

            // .find()
            // 查找所有后代元素
            $("div").find("#li04").css("background", "gold");
        });
    </script>
</head>
<body>
<div>
    <span>我是第1个span</span>
    <span id="sp">我是第2个span</span>
    <span>我是第3个span</span>
</div>

<div id="div">
    <p>Hello</p>
</div>
<div class="selected">
    <p>Hello Again</p>
</div>

<div>
    <ul>
        <li>我是li01</li>
        <li>我是li02</li>
        <li>我是li03</li>
        <li id="li04">我是li04</li>
        <li>我是li05</li>
        <li class="liItem">我是li06</li>
        <li>我是li07</li>
        <li>我是li08</li>
    </ul>
</div>
</body>
</html>

1.9 mouseover事件跟mouseenter事件的区别：

mouseover/mouseout事件，鼠标经过的时候会触发多次，每遇到一个子元素就会触发一次。
mouseenter/mouseleave事件，鼠标经过的时候只会触发一次

<html>
<head>
    <meta charset="UTF-8">
    <script src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        x=0;
        y=0;
        $(document).ready(function(){
            $("div.over").mouseover(function(){
                $(".over span").text(x+=1);
            });
            $("div.enter").mouseenter(function(){
                $(".enter span").text(y+=1);
            });
        });
    </script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
    <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
    <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>

一个下拉菜单:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            background-image: url(imgs/bg.jpg);
            padding-left: 10px;
        }

        .wrap li {
            float: left;
            width: 100px;
            height: 30px;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            color: black;
            text-decoration: none;
            display: block;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-image: url(imgs/libg.jpg);
        }

        .wrap li ul {
            position: absolute;
            display: none;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // mouseenter事件 是 鼠标经过时触发的事件
            /*$(".wrap li").mouseenter(function () {
                $(this).children("ul").show();
            });

            $(".wrap li").mouseleave(function () {
                $(this).children("ul").hide();
            });*/

            /*$(".wrap li").hover(function () {
                //alert("1");
                $(this).children("ul").show();
            }, function () {
                $(this).children("ul").hide();
            });*/

            /*$(".wrap li").hover(function () {
                /!*alert("1");*!/
                var $this = $(this).children("ul");
                var isShow = $this.css("display");
                if(isShow === "block") {
                    $this.hide();
                } else {
                    $this.show();
                }
            });*/

            $(".wrap li").hover(function () {
                $(this).children("ul").slideToggle();
            });

        });
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#">一级菜单1</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单1</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li><li>
            <a href="#">一级菜单1</a>
            <ul>
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">二级菜单3</a></li>
            </ul>
        </li>
        </ul>
    </div>
</body>
</html>

这里写图片描述

1.10 DOM对象跟jQuery对象相互转换

jQuery对象转换成DOM对象: 方式一：$(“#btn”)[0] 方式二：$(“#btn”).get(0) DOM对象转换成jQuery对象： $(document) -> 把DOM对象转成了jQuery对象 var btn = document.getElementById(“bt n”); btn -> $(btn);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            height: 200px;
            background: #000;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // DOM对象转换成jQuery对象
            /*var btn = document.getElementById("btn");
            $(btn).click(function () {
                $("div").hide();
            });*/

            // jQuery对象转换成DOM对象
            /*$("button")[1].onclick = function (){
                alert("jQuery对象转换成dom对象");
            };*/

            // 另外一个方式
            $("button").get(0).onclick = function () {
                alert("jQuery对象转换成dom对象");
            }

            // js里面的click() 方法：触发click事件
            // js里面的onclick 是绑定点击事件
            /*var btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("我是btn的onclick");
            };
            btn.click();*/
        });
    </script>
</head>
<body>
    <button id="btn">我是阿牛</button>
    <button>我是阿妹</button>
    <div>

    </div>
</body>
</html>`