Python3项目初始化10–>JS基础、dom、jquery、database

29、JS基础
var定义变量
数字字符串和Python一样
布尔值true和false首字母不大写
逻辑判断if () {} else if() {} else{}

借助浏览器console执行操作，见截图。

 Console使用操作入门

var age = 30
age
var name=’kk’
name
var sex = 1
[1,2,3,4,5]
console.log(1)
if(sex) {console.log(‘男’)}
if(!sex) {console.log(‘男’)} else {console.log(‘女’)}
var score = 60
if (score>=80) {console.log(‘优秀’);} else if(score>=60) {console.log(‘及格’)} else {console.log(‘加油’)}
sum = 0
for(var i=0;i<=100;i+=1) {sum +=i}
sum
names = [‘kk’, ‘woshishui’]
names[1]
names[0] = ‘test’

alert(‘删除成功’)
prompt(‘请输入您的年龄： ‘)
confirm(‘确认删除吗？ ‘)

function say_hello() {alert(‘hello…’)};
say_hello()
function say_hello(name) {alert(‘hello…’ + name)};
say_hello(‘test’)
say_hello()

30、JS基础-dom jquery bom
DOM操作：具体指标跟网页源代码对应起来。
获取元素
document.getElementById
document.getElementByTagName
document.getElementByClassName
document.getElementByName
获取/修改标签
attr input->value
content div->content
onclick

修改样式：click，点击的时候做一个事情，用一个函数表示。
document.getElementsByTagName(“button”)[0].addEventListener(‘click’, function() {alert(5)})

jQuery js库
选择器
id jQuery(‘#id’)
tag jQuery(‘tag’)
class jQuery(‘.class’)
attr jQuery(‘[attr=value]’)

属性 attr val addClass/removeClass

内容

jQuery是一个库，需要导入。
Bootstrap对jQuery版本有要求，需要匹配下。
导入jQuery库：https://v3.bootcss.com/getting-started/
在login.html页面演示：
<!– jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) –>
<script type=”text/javascript”src=”http://code.jquery.com/jquery-1.4.1.min.js”></script>
</body>
</html>

刷新页面：window.location.reload()

跳转页面：window.location.replace(‘/user/login’)

31、JS基础-databases
组件标签：https://v3.bootcss.com/components/
组件引入
JavaScript 插件：https://v3.bootcss.com/javascript/
databases分页组件。
下载插件：https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js
下载datatable：http://datatables.net/releases/DataTables-1.10.21.zip
下载sweettalert：https://github.com/t4t5/sweetalert/archive/refs/tags/v1.1.0.zip
下载jQuery：https://code.jquery.com/jquery-1.12.4.js //https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js
开始创作。
改造index.html配置，静态文件自行准备。
<title>用户管理</title>
<link rel=”stylesheet” type=”text/css” href=”{% static ‘bootstrap-3.4.1-dist/css/bootstrap.min.css’ %}” />
<link rel=”stylesheet” type=”text/css” href=”{% static ‘sweetalert-1.1.0/dist/sweetalert.css’ %}” />
<link rel=”stylesheet” type=”text/css” href=”{% static ‘DataTables-1.10.21/media/css/jquery.dataTables.min.css’ %}” />
<link rel=”stylesheet” type=”text/css” href=”{% static ‘DataTables-1.10.21/media/css/dataTables.bootstrap.min.css’ %}” />
<link href=”../../static/navbar-fixed-top.css” rel=”stylesheet”>
</head>
…
<table id=”table_user” class=”table table-stripe table-bordered table-hover table-condensed”>
…
</div> <!– /container –>
<script type=”text/javascript”src=”{% static ‘jquery/jquery-1.12.4.js’ %}”></script>
<script type=”text/javascript”src=”{% static ‘bootstrap-3.4.1-dist/js/bootstrap.min.js’ %}”></script>
<script type=”text/javascript”src=”{% static ‘sweetalert-1.1.0/dist/sweetalert.min.js’ %}”></script>
<script type=”text/javascript”src=”{% static ‘DataTables-1.10.21/media/js/jquery.dataTables.js’ %}”></script>
<script type=”text/javascript”src=”{% static ‘DataTables-1.10.21/media/js/dataTables.bootstrap.min.js’ %}”></script>
<script>
jQuery(document).ready(function () {
jQuery(‘#table_user’).DataTable();
})
</script>
</body>
访问效果：可以在前端操作，查询搜索，分页，显示分页数量。如下截图。备份“cmdb-8-28.rar”。

 验证ok。