js相关内容，外加一小部分的jquery

js是一种弱类型的语言，没有编译阶段，变量的类型由等号右边决定

js中函数的定义方式

// 第一种
function 函数名(形式参数列表){
    // 函数体
}
// 第二种
函数名 = function(参数列表){
    // 函数体
}

js中全局变量和局部变量

全局变量：在函数体之外声明的变量属于全局变量，全局变量的生命周期是：

浏览器打开时声明，浏览器关闭时销毁，全局变量会一直在浏览器的内存当中，耗费内存空间
局部变量：在函数体当中声明的变量，包含一个函数的形参都属于局部变量，局部变量的生命周期：

函数开始执行时局部变量的内存开辟，函数执行结束后，局部变量的内存空间释放，局部变量的声明周期短
```
// 但是不声明就使用的话，会进行报错
```

js中的数据类型

js有基本类型和引用类型
- 基本类型：Undefined Number String Boolean Null
- 引用类型：Object
Undefined：Undefined只有一个值就是undefined，当一个变量没有手动赋值，系统默认赋值为undefined
Number：整数，浮点数，正数，负数，不是数字（Nan）,无穷大（Infinity）都是Number
- 关于Nan：运算结果本是一个数字，但不是数字会出现Nan。比如除数或者被除数是字符串
- 关于Infinity：当除数为0时，结果为无穷大

String：创建sting的两种方式

// 第一种，直接赋值，这种方式被称为小string，属于原始类型string
var x = 'abc'

// 第二种，使用JS的内置类String,他的父类是Object，这种创建的方式属于大String,属于object类型
var y = new String('abc')

// 无论是小string还是大string他们的属性和方法都是通用的
// 常用属性   length  返回字符串的长度

// 常用方法
// 1. indexOf() 返回某个字符在字符串中出现的第一个下标，没有则返回-1
var x = "abcdefga";
console.log(x.indexOf("e")); // 4
// 2. lastindexOf() 返回某个字符出现的最后一个下标，没有则返回-1
console.log(x.lastIndexOf("a")); // 7
// 3. relpace('old','new') 用new将old替换
// 只替换一个，可以使用正则表达式全部替换
console.log(x.replace("abc", "xxx")); // xxxdefga
// 4. split() 分割字符串，返回一个数组。根据指定的元素进行分割，如果不指定元素则分割每一个字符
var x = "find_student_by_id";
console.log(x.split("_")); // ['find', 'student', 'by', 'id']
// 5. toUpperCase() 转大写
console.log(x.toUpperCase()); // FIND_STUDENT_BY_ID
// 6. toLowerCase() 转小写
console.log(x.toLowerCase()); // find_student_by_id

// ================== 两个重点：注意区别 ==================
// 7. substr() 截取字符串，给一个参数就是从第几个下标截到最后，给两个参数就是从第几个下标开始截，往后截几个
console.log(x.substr(3)); // d_student_by_id
console.log(x.substr(3, 3)); // d_s
// 8. subsring() 截取字符串，给一个参数就是从第几个下标截到最后，给两个参数就是从第几个下标开始截，截到哪一个下标（第二个参数要比第一个参数大）（不包括第二个参数的下标）
console.log(x.substring(3)); // d_student_by_id
console.log(x.substring(3, 7)); // d_st


- Object

```js
// 类的定义和函数的定义一样
// 在使用类时要创建对象，创建的对象存放在堆内存中
var obj(接收变量) = new 类名(实参)


// 常用的属性
//	prototype	作用：给类动态的拓展属性和函数
// 使用方法：类名.prototype.方法名 = function(){}

// 函数
// tostring()
// valueOf()
// toLocaleString()

typeof运算符

可以动态的获取程序运行阶段的数据类型
语法格式：typeof 变量名
typeof运算符的运算结果是以下6个字符串之一，全部是小写的字符串
- "undefined"
- "number"
- "string"
- "boolean"
- "object"
- "function"
js中字符串的比较使用的是”==“号
- 注意：如果一个unll赋值给一个变量，使用typeof运算符查看这个变量的类型是：object

null undefined NaN的区别

数据类型不一致（使用typeof 查看）
- null的数据类型时object
- undefined的数据类型是undefined
- NaN的数据类型是number
null 和 undefined 使用双等号判断的结果是true (null和undefined可以等同)
- 扩展：”==“：是等同运算符，只判断值是否相等
  
  ”===“：是全等运算符，判断值和数据类型是否相等

js的常用事件

任何事件都会有一个事件句柄onXXX,以标签的属性存在

回调函数：函数定义后由其他程序调用的函数称为回调函数

blur：失去焦点
focus：获得焦点
click：鼠标单击
dblclick：鼠标双击
keydown：键盘按下
keyup：键盘抬起
mousedown：鼠标按下
mouseover：鼠标经过
mousemove：鼠标移动
mouseout：鼠标离开
mouseup：鼠标弹起
reset：表单重置
submit：表单提交
change：下拉列表选中项更新，或文本框内容改变
select：文本被选定
load：页面加载完毕

注册事件的两种方式

<!-- 第一种注册事件的方式，使用标签 -->
<input type="button" value="button1" onclick="sayHello()" />
    <!-- 第二种注册事件的方式，使用js注册 -->
    <input type="button" value="button2" id="button2" />

        <script type="text/javascript">
            sayHello = function () {
            alert("hello");
        };

var button2 = document.getElementById("button2");
// 注意，这里不要加小括号
var button2 = document.getElementById("button2");
//button2.onclick = sayHello;
// 可以使用匿名函数
button2.onclick = function () {
    alert("hello，js");
};
</script>

js代码的执行顺序

// 页面加载过程中，注册load事件
// 页面加载完毕之后，onload事件被触发
window.onload = function () {		
    // onload事件执行，在btn这个按钮上注册了onclick事件
    document.getElementById("btn").onclick = function () {
        // 当这个按钮被点击的时候，这个事件才会执行
        document.getElementById("input").type = "checkbox";
    };
};

键盘事件捕捉

常用的键盘事件值

回车键：13
Esc：27
space：32
A：65
a：97

<script>
    window.onload = function () {
    // 给文本框注册键盘按下事件
    var inputElt = document.getElementById("input");、
    // 事件调用时给回调函数传入事件参数(获取当前事件)，可以不写
    inputElt.onkeydown = function (e) {
        // 键盘按下时可通过keyCode获取键盘值
        alert(e.keyCode);
    };
};
</script>

<input type="text" name="" id="input" />

流程控制

循环控制

for

var arr = [1, 8, 6, 7, 9, 2, 22];

// 普通for循环
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
console.log("=================");
// for in
// i是下标
for (let i in arr) {
    console.log(i, arr[i]);
}
// for in如果遍历的是对象的话，"i"就是属性名，
// 可以使用：“类名[i]”进行访问
console.log("=================");
// for of
// e直接代表的是元素
for (let e of arr) {
    console.log(e);
}
console.log("=================");
// forEach循环是从ES5后开始的，forEach被认为是是for的加强版
// 第一个代表的是元素的内容，第二个是下标
// 数组中的方法
arr.forEach((item, index) => {
    console.log(index, item);
});

Array

    <script>
      // 定义一个空数组
      // 第一种方式
      var arr = [1, 9, 4, 58, 78, 16];
      // 第二种方式
      // var arr = new Array();
      // push() 向数组中的末尾添加元素
      arr.push(3);
      // unshift()  像数组中添加一个或多个元素
      arr.unshift(100, 878);
      // pop()    删除最后一个元素,并将删除的值返回
      r = arr.pop();
      // shift      删除第一个元素，并将删除的值返回
      r = arr.shift();
      arr.sort((a, b) => {
        return a - b;
      });

      // slice(start,end)  从数组中提取指定范围的元素并返回一个新数组，包括start下标，不包括end
      r = arr.slice(2, 5);
      console.log(r);
      // filter    根据指定条件过滤掉数组中符合条件的元素，返回一个新数组
      r = arr.filter((a) => {
        return a > 50;
      });
      console.log(r);
      console.log(arr);
    </script>

innerHTML和innerText属性的区别

innerHtml和innerText属性都可以向div等标签中添加内容

如果添加的内容是html标签，innerHtml会进行解析后添加，innerText会将添加的html标签当成字符串添加到页面上

<div id="div1"></div>

    <script>
      window.onload = function () {
        var divElt = document.getElementById("div1");
        divElt.innerHTML = '<font color = "red">innerHTML</font>';
        // divElt.innerText = '<font color = "red">innerHTML</font>';
      };
    </script>

简单的表单验证

<script>
      window.onload = function () {
        // 对用户名进行验证
        var user = document.getElementById("username");
        var userMsg = document.getElementById("usermsg");

        // 失去焦点验证
        user.onblur = function () {
          username = user.value.trim();
          if (username) {
            if (username.length < 6 || username.length > 14) {
              userMsg.innerText = "用户名必须在6-14位之间";
            }
          } else {
            userMsg.innerText = "用户名不能为空";
          }
        };
        user.onfocus = function () {
          if (userMsg.innerText != "") {
            userMsg.innerText = "";
            user.value = "";
          }
        };
        // 对邮箱进行验证
        var emailElt = document.getElementById("email");
        emailElt.onblur = function () {
          email = emailElt.value;
          var emailRe =
            /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          var flag = emailRe.test(email);
          var emailmsg = document.getElementById("emailmsg");
          if (flag) {
            emailmsg.innerText = "";
          } else {
            emailmsg.innerText = "邮箱地址不合法";
          }
        };
        emailElt.onfocus = function () {
          var emailmsg = document.getElementById("emailmsg");
          if (emailmsg.innerText != "") {
            emailmsg.innerText = "";
            emailElt.value = "";
          }
        };
        // 对密码进行验证
        var pwd = document.getElementById("pwd2");
        var pwdmsg = document.getElementById("pwdmsg");
        pwd.onblur = function () {
          var pwd1 = document.getElementById("pwd1").value;
          pwd2 = pwd.value;
          if (pwd1 != pwd2) {
            pwdmsg.innerText = "两次密码不一致";
          } else {
            pwdmsg.innerText = "";
          }
        };
        pwd.onfocus = function () {
          if (pwdmsg.innerText != "") {
            pwd.value = "";
            document.getElementById("pwd1").value = "";
            pwdmsg.innerText = "";
          }
        };
        document.getElementById("pwd1").onfocus = function () {
          if (pwdmsg.innerText != "") {
            pwd.value = "";
            document.getElementById("pwd1").value = "";
            pwdmsg.innerText = "";
          }
        };
        // 提交验证
        document.getElementById("btn").onclick = function () {
          // 由计算机执行事件，避免第一次运行程序直接提交成功
          user.focus();
          user.blur();
          email.focus();
          email.blur();
          pwd.focus();
          pwd.blur();

          if (
            userMsg.innerText == "" &&
            emailmsg.innerText == "" &&
            pwdmsg.innerText == ""
          ) {
            document.getElementById("userForm").submit();
          } else {
            alert("存在不合法的数据，不允许提交");
          }
        };
      };
    </script>

复选框的全选和取消全选

<script>
      window.onload = function () {
        var hobbyElt = document.getElementById("hobby");
        // 获取所有的复选框，根据name属性
        var aihaos = document.getElementsByName("aihao");

        hobbyElt.onclick = function () {
          // 获取第一个复选框的选中状态，将后续的复选框设置为第一个复选框的状态
          for (var i = 0; i < aihaos.length; i++) {
            // 将所有的复选框设置为第一个复选框的状态
            aihaos[i].checked = hobbyElt.checked;
          }
        };

        // 给每一个复选框添加单击事件
        for (var i = 0; i < aihaos.length; i++) {
          aihaos[i].onclick = function () {
            // 每次单击就计算所有选中的复选框
            var countChecked = 0;
            for (var i = 0; i < aihaos.length; i++) {
              if (aihaos[i].checked) {
                countChecked++;
              }
            }
            // 如果选中的复选框和复选框的个数一致，则全选复选框设为选中状态
            hobbyElt.checked = aihaos.length == countChecked;
          };
        }
      };
    </script>


 <body>
    <input type="checkbox" id="hobby" /><br />
    <input type="checkbox" name="aihao" value="smoke" />抽烟<br />
    <input type="checkbox" name="aihao" value="dring" />喝酒<br />
    <input type="checkbox" name="aihao" value="tt" />烫头<br />
  </body>

选择下拉列表的value

 <script>
      window.onload = function () {
        var selectElt = document.getElementById("select");
        selectElt.onchange = function () {
          value1 = selectElt.value;
          alert(value1);
        };
      };
    </script>

  <body>
    <select id="select">
      <option selected disabled>-----请选择省份-----</option>
      <option value="001">河北</option>
      <option value="002">河南</option>
      <option value="003">山东</option>
      <option value="004">山西</option>
    </select>
  </body>

BOM操作

有哪些方式可以往服务器发请求
- form表单
- 超链接
- window.location
- document.location
- window.open('xxx')
- 直接在浏览器地址栏输入url
只有form提交的数据是动态的

JSON

是一种数据交换格式，最主要的作用是进行数据交换

轻量级，体积小，易解析

将json字符串解析并放入到table中

<style>
      table th,
      tbody tr td {
        border: 1px black solid;
      }
    </style>
    <script>
        // 构造json字符串
      var userObj = {
        count: 3,
        users: [
          { userid: 111, username: "zhangsan", sol: "20000" },
          { userid: 112, username: "zhangsan", sol: "20000" },
          { userid: 113, username: "zhangsan", sol: "20000" },
        ],
      };

      window.onload = function () {
        document.getElementById("btn").onclick = function () {
          var tbody = document.getElementById("tbody");
          html = "";
          var users = userObj.users;
            // 解析json字符串并构建html对象
          for (var i = 0; i < users.length; i++) {
            var user = users[i];
            html += "<tr>";
            html += "<td>" + user.userid + "</td>";
            html += "<td>" + user.username + "</td>";
            html += "<td>" + user.sol + "</td>";
            html += "</tr>";
          }
            // 将html添加到指定标签中进行展示
          tbody.innerHTML = html;
          document.getElementById("count").innerText = userObj.count;
        };
      };
    </script>


<body>
    <h3>员工信息</h3>
    <button id="btn">员工信息展示</button><br />
    <hr />
    <table>
      <tr>
        <th>员工id</th>
        <th>员工姓名</th>
        <th>员工薪资</th>
      </tr>
      <tbody id="tbody"></tbody>
    </table>
    总共有<span id="count"></span>条信息
  </body>

js的常用方法
- JOSN.parse() 将字符串转为js对象，一般是将json格式的字符串转为js对象，为了更加方便的操作数据
- JSON.stringify() 将js对象转为字符串，一般是将json对象转为字符串，为了更加方便的存储数据

jQuery的学习

是一个js的库，里面封装了大量的函数，为了简化js的操作，更加方便的操作dom对象

jQuery的特点
- 免费，开源，轻量
- 兼容市面上大多浏览器
- 能够处理html/jsp/xml/css/dom/事件
- 能提供异步ajax请求
使用jquery语法表示的对象叫做jquery对象，有一点需要特别注意，jquery表示的对象都是数组，数组中的每个元素是dom对象
dom对象和jquery对象可以相互转换，目的是使用对象的属性或者函数
dom转为jquery
- 语法：$(dom对象)
jquery转为dom
- 语法：从数组中拿到数据即可，可以使用遍历的方式或者下标的方式

选择器

用来定位dom对象

id选择器
- $("#id值")
class选择器
- $(".class值")
标签选择器
- $("标签名")
表单选择器注意，表单选择器针对的是type的属性值，比如input标签的type属性
- $(":type属性值")
  - $(":text") 选择所有的单行文本框
  - $(":password") 选择所有的密码框

过滤器

对已经定位的Dom对象进行再次进行筛选，选择出符合条件的对象

过滤器不能单独使用，必须和选择器一起使用

数组中第一个dom对象
- $("选择器:first")
数组中最后一个dom对象
- $("选择器:last")
选择数组中指定的dom对象
- $("选择器:eq(下标)")
选择数组中小于指定下标的dom对象
- $("选择器:lt(下标)")
选择数组中大于指定下标的dom对象
- $("选择器:gt(下标)")

表单属性过滤器

根据表单状态来定位dom对象

选择可用的文本框
- $(":text:enabled")
选择不可用的文本框
- $(":text:disabled")
复选框选中的元素
- $(":checkbox:checked")
获取下拉列表的选中值
- $("select>option:selected")
- 选择器>option:selected

绑定事件

定义元素监听事件
- $(选择器).监听事件名称(处理函数)
on进行事件绑定
- $(选择器).on("事件名称"，事件处理函数)

常用的函数

val() 用来获取标签属性的value值，如果带参数的话就是用来设置value的值
text() 用来获取所有标签的文本值，比如span标签的内容，注意：这个函数会将获取到的所有文本值进行拼接 也可以使用带参数的用来设置文本值
attr() 用来改变标签的属性值
- $("选择器")attr('text','button') 将某个文本转为按钮
remove()
- $("选择器").remove() 将数组中所有Dom对象及其子对象一并删除
empty()
- $("选择器").empty() 将数组中所有Dom的子节点和内容一并删除
append()
- $("选择器").append() 为数组中所有dom对象添加子对象
html()
- $("选择器").empty() 设置或返回元素的内容

each() 循环数组，对数组中的每个元素都会执行自定义的处理函数。有两种语法格式

$.each(循环数组，function(index,ele){})

var arr = [1, 2, 3, 4];
$.each(arr, function (index, ele) {
    console.log(index, ele);
});

jquery对象.each(function(index,ele){})

var $li = $("ul li");
$li.each(function (index, ele) {
    console.log(index, $(ele).text());
});

<ul>
    <li>111</li>
	<li>222</li>
	<li>333</li>
</ul>

each函数循环json

var json = { username: "zhangsan", pwd: "123456" };
$("#btn7").click(function () {
    $.each(json, function (index, ele) {
        alert("key = " + index + ",value =" + ele);
    });
});

mouseleave和mouseout的区别

mouseleave仅在指针离开元素时被触发，不冒泡

   $(function () {
      // 当鼠标划过div1或者div2时，div1并不会变色，只有鼠标离开div1时，div1才会变色
      const div1 = document.getElementById("div1");
      div1.addEventListener("mouseleave", (event) => {
        event.currentTarget.style.backgroundColor = "blue";
        setTimeout(
          () => (event.currentTarget.style.backgroundColor = ""),
          1000
        );
      });
    });

  <body>
    <div id="div1" style="height: 100px; width: 100px; border: 1px solid">
      <div
        id="div2"
        style="height: 50px; width: 50px; margin: 10px auto; border: 1px dashed"
      ></div>
    </div>
  </body>

mouseout 在指针离开元素或进入该元素的子元素时均会被触发，冒泡

// 从 div1 移至 div2 会变蓝是因为考虑到 div2 遮挡了 div1 的可视区域，理应触发 mouseout 
/* 从 div2 移动至 div1 会触发变色则是由于冒泡机制。鼠标离开 div2 的边界时会产生一个 mouseout 事件。由于 div2 本身没有绑定任何事件处理程序，因此事件冒泡至 div1，并触发 div1 的事件处理程序。*/
$(function () {
      // 当鼠标从div1中移出或者进入到div2中，div1都会变色
      const div1 = document.getElementById("div1");
      div1.addEventListener("mouseout", (event) => {
        event.currentTarget.style.backgroundColor = "blue";
        setTimeout(
          () => (event.currentTarget.style.backgroundColor = ""),
          1000
        );
      });
    });



  <body>
    <div id="div1" style="height: 100px; width: 100px; border: 1px solid">
      <div
        id="div2"
        style="height: 50px; width: 50px; margin: 10px auto; border: 1px dashed"
      ></div>
    </div>
  </body>

ajax函数

AJAX 是一种在无需重新加载整个网页的情况下，通过异步加载数据或与服务器进行通信的场景。

语法：$.ajax({}) 大括号中需要传一些参数
- url 请求的地址
- type 请求的方式，可以是GET、POST 不区分大小写，默认为get方式
- data 请求的参数和参数值，一般是json格式的字符串
- async 默认为true,表示异步请求
- contentType 表示从浏览器发送至服务器的数据类型，可以不写
- dataType 表示期望从服务器端返回的数据格式，有xml、html、text、json
- success 是一个函数，返回从服务器获取的数据作为参数传递进来（data）
- error 是一个函数，表示请求发生错误时执行的函数（也会有参数（xhr, status, error））
```
$.ajax({
    url: "http://httpbin.org/post",
    type: "post",
    data: {
        username: "张三",
        pwd: "123",
    },
    dataType: "json",
    success: function (response) {
        console.log(response);
    },
```

上一篇个人自用python知识点

下一篇MySQL的再学习

本文作者：愿风带走思绪

本文链接：https://www.cnblogs.com/lsixu/p/18294922

posted @ 2024-07-10 20:12 愿风带走思绪阅读(15) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

lsixu