jQuery基础知识笔记一

学习目标

知道jQuery常用选择器的写法
知道jQuery如何操作元素样式
知道jquery的常用事件
知道选项卡的基本实现原理
知道如何制作基本的动画
了解表单验证的基本原理

03-【了解】jquery简介

从javascript语言诞生开始，大量的开发人员使用js来完成页面特效，于是有些人就把自己工作中常用的代码段进行封装成函数或者函数库(工具库)并开源给所有开发者使用。所以javascript语言中拥有非常多，优秀的工具库。

目前全世界范围内使用最广泛的javascript函数库主要有：jQuery，Vue.js。

其中jQuery是2006年发布的工具库，jQuery简单易用，可以让开发者大量节省使用javscript开发特效的代码。

jquery 简称jQ，写jq代码，本质上就是写js代码。如果以后jQuery代码无法完成的事情，还是会使用js。

jquery的标语 Write Less, Do More（写得少，做得多）有了它，可以用更少的js代码做更多事情。

官方网站： http://jquery.com/

03.1-jQuery的版本

1.x 系列     兼容低版本的浏览器
2.x 系列     放弃支持低版本浏览器
3.x 系列     放弃支持低版本浏览器

03.2-获取jQuery库

下载地址：https://code.jquery.com/

下载回来的jQuery版本文件有两个格式：


jquery-1.12.4.js      未压缩文件(uncompressed)   适用于开发和学习
jquery-1.12.4.min.js  压缩文件(minified)         适用于项目线上运营

03.3-在HTML网页中引入jQuery

jQuery本质上就是一个装满了javascript函数的文件，所以引入jQuery，还是使用script标签即可。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 把预先下载的jQuery库文件保存在项目根目录下js目录中 -->
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<script>
    // 通过在终端打印$(美元符)，可以判断 jQuery是否成功引入到当前网页中。
    console.log( $ );
</script>
</body>
</html>

03.4- $的介绍

jQuery提供了大量的javascript操作函数给开发者使用，这些操作函数全部都被封装到了jQuery对象中了。

而$则是jQuery的核心对象jQuery对象的缩写，开发中我们都会使用$来调用jQuery库提供的工具方法来完成特效。

总结：

1. jQuery目前我们使用1.x版本，
2. jQuery本质就是js本件，在HTML网页通过script标签的src属性来引入。
3. $是jQ的核心对象jQuery的简写，开发中一般通过$来调用jQuery对象的方法。

04-【掌握】jQuery入口函数

让js代码可以在页面加载完成以后执行，在之前的学习中我们需要使用window.onload来完成。

在jQuery中，也提供了一个类似的页面加载函数给我们使用。这个函数在jQuery中也称之为"入口函数"。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 把预先下载的jQuery库文件保存在项目根目录下js目录中 -->
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // 使用jQuery提供的页面加载事件
        $(function(){
           // 获取Id元素
           var title = document.getElementById("title");
           console.log( title );
        });
    </script>
</head>
<body>
    <h1 id="title">大标题</h1>
</body>
</html>

jQuery的入口函数还有另一种写法：

$(document).ready(function(){

     ......

});

04.1-和window.onload的区别

$(function(){}) 和window.onload = function(){} 有点像，但是jq的页面加载函数一个js可以出现很多次，都会被执行(但一般也不会这么写)，而如果window.onload在同一个js文件中出现两次或者以上，则只会执行最后一个。

总结：


1. 入口函数，声明格式：
   $(function(){
     // 编写js/jQ代码
     
   });
   
2. jQuery的入口函数就是用来替换window.onload=function(){};
   1. 代码更简短
   2. window.onload只能一次，而$(function(){});可以使用多次。

05-【掌握】jQuery获取标签元素

jQuery为了简化js获取元素的操作，参考了css选择器的规则，根据选择器设计了一套获取元素的方法。

05.1-jQuery常用选择器的写法


$('#test')             // 从文档中获取id为test的元素
$('.myClass')          // 从文档中获取所有class为myClass的元素
$('li')                // 从文档中获取所有的li元素
$('#ul1 li span')      // 从文档中获取id为为ul1元素下的所有li下的所有span元素
$('input[name=first]') // 从文档中获取所有name为first的input元素
$("p,h1")              // 从文档中获取所有p元素和h1元素
$(".list li:odd")      // 从文档中获取class为list的所有元素下所有下标为奇数的li
$(".list li:even")     // 从文档中获取class为list的所有元素下所有下标为偶数的li
$("input[name=fav]:checked");  // 获取name为fav的所有被选中状态的input元素，用于多选框

检测是否有获取到元素可以通过返回值[jQuery数组对象]的length属性来观察。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            // 存在的元素
            console.log( $("#test") );
            console.log( $("#test").length ); // 1
            // 不存在的元素
            console.log( $("#tttt") );
            console.log( $("#tttt").length ); // 0 表示文档中不存在 id值为tttt的元素
        });
    </script>
</head>
<body>
    <div id="test"></div>
</body>
</html>

结果分析：

1. 使用jQuery获取元素，不管是否获取到元素，返回的都是 jQuery 对象，这个对象是一个类似数组的对象。
2. jQuery这样做的目的有两个：
     2.1 方便开发者获取元素以后直接继续使用jQuery的其他操作方法
     2.2 防止报错

总结：


1. 使用css的选择器，作为$()的参数，可以直接获取html元素，而且可以获取多个
   $("#id")     # id选择器
   $(".class")  # 类选择器
   $("ul li")   # 层级选择器
   $("h1,div")  # 群组选择器
2. 不管jQuery使用选择器是否获取到元素，都会返回类似数组的jQuery对象。

3. 可以在获取元素以后，直接使用.html获取元素的内容

4. 可以在获取元素以后，直接使用.css()操作元素的属性。

05.2-对选择元素的结果集进行过滤

jQuery还提供了允许我们过滤元素的方法，简化了获取元素的代码操作。


$('div').has('p'); // 选择包含p元素的所有div元素
$('div').not('.myClass'); //选择class不等于myClass的所有div元素
$('div').eq(5); //选择所有div元素中下标为5的div元素

总结：

1. 工作中最常用的就是通过下标从元素的结果集中过滤元素。
   $("#id").eq(下标)

05.3-选择器的关系操作

jQuery中还提供了允许通过标签之间的关系，来选中目标的其他关系元素。

通过指定元素获取其所有子元素等。

在jQuery中除了可以使用选择器来获取元素以外，还可以利用标签之间的嵌套[父子]关系或者并列[兄弟]关系来操作元素


$('#box').prev(); //选择#box元素前面紧挨的同辈元素
$('#box').prevAll(); //选择#box元素之前所有的同辈元素
$('#box').next(); //选择#box元素后面紧挨的同辈元素
$('#box').nextAll(); //选择#box元素后面所有的同辈元素
$('#box').parent(); //选择#box元素的父元素
$('#box').children(); //选择#box元素的所有子元素
$('#box').siblings(); //选择#box的元素的同级元素
$('#box').find('.myClass'); //选择#box的元素内的class等于myClass的子孙元素

总结：

1. 根据元素之间的同级关系来获取元素
   prev();
   prevAll();
   next();
   nextAll();
   siblings();
2. 根据元素之间的嵌套关系来获取元素
   children();
   parent();
   parents();
   find();
3. 更多获取元素的方式：http://www.shouce.ren通过来了解。

06-【掌握】jQuery操作html元素的内容和表单输入框的值

06.1-获取元素的html内容

$('#div1').html();

06.2-设置元素的html内容

$('#div1').html('<span>添加文字</span>');

总结：


1. 获取内容，不需要给html方法传递参数，如果获取到了多个元素，获取的内容是第一个元素的。

2. 设置内容，需要把文本内容作为参数传递给html方法，
   如果获取到了多个内容，那么设置内容的时候，全部元素的内容都会被设置到。

06.3-获取表单元素的值

$('#input1').val();

06.4-设置表单元素的值

$('#input1').val('admin');

总结：

1. 设置表单项的值都是通过val()来操作

07-【掌握】jQuery操作元素的属性

07.1-获取元素的属性

$("#img1").attr("src"); // 1.6版本以下使用这个，1.6以上操作表单的时候，需要换成prop
$("#img1").prop("src");
$("#fav").prop("checked"); // 用于单选框或者复选框

07.2-设置元素的属性值

$('#img1').attr("src","test.jpg");  // 1.6版本以下使用这个
$('#img1').prop("src","test.jpg");
$('#img1').prop({"src": "test.jpg", "alt": "Test Image" });

总结：

1. 获取属性，需要传递一个属性名称参数传递到prop方法中，否则jQuery不清楚我们要获取哪个属性。
2. 设置如果是设置一个属性，可以给prop传递两个参数：
   prop("属性名","属性值");
   设置多个属性，只需要传递一个js对象参数
   prop({"属性1":"属性值1","属性2":"属性值2",.....});

08-【掌握】jQuery操作元素的样式

08.1-获取元素的css样式

$("div").css("width");

08.2-设置元素的css样式

$("div").css("width","30px");
$("div").css("height","30px").css("background","red");
$("div").css({"font-size":"30px","color":"red"}); // 同时设置多个样式属性

08.3-jQuery操作样式类名改变元素的样式

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") // 重复切换anotherClass样式

总结：

1. jQuery提供了css方法和addClass等给我们操作元素的样式属性。
2. css的使用 
   获取元素的外观样式      css("样式名称");    
   设置元素的外观样式      css("样式名称","样式值");
                        css({"样式名称1":"样式1的值","样式名称2":"样式2的值",...})
   添加样式类名           addClass("样式类名1 样式类名2");
   移除样式类名           removeClass("样式类名1 样式类名2");
   切换样式类名           toggleClass("样式类名");
   
3. css()不仅可以获取行内样式，还可以获取嵌入式或外链式的样式

09-【了解】jQuery的链式编程

在jQuery中，如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）进行操作，那么可以使用 .语法(点语法)，一直写下去。


$("#box").css("background", "pink").css("font-size":"29px");
$("#box").siblings().css("background", "");
可以写成：
$("#box").css("background", "pink").siblings().css("background", "red");

09.1- 链式编程的实现原理

jQuery可以让我们开发者一直使用点语法调用自身方法的原理，主要原因是jQuery内部利用了js的对象来实现。

在python中，我们知道self在方法内部表示当前对象自身，同理，js的方法中也有一个this表示当前对象。


// js中，声明一个对象
var obj = {
  name:"小明",
  desc: function(){
    console.log(this); // 打印当前自身对象
    console.log(this.name); // 调用自身对象的属性
    return this;  // 实现链式编程的原理，就是在调用方法后，方法本身返回对象。
  },
  say: function(){
    console.log("hello!");
    return this;
  }
}

总结：

1. 实现链式编程的核心，是对象中的每一个方法都会返回当前对象。
   var 对象 = {
     方法名:function(){
       // .....
       return this; // 实现链式编程的核心 
     }
   }
2. 在方法中，js提供一个this的关键字，表示当前对象。

10-【掌握】jQuery的事件操作

jQuery不仅针对获取元素，操作样式等常用的操作进行了简化，对于js的事件操作，也进行了封装。

10.1-jQuery的常用事件

事件名称	描述
click()	鼠标单击
mouseover()	鼠标进入
mouseout()	鼠标离开
hover(function(){},function(){})	鼠标持久悬放(函数1写鼠标移入的代码，函数2写鼠标移出的代码)
submit()	表单提交
blur()	元素失去焦点
focus()	元素获得焦点

jQuery中的事件全部都是对js事件的进一步封装，在原来的基础上去除了on。

10.2-jQuery的事件绑定

绑定事件，jQuery中也是需要先获取到元素，然后通过on方法来进行绑定。


// js中绑定事件的语法：

  元素.on事件名 = function(){
        
  }

// jQuery中绑定事件的语法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
    $(function(){
        // jQuery的事件绑定有两种方式
        // 方式1:　通过　元素.事件名(function(){});
        $("button").click(function(){
            alert("hello");
        });

        // 方式2: 通过 元素.on("事件名",function(){});
        $("button").on("mouseover",function(){
           console.log( $("button").html() );
        });

        // 最常用的什么呢? on写法
    })
    </script>
</head>
<body>
<button>按钮</button>
</body>
</html>

总结：

1. jQuery有两种绑定事件的方式，最常用的是通过on来绑定事件.
   $("选择器").on("事件名", function(){
       // 事件执行时的代码
   });

10.3-jQuery的事件操作

案例：点击按钮控制标签的显示可以隐藏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #box{width: 100px;height: 100px;background:red;}
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
    $(function(){
       $("#btn1").on("click", function(){
           $("#box").css("display","block");
       });
       $("#btn2").on("click", function(){
           $("#box").css("display","none");
       });
    });
    </script>
</head>
<body>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<div id="box"></div>
</body>
</html>

总结：

1. 在jQuery可以通过on来对元素进行事件绑定。
   $("选择器").on("事件名称",function(){
     
   });
   
2. 在使用on()给元素绑定事件以后，可以绑定多次同名事件，但是不建议这么做。
3. hover表示是mouseover和mouseout事件的组合，表示鼠标移入和移出元素。
   3.1 可以放两个参数。
     $("选择器").hover(function(){
       // 原来mouseover的事件代码
     },function(){
       // 原来mouseout的事件代码
     });
   
   3.2 可以放一个参数。
     $("选择器").hover(function(){ // 此时的hover等同于mouseover
       // 原来mouseover的事件代码
     });

11-【了解】获取当前触发事件的元素

jQuery中的事件中，匿名函数里面会提供一个$(this)，给我们获取当前触发事件的元素。

$(this) 是jQuery默认提供的，作用等同于js里面的this，但是this是js原来的关键字，不能直接调用jQuery的方法，所以可以使用$(this)来直接调用jQuery的方法。

案例：在输入框中，判断当用户输入的密码长度小于4，大于6个字符时，边框变红色，否则还原成黑色。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    input{outline: none;border: 1px solid #000;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //1. 获取元素
            $("input[name=password]").on('focus',function(){  // 绑定获取事件
                    $(this).css("border","1px solid #000");
            }).on("blur",function(){  // 绑定失去焦点事件
                if( $(this).val().length < 4 || $(this).val().length > 6 ){
                    $(this).css("border","1px solid red");
                }
            });
        });
    </script>
</head>
<body>
    <!-- 在输入框中，判断当用户输入的密码长度小于4，大于6个字符时，边框便红色，否则还原成黑色。 -->
    <input type="password" name="password">
</body>
</html>

总结：

1. 在事件中，可以使用$(this)表示当前事件绑定的元素。
   $("选择器").on("事件名",function(){
       console.log( $(this) );  // 表示当前事件绑定的元素
   });

12-【掌握】综合案例：表单验证

在开发中，经常需要提供登录页面，注册页面，用于给用户填写信息到后端进行保存。但是并非所有用户都会正确填写信息提供给我们的。所以，我们需要针对用户填写的信息进行验证。


<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
  <style type="text/css">
  input{
    height: 36px;
    line-height: 36px;
    border: 1px solid #c0c0c0;
    text-indent: 5px;
    border-radius: 200px; /* 边框圆角：值越大，表示边框的角越靠近圆形 */
    outline: none;  /* 输入框的外框 */
    margin-right: 2px;
  }
  </style>
  <script src="js/jquery-1.12.4.js"></script>
  <script>
    $(function(){

        $("input[name=username]").on("blur",function(){
            // 判断值的长度
            if( $(this).val().length < 4 || $(this).val().length > 8 ){
                // 数据长度不对，边框和提示文字变红
                $(this).css("border","1px solid #f00").next().css("color","red");
            }
        }).on("focus",function(){
            // 还原外观
            $(this).css("border","1px solid #000").next().css("color","#000");
        });

        // 判断密码的长度
        $("input[name=password]").on("blur",function(){
            if( $(this).val().length < 10 || $(this).val().length>16 ){
                $(this).css("border","1px solid #f00").next().css("color","red");
            }
        }).on("focus",function(){
            $(this).css("border","1px solid #000").next().css("color","#000");
        });

        // 判断密码和确认密码是否一致
        $("input[name=confirm]").on("blur",function(){
            //　失去焦点，获取密码的值以及当前输入框的值，进行判断对比
            if( $("input[name=password]").val() !== $(this).val() ){                $(this).css("border","1px solid #f00").next().css("color","red");            }        }).on("focus",function(){            $(this).css("border","1px solid #000").next().css("color","#000");        });    });  </script></head><body>    <form name="myform" action="">    <!-- autocomplete  自动完成 off 关闭功能 默认值：on开启功能, -->    <input type="text" autocomplete="off" name="username" /><span>用户名必须是 4~8位的字符</span><br/><br/>    <input type="password" name="password" /><span>密码必须是 10~16 位的字符</span><br/><br/>    <input type="password" name="confirm" /><span>确认密码必须要和密码一致</span><br/><br/>  </form></body></html>

总结：

1. 表单的数据验证，主要针对值的长度和值是否一致来验证。
   $(表单元素).val()         值
   $(表单元素).val().length  长度
   
2. 一般验证数据，是通过blur()和focus()来进行验证。

13-【了解】综合案例：选项卡

分析：
1. 布局上，html中分上下两部分，上面是标题栏，提供给用户点击/鼠标悬放；下面是内容显示栏，里面由多个内容窗口，与标题的数量对应。
2. 批量获取标题栏中的标题，组成一个数组，并给每一个标题，批量绑定事件。
3. 每次用户点击不同的标题，根据标题的下标，控制显示对应序号的内容窗口。
   内容窗口的显示，可以通过left定位来实现，也可以通过display:none;来实现。


<style>
    .tab_con{
        width:500px;
        height:350px;
        margin:50px auto 0;
    }
    .tab_btns{
        height:50px;
    }
    .tab_btns input{
        width:100px;
        height:50px;
        background:#ddd;
        border:0px;
        outline:none;
    }

    .tab_btns .active{
        background:gold;
    }

    .tab_cons{
        height:300px;
        background:gold;
    }

    .tab_cons div{
        height:300px;
        line-height:300px;
        text-align:center;
        display:none;
        font-size:30px;
    }

    .tab_cons .current{
        display:block;
    }
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
    $(function () {
        //1.获取到所有按钮的jquery元素
        var $btn=$('.tab_btns input');
        // 2.获取到所有按钮对应的内容的jquery元素
        var $div=$('.tab_cons div');
        //3 .给按钮添加点击事件
        $btn.click(function () {
            //给当前的button添加样式
            $(this).addClass('active').siblings().removeClass('active')
            //获取点击以后的下标
            var index=$(this).index()
            //根据下标寻找对应的div
            $div.eq(index).addClass('current').siblings().removeClass('current')
        });
    });
</script>
<body>
    <div class="tab_con">
        <div class="tab_btns">
            <input type="button" value="按钮一" class="active">
            <input type="button" value="按钮二">            <input type="button" value="按钮三">        </div>        <div class="tab_cons">            <div class="current">按钮一对应的内容</div>            <div>按钮二对应的内容</div>            <div>按钮三对应的内容</div>        </div>    </div></body>

总结：

1. 选项卡的核心实现代码是，通过$(this).index() 来获取当前用户操作的元素的下标。
   然后通过操作对应下标的内容框的显示，达到选项卡的效果。

2. 选项卡的高亮效果实现，是通过$(this)操作当前元素的样式，然后通过siblings()去除其他兄弟元素的样式。

14-【掌握】jQuery的动画效果

jQuery提供了一个animate方法，给开发者控制元素的css样式，实现动画效果。animate参数：参数一：要改变的样式属性值，写成对象的形式参数二：动画持续的时间，单位为毫秒，一般不写单位参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动参数四：动画回调函数，动画完成后执行的匿名函数


    $("div").animate({
        "width": "1000px",
        "height": "300px",
        "font-size": "30px"
    }, 2000, "linear",function(){
        alert("动画结束了");
    })

posted @ 2019-03-05 19:31 星满夜空阅读(527) 评论(0) 编辑收藏举报

刷新页面返回顶部

星满夜空