欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

jQuery_Bootstrap

最编程 2024-06-03 13:19:00
...

1.jQuery

jQuery是前端开发中非常著名的开源框架

  • 下载的话 我们下载压缩版本即可 体积较小 节省流量
  • JavaScript作为脚本语言 他是一句一句自上而下运行渲染的 一旦某一条语句中出现了之前未出现过的标识符 那么就执行失败 从而停止继续执行 所以一般定义js代码的script标签都是放置在body元素的最后(导入js文件的script标签也建议如此) 但是css并非如此 他不会因为语句中出现不认识的标识符而使得样式失效 即使不认识 他依然会为指定元素设置样式
  • script标签导入js文件和script编辑js代码需要分离 这是一种规范 就像css中的外部样式表和文档样式表分离一样
  • 利用jQuery可以提高开发效率
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        function remove(){
            $('ul li')[0].remove()
        }
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
  • 以下案例中 运行到script内容时 由于事先未声明ul、li 导致结果删除按钮失效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $('ul li').remove()
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
  • 解决方法除了说将script标签移至body结尾以外 还可以让script标签延迟执行 待到浏览器窗口加载完毕(即浏览器的内容展示完毕)之后再行执行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        window.onload = function(){
            $('ul li').remove()
        }
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
  • $()可以达到和window.onload类似的效果 在窗口加载完毕以后执行js代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(function(){
            $('ul li').remove()
        })
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
  • $()是一个函数 他的返回值是一个DOM节点封装以后的结果 和js中原生的DOM节点不一样 如此的目的在于兼容不同的浏览器 避免他们的DOM操作不一致引发问题(不同的浏览器对于同一个DOM操作可能会有自己的理解 比如同样的删除操作 chrome可能为remove1 而firefox可能为remove2)
  • 绑定点击事件
    • 方式一(其中 fadeOut方法是jQuery框架提供的)
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>  
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button onclick="remove()">删除</button>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
    function remove(){
        $('ul li').fadeOut()
    }
</script>
</body>
</html>
    • 方式二
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button>删除</button>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
    document.querySelector('button').onclick = function(){
        document.querySelector('ul li').remove()
    }
</script>
</body>
</html>
    • 方式三
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button>删除</button>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
    $('button').on('click', function(){
        $('ul li').fadeOut()
    })
</script>
</body>
</html>
    • 方式四
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button>删除</button>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
    $('button').click(function(){
        $('ul li').fadeOut()
    })
</script>
</body>
</html>
    • 当然 上述四种方式中的匿名函数也可以通过箭头函数代替
    • $函数源自于jquery 因此先导入文件 在编辑js代码

2.基于jQuery的各种插件

  • jQuery UI
    • 你可以利用它提供的draggable函数实现拖拽效果(导入min压缩文件 一般包括js和css文件)
    • 注意：先导入jquery 在导入jquery-ui 因为后者中使用到了前者定义的$函数
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <style>
        div {
            border: 1px red solid;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div>我是一个div</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
    $('div').draggable()
</script>
</body>
</html>
  • jQuery Validation Plugin
    • 我们可以利用该框架完成表单验证
    • 使用时 请导入该框架目录中dist目录的min文件 如果你想要提示信息为中文或者其他非英文语言的话 那么你就需要导入和dist目录下的localization目录
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/crm/list" method="get" id="loginForm">
    <div>用户名 <input type="text" required></div>
    <div>密码 <input type="text" requied></div>
    <div><button type="submit">登录</button></div>
</form>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/localization/messages_zh.min.js"></script>
<script>
    $('#loginForm').valid()
</script>
</body>
</html>

3.bootstrap

bootstrap是非常强大的前端库 他可以帮助开发者开发处简洁、美观、响应式(所谓响应式 其实就是自适应设备屏幕)的页面

  • 如何应用
    • 其实就是查看文档 模仿他的示例 其实就很容易上手了
  • 示例一(美观的按钮)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!-- 比如 你可以利用bootstrap框架实现按钮的美观效果 -->
<button class="btn btn-success">登录</button>
</body>
</html>
  • 示例二(栅格系统 即实现响应式网页的关键点)
    • 将网页宽度均分成12个格子 你可以自己设置所占据的格子数 以及每个组件之间相隔的格子数 即偏移量 同时你也可以设置不

上一篇： 第 12 章 Nginx 日志

下一篇： 如何配置 Nginx 访问和错误日志

推荐阅读