标签：jquery 10 console log -- https jQuery com hello
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。
标签：jquery,10,console,log,--,https,jQuery,com,hello 来源： https://www.cnblogs.com/sunnyyangwang/p/16634348.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。