zoukankan      html  css  js  c++  java
  • jQuery学习(一)

    搭建环境

    1、下载jQuery库,下载地址:http://jquery.com/download/

    2、在文件中导入jQuery库

        <!--导入jQuery的库-->
        <script src="../js/jquery-3.3.1.min.js"></script>

    第一个实例

    1、新建文件夹js将jQuery库放入到文件夹中,再新建夹用来存放HTML文件。

    2、创建第一个HTML文件,导入jQuery库

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>体验jQuery</title>
    </head>
    <!--导入jQuery库,将jQuery的库导入进来立即执行了里面的函数,内部造了一个局部变量jQuery,然后将这个局部变量赋值到了Window的jQuery和$上,
    在页面上就可以用$和jQuery -->
    <script src="../js/jquery-3.3.1.min.js"></script>
    <!--使用jQuery提供的支持开始写自己的script代码-->
    <script type="text/javascript">
        /*$使一个函数,用jQuery函数选中整个文档,让整个文档就绪后,再执行ready里面的函数mytest函数*/
        function mytest(){
            //通过jQuery函数选中class中包含hello的那些元素
            var divs = $(".hello");//document.querySelectorAll(".hello")
            //jQuery函数返回一个包装了所选择的DOM元素的jQuery对象
            divs.html("Hello,jQuery !");
            //每次都返回this,因此可以使用方法链路
            divs.css("border","1px solid blue ");
            divs.css("width","80%");
            divs.css("height","80px");
            divs.css("margin","20px auto");
            divs.css("padding","20px 20%");
            console.log(divs);
        }
        $(document).ready(mytest)
    </script>
    <body>
        <div class="hello"></div>
        <div class="hello"></div>
        <div class="hello"></div>
        <div class="hello"></div>
        <div class="hello"></div>
    </body>
    </html>

    jQuery源码分析

    1、jQuery-3.3.1.js中主要定义了一个函数,然后向函数中传入值并立即执行该函数

    ( function( global, factory ) {
    
        } )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
        .........................
    });

    核心是factory这个函数,这个函数内部定义了jQuery对象(并对该对象做出了扩展)

    if ( !noGlobal ) {
        window.jQuery = window.$ = jQuery;
    }

    在factory对应的函数内部,jQuery 对象被绑定到 window.$上,window.$=window.jQuery=jQuery:window.jQuery = window.$ =jQuyery; 如果需要将$或者jQuyery在window对象上的绑定被废弃。

    • 只废弃window.$属性: jQuery.noConflict();
    • 同时废弃window.jQuery、window.$属性: jQuery.noConflict(true);

    jQuery核心函数(jQuery()或$())

    1、当页面上的全部元素都就绪后执行某个函数, 相当于 $(document).ready()的简写,$(callback)或jQuery(callback)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>当页面上的全部元素都就绪后执行某个函数</title>
        <!--导入jQuery的库-->
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                console.log("文档就绪")
                var properties={
                    "border":"1px solid blue ",
                    "width":"80%",
                    "height":"80px",
                    "margin":"20px auto",
                    "padding":"20px 20%",
                    "text-align":"center"
                };
                $("#first").css(properties).html("当页面上的全部元素都就绪后执行某个函数");
            });
        </script>
    </head>
    <body>
        <div id="first"></div>
    </body>
    </html>

    2、根据参数指定的选择器,选择页面上的DOM元素,并包装到一个jQuery实例中$(selector)或jQuery(selector)

    • $(".hello")选择页面上的class属性包含hello的那些DOM元素,并封装成一个jQuery实例
    • $("#first")选择页面上id="first"的首个DOM元素,并封装成一个jQuery实例

    3、根据参数给定的HTML代码片段,来创建DOM对象,并将这些DOM对象分装封装到一个jQuery实例, $(html)或jQuery(html)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>根据参数给定的HTML代码片段,来创建DOM对象,并将这些DOM对象分装封装到一个jQuery实例</title>
        <!--导入jQuery的库-->
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
               /* 根据参数给定的HTML代码片段,来创建DOM对象,并将这些DOM对象分装封装到一个jQuery实例*/
                var jo = $("<h2>Hello</h2><h2>World</h2>");
                $("#first").append(jo);
            });
        </script>
    </head>
    <body>
        <div id="first" style="border: solid blue 1px"></div>
    </body>
    </html>

    4、根据参数传入的DOM对象封装一个jQuery实例,直接将DOM对象封装成功一个jQuery实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>根据参数传入的DOM对象封装一个jQuery实例</title>
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                //通过jQuery函数选中class中包含hello的那些元素
                var divs = document.querySelectorAll(".hello");
                /* for (var x = 0,n=divs.length;x<n;x++){
                     divs[x].innerHTML="hello,world";
                 }*/
                //根据参数传入的DOM对象封装一个jQuery实例
                var jo = $(divs);
                jo.html("Hello,jQuery !");
            });
        </script>
    </head>
    
    <body>
        <div class="hello"></div>
        <div class="hello"></div>
        <div class="hello"></div>
        <div class="hello"></div>
        <div class="hello"></div>
    </body>
    </html>

    选择器

    1、CSS常用选择器

        /*选取所有的*/
        *{}
        /*class选择器*/
        .className{}
        /*id选择器*/
        #id{}
        /*元素选择器*/
        element{}
        /*后代选择器(多个级别用空格分割开,包含关系,对className里的div进行设置样式)*/
        .className div{}
        /*"并且选择器",选择class中包含className1且包含className2的元素*/
        .className1.className2
        /*直接子元素选择器(父子级别用>分隔开)*/
        div>ul{}
        /*组合选择器(多个选择器之间用逗号隔开,对多个进行设置样式)*/
        .className1 , .className2{}
        /*属性选择器*/
        input[type=text]{}
        a[href$=.jpg]以jpg为结尾
        a[href^=.jpg]以jpg为开始
        /*相邻弟节点选择器*/
        div+p{}
        /*普通弟节点选择器*/
        div~p{}
        /*伪类选择器*/
        a:link{}选择所有未访问过的链接
        :visited被访问过的链接
        :active正在活动的链接
        :hover鼠标悬浮
        :focus被选中了
        :first-child第一个子节点

    测试案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS选择器</title>
        <style type="text/css">
            div{box-shadow:1px 1px 1px 1px #d5de2b;margin: 20px }
            /*相邻弟节点选择器*/
            .container+p{text-align: center}
            /*普通弟节点选择器*/
            .container~p{background-color: #7FFFD4}
            /*所有 class="container" 且 class="content-center" 的元素,之间没有空格*/
            .container.content-center{background-color: bisque}
        </style>
        <!--导入jQuery的库-->
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                /*返回的是DOM元素组成的类数组对象(NodeList/NamedMapList)*/
                var div = document.querySelectorAll(".container.content-center");
                console.log(div);
                /*返回封装了所选择的DOM元素的jQuery实例*/
                var jo=$(".container.content-center");
                jo.css("text-align","center");
            })
    
        </script>
    </head>
    
    <body>
        <p>第一段</p>
        <div class="container content-center">这是一个盒子
            <div class="first"></div>
            <div class="second"></div>
            <div class="third"></div>
        </div>
        <div class="content-center">这还是一个盒子</div>
        <p>第二段</p>
        <p>第三段</p>
    </body>
    </html>

    2、jQuery常用选择器

    测试案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery选择器</title>
        <!--导入jQuery库-->
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                //设置间距(左右,上下)
                $(".tab").css("width","100%").css("border-spacing","0 0").css("border-radius","25px");
                $(".tab tr td ").css("width","20%").css("height","50px").css("border","2px solid #dedede");
                /* $(".tab tr:first").css("background-color","#7FFFD4")
                 $(".tab tr:last").css("background-color","#7FFFD4")*/
               /*设置偶数行的背景色*/
               $(".tab tr:even").css("background-color","#7FFFD4");
                /*设置奇数行的背景色*/
               $(".tab tr:odd").css("background-color","#ffb7d9");
               /*设置表的圆角*/
                $(".tab tr:first td:first").css("border-top-left-radius","25px");
                $(".tab tr:first td:last").css("border-top-right-radius","25px");
                $(".tab tr:last td:first").css("border-bottom-left-radius","25px");
                $(".tab tr:last td:last").css("border-bottom-right-radius","25px");
    
            });
        </script>
    </head>
    <body>
        <table class="tab">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
    </html>

    测试案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery选择器</title>
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
           $(function () {
               $(".menu>li").css("margin","50px");
               $(".menu>li:eq(2)").css("border","5px solid #cf5cde");
               $(".menu>li:gt(2)").css("border","5px solid #5CCEDE");
               $(".menu>li:lt(2)").css("border","5px solid #31de68");
               $(".menu li ul :contains('肉')").css("color","red");
               $(".menu li ul :not(:contains('肉'))").css("color","#ffb7d9");
               $(".menu li:empty").html("待续。。。").css("background-color"," #dcd759");
               $(":header").css("text-align","center");
               $("div:has(p)").css("background-color"," #7fffd4");
           });
        </script>
    </head>
    <body>
        <div>
            <p>
                <h1>菜单</h1>
            </p>
        </div>
        <ul class="menu">
            <li>川菜
                <ul>
                    <li>农家小炒肉</li>
                    <li>水煮肉片</li>
                    <li>四川火锅</li>
                </ul>
            </li>
            <li>杭州菜
                <ul>
                    <li>西湖醋鱼</li>
                    <li>东坡肉</li>
                    <li>油焖春笋</li>
                </ul>
            </li>
            <li>湘菜
                <ul>
                    <li>毛血旺</li>
                    <li>麻婆豆腐</li>
                    <li>外婆菜炒蛋</li>
                </ul>
            </li>
            <li>赣菜
                <ul>
                    <li>藜蒿炒腊肉</li>
                    <li>米粉肉</li>
                    <li>梅菜扣肉</li>
                </ul>
            </li>
            <li></li>
        </ul>
    </body>
    </html>

    测试案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单相关的选择器</title>
        <style>
            .container{
                border: 2px solid #66b7ff;
                margin: auto 30%;
            }
            .container .myform{
                padding: 5% 30%;
    
            }
            .myform .row label{
                float:left;
                text-align:right;
                width:40%;
                height:30px;
            }
           .myform .row{
                 height: auto;
                 overflow: hidden;
             }
    
            .myform  .button label{
                padding: 5% 40%;
            }
        </style>
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $(":input").css("border","2px solid #00ffff");
                /* $("input[type=submit]").css("width","28%").css("background-color","#FFF75E").css("border","2px solid #FFF75E");
                $("input[type=reset]").css("width","28%").css("background-color","#FFF75E").css("border","2px solid #FFF75E");*/
                $(":submit").css("width","28%").css("background-color","#FFF75E").css("border","2px solid #FFF75E");
                $(":reset").css("width","28%").css("background-color","#FFF75E").css("border","2px solid #FFF75E");
            });
        </script>
    </head>
    <body>
        <div class="container">
        <form class="myform">
            <div class="row">
                <label>用户名</label>
                <span>
                    <input type="text" placeholder="请输入用户名" />
                </span>
            </div>
    
            <div class="row">
                <label>密码</label>
                <span>
                    <input type="password" name="password" placeholder="请输密码"/>
                </span>
            </div>
    
            <div class="row">
                <label>确认密码</label>
                <span>
                    <input type="password" name="confirm" placeholder="确认密码"/>
                </span>
            </div>
    
            <div class="button">
                <label/>
                <span>
                    <input type="submit" value="注册">
                    <input type="reset" value="重置">
                </span>
            </div>
        </form>
        </div>
    </body>
    </html>

    测试案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery选择器</title>
        <style>
            .form-header{
                text-align: center;
                font-weight: bolder;
            }
            .container{
                width:40%;
                background-color: #FFF;
                margin: auto 30%;
                box-shadow:1px 1px 1px 1px #dadadc;
                position: absolute;top: 50%;left: 50%;
                margin-left:-20%;
                margin-top: -100px;
            }
            .container .myform{
                padding: 5% 10%;
    
            }
            .myform .row label{
                float:left;
                text-align:right;
                width:40%;
                height:30px;
            }
            .myform .row{
                height: auto;
                overflow: hidden;
            }
    
            .myform  .button label{
                padding: 5% 40%;
            }
    
            .form-header i{
                position: absolute;
                top:5px;
                right:5px;
                z-index: 1000;
                border: 1px solid #c4c4c6;
                font-style: normal;
                color: #c4c4c6;
            }
        </style>
        <script src="../js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("button:first").bind("click",function () {
                    $(".container:hidden").css("display","block");
                })
                $(".form-header i").bind("click",function () {
                    $(".container:visible").css("display","none");
                })
    
            });
        </script>
    </head>
    <body>
        <button type="button" >注册</button>
        <div class="container" hidden >
            <div class="form-header">注册新用户<i>X</i>
            </div>
            <form class="myform">
                <div class="row">
                    <label>用户名</label>
                    <span>
                        <input type="text" placeholder="请输入用户名" />
                    </span>
                </div>
    
                <div class="row">
                    <label>密码</label>
                    <span>
                        <input type="password" name="password" placeholder="请输密码"/>
                    </span>
                </div>
    
                <div class="row">
                    <label>确认密码</label>
                    <span>
                        <input type="password" name="confirm" placeholder="确认密码"/>
                    </span>
                </div>
    
                <div class="button">
                    <label/>
                    <span>
                        <input type="submit" style=" 14.0%" value="注册">
                        <input type="reset"  style=" 14.0%" value="重置">
                    </span>
                </div>
            </form>
        </div>
        <div style="background-color: #00ffff ; height: 800px" >
    
        </div>
    </body>
    </html>

    转载请于明显处标明出处

    https://www.cnblogs.com/AmyZheng/p/9698059.html

  • 相关阅读:
    Git衍合和合并区别
    Git开发流程
    AJAX用户注册演示程序
    PHP常用MySql操作
    轻描淡写
    浅谈web后门隐藏与检测思路
    PHP代码审计和漏洞挖掘的一点思考
    Android Split的用法
    Android 动态显示时间
    Java 获取字符长度
  • 原文地址:https://www.cnblogs.com/AmyZheng/p/9698059.html
Copyright © 2011-2022 走看看