jQuery--简洁的JavaScript框架

最新推荐文章于 2021-04-17 22:02:02 发布

努力学习的小蜗牛

最新推荐文章于 2021-04-17 22:02:02 发布

阅读量356

点赞数

本文链接：https://blog.csdn.net/weixin_45806273/article/details/106182918

版权

介绍

什么是 jQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架），封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

你可以通过以下来获取jQuery的相关资料

官网：http://jquery.com/
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/
jQuery插件库：http://www.jq22.com/

为什么要使用jQuery
在用原生js写代码时，会遇到一些问题：

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

使用 jQuery 的基本步骤
（1）引包

<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

注意：导包的代码一定要放在js代码的最上面。
（2）入口函数

 //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(document).ready(function () {
           alert(1);
       });
 //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(function () {
           alert(1);
       });
   //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
       $(window).ready(function () {
           alert(1);
       })

（3）功能实现代码（事件处理）
这也是我接下来讲的一个重点API
API
学习使用jQuery就是主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功API。
这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
我们可以通过 https://jqueryapi.net/ 来更好的认知jQuery
也可以通过

https://blog.csdn.net/weixin_34238642/article/details/85404724?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

来查看jquery 常用方法及说明

操作样式

//添加一条样式
$('.a').css('color','red');
 
//添加多条样式
$('.a').css({
    color:'red',
    background:'black',
    backgroundColor:'black',
});
 
//添加一个类 black为class的名称
$('.a').css().addClass('black');
 
//移除class
$('.a').css().removeClass('black');
 
//用于检测元素是否含有某个类
$('.a').hasClass('black');
 
//显示、影藏元素
$('.a').show();
$('.a').hide();
 
//动画隐藏 参数为时间，单位毫秒
$('.a').fadeOut(500);
//动画显示
$('.a').fadeIn();
//动画下往上收
$('.a').slideUp() ;
$('.a').slideDown();

操作DOM

//返回元素里面的所有文字
$('#a').text();
//设置元素里面的文字(会覆盖原来的text)
$('#a').text('LA');
 
//返回元素里面的所有子内容，包含标签
$('#a').html();
$('#a').html('LA');
 
//元素后、前面添加元素(添加儿子)
$('#a').append('<div>A</div>') ;
$('#a').prepend('<div>A</div>') ;
 
//删除ID为a的元素
$('#a').remove();
//删除ID为a的元素下面的p元素
$('#a p').remove();

总结

jQuery 的两大特点

链式编程：比如.show()和.html()可以连写成.show().html()。
隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

那么我们再来比较下原生js和jQuery
原生JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementsByTagName('button')[0];
            var divArr = document.getElementsByTagName('div');
            oBtn.onclick = function () {
                        for (var i = 0; i < divArr.length; i++) {
                            divArr[i].style.display = "block";
                            divArr[i].innerHTML = "赵云";
                            }
             }
        }
    </script>

</head>
<body>

    <button>操作</button>
    <div></div>
    <div></div>
    <div></div>


</body>
</html>

如果用 jQuery 来写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <button>操作</button>
    <div></div>
    <div></div>
    <div></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // 获取dom元素
            var oBtn = $('button'); //根据标签名获取元素
            var oDiv = $('div'); //根据标签名获取元素
            oBtn.click(function(){
                oDiv.show(1000);//显示盒子
                oDiv.html('赵云'); // 设置内容
            });//事件是通过方法绑定的
        })
    </script>

</body>
</html>

总结

一. jQuery入口函数与js入口函数的区别

Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。
Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

二.jQuery的$符号

jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。 $(function () {});
原生 js 则需要使用：window.onload = function() {};来实现

jQuery选择器

可以参照

https://blog.csdn.net/weixin_43675447/article/details/87870597?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158973510419724839228337%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=158973510419724839228337&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allbaidu_landing_v2~default-2-87870597.nonecase&utm_term=jQuery%E9%80%89%E6%8B%A9%E5%99%A8

来查看，我就不多贴代码了