4.JavaScript – 堂-DayDayUP

JavaScript

JavaScript 是一门编程语言，浏览器就是JavaScript语言的解释器

意义: 实现动态效果

引用 css

<head>
  <link rel="stylesheet" href="plugins/bootstrap-3.4.1/css/bootstrap.css">
  <link rel="stylesheet" href="plugins/font-awesome-4.7.0/css/font-awesome.css">
</head>

引用 js

<body>
<!-- 推荐放在body尾部 -->
<script src="js/jquery-3.7.1.min.js"></script>
<script src="plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
</body>

注释

HTML的注释
<!-- 注释内容 -->

CSS的注释
/* 注释内容 */

Javascript的注释
// 注释内容
/* 注释内容 */

字符串类型

//声明
var name = "helloworld";
var name = String("helloworld");
//常见操作
var name = "中国联通"
var v1 = name.length;
var v2 = name[0];
var v3 = name.trim();           //去除空白
var v4 = name.substring(0,2)    //切片, 前取后不取

//打印变量
{/* <script type="text/javascript">
    var name = "哈哈";
    var hi = String("helloworld");
    console.log(name);
    console.log(hi);
</script> */}

数组

var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);

//操作
var v1 = [11,22,33,44];

v1[1]
v1[0] = "poker"

//追加
v1.push("联通");      //尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通");       //头部追加 ["联通",11,22,33,44]
v1.splice(索引,0,元素);
v1.splice(1,0,"中国");    //指定位置追加 [11,"中国",22,33,44]

//删除
v1.pop();               //尾部删除
v1.shift();             //头部删除
v1.splice(索引位置,1);
v1.splice(2,1);         //索引为 2 的元素删除 [11,22,44]

//循环
var v1 = [11,22,33,44];
//循环的是索引
for(var index in v1){
    //data=v1[index]
    continue
}

for(var i=0; i<v1.length; i++){
    continue
}

对象(字典)

info = {
    "name":"poker",
    "age":18,
}

info = {
    name:"poker",
    age:18
}

info.age;
info.name = "toker"

info["age"]
info["name"] = "toker";

delete info["age"]

//循环
for(var key in info){
    //key值 data=info[key]
    continue
}

条件语句

if (条件) {
    // ...
}else{
    // ...
}

if (条件) {
    // ...
}else if (条件){
    // ...
}else{
    // ...
}

函数

function func(){
    // ...
}

//执行
func()

DOM

DOM 是一个模块,模块可以对HTML页面中的标签进行操作

DOM可以实现很多功能，但是比较繁琐，页面上的效果：jQuery来实现 / vue.js / react.js

//根据 ID 获取标签
var tag = doucment.getElementById("xx");

//获取标签中的文本
tag.innerText

//修改标签中的文本
tag.innerText = "hhhhhhh";

事件的绑定

function addCityInfo() {
    //1.找到标签
    var userContent = document.getElementById("content");
    //2.获取input中用户输入的内容
    var newString = userContent.value;
    //判断用户输入是否为空
    if (newString.length > 0) {
        //3.创建 li 标签,传入用户输入的内容
        var newTag = document.createElement("li");
        newTag.innerText = newString;
        //4.标签添加到 ul 中
        var parentTag = document.getElementById("city");
        parentTag.appendChild(newTag);
        //5.将 input text 内容清空
        userContent.value = "";
    }else{
        alert("输入不能为空!")
    }
}

JQuery

JQuery是一个JavaScript的第三方模块(第三方类库)

基于JQuery自己开发一个功能
现成的工具依赖JQuery, 例如: Bootstrap动态效果

ID选择器

JQuery操作: $("#txt")

  <h1 id="txt">中国联通</h1>
  <h1>中国联通</h1>
  <h1>中国联通</h1>

样式选择器

JQuery操作: $(".c1")

  <h1 class="c1">中国联通</h1>
  <h1 class="c2">中国联通</h1>
  <h1 class="c3">中国联通</h1>

标签选择器

JQuery操作: $("h1")

  <h1 class="c1">中国联通</h1>
  <h1 class="c2">中国联通</h1>
  <h1 class="c3">中国联通</h1>

层级选择器

JQuery操作: $(".c1 .c2 h1") .c1 下的 .c2 下的a标签

  <div class="c1">
    <div class="c2">
      <h1>123</h1>
    </div>
  </div>

多选择器

JQuery操作: $("#c1,#c2,li")

  <div class="c1">
    <div class="c2">
      <h1>123</h1>
    </div>
  </div>
  <div class="c3">
    <div class="c4">
      <h1>123</h1>
      <li>456</li>
    </div>
  </div>

属性选择器

JQuery操作: $("input[name='n1']")

  <input type="text" name="n1" />
  <input type="text" name="n2" />
  <input type="text" name="n3" />

寻找标签(间接)

JQuery操作:

  $("#c1").prev()           //上一个
  $("#c1")          
  $("#c1").next()           //下一个
  $("#c1").next().next()    //下一个的下一个
  $("#c1").siblings()       //所有的

  <div>
    <div>北京</div>
    <div id="c1">上海</div>
    <div>深圳</div>
    <div>广州</div>
  </div>

找父子

JQuery操作:

  $("#c1").parent()         //父亲
  $("#c1").parent().parent()    //父亲的父亲

  $("#c1").children()           //所有的儿子
  $("#c1").children(".p10") //所有的儿子中寻找class=p10

  $("#c1").find(".p10")     //所有的子孙中寻找class=p10
  $("#c1").children("div")  //所有的儿子中寻找标签 div

  <div>
    <div>
      <div>北京</div>
      <div id="c1">
        <div class="p10">浦东新区</div>
        <div>静安区</div>
        <div>奉贤区</div>
      </div>
      <div>深圳</div>
      <div>广州</div>
    </div>
    <div>
      <div>北京</div>
      <div id="c1">上海</div>
      <div>深圳</div>
      <div>广州</div>
    </div>
  </div>

值的操作

JQuery操作:

  $("#c1").text()               //获取文本内容
  $("#c1").text("abc")      //设置文本内容    
  $("#c2").val()                //获取用户输入的值
  $("#c2").val("嘿嘿嘿")       //设置值

  <div id="c1">内容</div>
  <input type="text " id="c2"/>

事件

<body>
    <ul>
        <li>百度</li>
        <li>谷歌</li>
        <li>搜狗</li>
    </ul>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $("li").click(function(){
            // 点击li标签时,自动执行这和函数
            // $(this) 当前你点击的是哪个标签
            // var text = $(this).text()
            // console.log(text)
            // $("li").text("haha")
            $(this).text("haha")
        });
    </script>
</body>

在JQuery可以删除指定的标签

<script src="js/jquery-3.7.1.min.js"></script>
<script>
    $("li").click(function(){
        // 点击li标签时,自动执行这和函数
        // $(this) 当前你点击的是哪个标签
        $(this).remove();
    });
</script>

当页面框架加载完成之后执行代码,不用等页面所有内容加载完成。

<script src="js/jquery-3.7.1.min.js"></script>
<script>
    $(function() {
        // 当页面的框架加载完成之后，自动执行
        $("li").click(function(){
            // 点击li标签时,自动执行这个函数
            // $(this) 当前你点击的是哪个标签
            // var text = $(this).text()
            // console.log(text)
            // $("li").text("haha")
            $(this).text("haha")
            $(this).remove()
        });
    })
</script>

bootstrap-datetimepicker日期

<script type="text/javascript">
    $(function () {
        //当容器加载完成，对容器调用工具函数
        $("#myDate").datetimepicker({
            language: 'zh-CN', //语言
            format: 'yyyy-mm-dd',//日期的格式
            minView: 'month', //可以选择的最小视图
            initialDate: new Date(),//初始化显示的日期
            autoclose: true,//设置选择完日期或者时间之后，日否自动关闭日历
            todayBtn: true,//设置自动显示为今天
            clearBtn: false//设置是否清空按钮，默认为false
        });
    });
</script>

{% load static %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}" />
<link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
<link rel="stylesheet" href="{% static 'plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css' %}">
<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>

<script>
    $(function () {
        $('#myDate').datetimepicker({
            // format: 'yyyy-mm-dd hh:ii',
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: 'yyyy-mm-dd',
            startDate: '0',
            language: 'zh-CN',
            autoclose: true
        })
    })
</script>