js JQUERY

Posted 2021-09-14 PearSakura

JS介绍

​ javascript，简称JS
​ JS是一门嵌入在浏览器中执行的脚本语言（一段小程序）
​ 主要作用：用于实现网页中的动画效果和实现表单验证
​ JS可以运行在服务器端（Node.js）

JS的特点

​ JS是一门直译式的语言（JS不需要编译,执行的就是源代码）
​ JS是一门基于对象的语言（JS可以通过某些机制模拟面向对象）
​ JS是一门弱类型的语言（Java是强类型）
​ Java: String str = "Hello World";
​ JS: var str = "Hellow World";
​ str = 100;
​ str = true;
​ str = [88,123,111];
​ alert(str);
​

JS的优势

​ JS具有良好的交互性
​ JS具有一定的安全性(运行在浏览器内部)
​ JS具有跨平台性
​ Java语言具有跨平台性,是因为有JVM,JVM跨平台吗?
​ JVM不跨平台!
​ JS语言具有跨平台性,是因为有浏览器,浏览器跨平台吗?
​ 浏览器不跨平台!

在html中引入JS

方式一: 在head或者body内部可以添加一个script标签

    在script标签内部可以直接书写JS代码

<!-- 方式一: 在script标签内部直接书写JS代码
    type:可以省略,指定语言类型是JS -->
<script type="text/javascript">
    // alert("Hello JS...111"); //弹出一个警告框
    console.log("Hello JS...111"); //输出内容到浏览器的控制台
</script>

方式二: 在head或者body内部可以添加一个script标签

在script标签通过src属性,可以引入外部的JS文件

<!-- 方式二: 引入外部的JS文件 -->
<script src="js/demo.js"></script>

需要注意的是,第二种方式script标签内部不要写JS代码,写了也不会执行!
<script src="js/demo.js">
    console.log("Hello JS...333");//不会执行!
</script>

方式三:将JS代码写在标签上

<!-- 方式三: 将JS代码写在html中的标签上 -->
<input type="button" value="别点我~~~"
    onclick="alert(\'不让你点,你非要点~~~\')" />

JS的语法

1、JS的注释

// 单行注释
/* 多行注释 */

2、JS数据类型
2.1.基本数据类型

1)数值类型(number)
    在JS的底层,所有的数值都是浮点型
    但在处理和显示的过程中,如果可以显示为整型,会自动的在整型和浮点型之间进行转换
    Infinity(正无穷大)
    -Infinity(正无穷大)
    NaN(Not a Number)非数值
    

2)字符串类型(string)
    JS中的字符串类型是基本数据类型,字符串可以使用双引号或者单引号引起来
    例如:
        var str1 = "Hello JS";
        var str2 = \'Hello JS\';
        console.log( typeof str1 ); // string
        console.log( typeof str2 ); // string
    JS中提供了字符串的包装对象--String
        var str3 = new String("Hello JS");
        console.log( typeof str3 ); // object
    str1和str2也可以当做对象使用,在使用时,和str3没有什么区别
    
3)布尔类型(boolean)
    布尔类型值: true 和 false

4)undefined
    undefined: 表示声明了变量,但是没有为变量赋值,该变量的值就是undefined
    
5)null
    null: 表示空值,可以作为函数的返回值,表示函数返回的是一个空的对象

2.2.复杂数据类型

对象,数组,函数

JS的变量声明

​ JS中是通过var关键字声明变量,通过var声明的变量不区分类型,可以指向任意的数据
​ var s1 = "Hello World";
​ s1 = 123;
​ s1 = false;
​ s1 = [];
​ s1 = function(){}

JS中有自动断句功能,即使一行后面不加分号,也可以正常执行,但是建议加上分号;
JS中如果重复声明变量,也不会报错, 因为JS中声明一个已存在的变量不会生效;
    var x = "abc"; //var x; x = "abc";
    var x = 123; //var x; x = 123;
    alert(x);

JS的运算符

​ 算术运算符: +，-，*，/，%，++，--
​ 赋值运算符: =，+=，-=，*=，/=，%=
​ 比较运算符: ==，!=，>，>=，<，<=
​ 位运算符: & ， |
​ 逻辑运算符: && ，|| ( false && 表达式, true || 表达式 )
​ 前置逻辑运算符: ! (not)
​ 三元运算符: 表达式 ? 表达式1 : 表达式2
​ 。。。
​

JS的语句

if分支

​

if(){...}
    if(){...}else{...}
    if(){...}else if{...}else{...}

switch分支

​

switch(){
        case opt1:
            代码块;
            break;
        case opt2:
            代码块;
            break;
        ...
        default:
            代码块;    
    }

​

循环结构

    for(){}
    while(){}
    do while(){}

​

JS数组

​ JS的数组声明方式:
​ //声明一个空数组,长度为零
​ var arr1 = [];
​ //声明一个具有初始值的数组
​ var arr2 = [100,"abc",false,new Date()];
​ //声明一个空数组,长度为零
​ var arr3 = new Array();
​ //声明一个具有初始值的数组
​ var arr4 = new Array(100,"abc",false,new Date());
​ //指定长度的数组(只有一个参数并且是数值,这个数值是长度)
​ var arr3 = new Array(10);

JS数组的特点:
    1) JS中的数组可以存储任意类型的数据
    2) JS数组的长度可以被任意改变

JS函数

​ JS的函数相当于Java中的方法
​ 就是一个具有功能的代码块,通过函数名可以反复执行!

    声明方式1:
        function 函数名([参数列表]){
            函数体...
        }

​

​

声明方式2:
    var 变量/函数名 = function([参数列表]){
        函数体...
    }

JS的DOM操作

​ DOM: Document Object Model,文档对象模型
​ 其实就是JS专门为操作html元素所提供的一套API。
​

获取html元素

1) document.getElementById(id值);
    -- 通过元素的id属性值获取一个html元素，返回值就是这个元素所对应的JS对象

2) document.getElementsByTagName(标签名);
-- 通过元素名称,获取该名称对应的所有元素组成的数组,可以通过数组[下标]的形式获取其中的每一个元素,也可以通过循环遍历。

3) document.getElementsByClassName(class值);
-- 通过元素的class属性值,获取该class值对应的所有元素组成的数组,可以通过数组[下标]的形式获取其中的每一个元素,也可以通过循环遍历。

4) ele.parentNode -- 获取当前元素的上级元素(父元素)

5) ele.innerHTML -- 获取元素的所有内容, 或者设置元素的内容(原内容会被覆盖)

6) ele.value -- 获取或设置表单项元素的value值

增删改查元素

1)创建一个html元素
document.createElement(元素名/标签名);
-- 创建一个指定名称的元素,返回值就是这个创建的元素所对应的JS对象
2)添加子元素
parentEle.appendChild( childEle );
-- 父元素调用方法添加一个子元素到父元素内部

3)删除子元素
parentEle.removeChild( childEle )
-- 父元素调用方法删除内部的子元素

jQuery概述

什么是jQuery

​ jQuery：是一门轻量的、免费开源的JS函数库
​ jQuery可以极大地简化JS代码
​ jQuery核心思想: 写的更少,但做的更多

轻量的：一个框架或者技术对我们项目的侵入程度是非常低的（反过来说，我们的项目或代码对该技术的依赖程度是非常低的）

jQuery优势

​ 1)可以极大地简化JS代码
​ 2)可以像CSS选择器一样获取元素
​ 3)可以通过修改CSS样式来控制页面的效果
​ 4)可以兼容常用浏览器(谷歌/火狐/苹果/欧朋)
​ ...

如何引入jQuery

​ 在head或body标签内部添加script标签,通过script标签引入jQuery的函数库文件
​ <!-- 引入jQuery的函数库文件 -->

    <script src="js/jquery-1.8.3.min.js"></script>

在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败

文档就绪事件函数

​ 文档就绪事件函数: 该函数会在浏览器加载完所有的html元素后立即执行

JS提供的文档就绪函数:
    window.onload = function(){
        //这里的代码会在浏览器加载完所有的html元素后立即执行
    }

jQuery提供的文档就绪函数:
简写形式:
$(function(){
    //这里的代码会在浏览器加载完所有的html元素后立即执行
})
完整写法:
$(document).ready(function(){
    //这里的代码会在浏览器加载完所有的html元素后立即执行
});

3、什么时候该用文档就绪事件函数?
如果要获取元素,获取元素的代码执行时,元素还没有被浏览器加载,肯定是获取不到的!
此时,可以将获取元素的代码放在文档就绪事件函数中,因为这个函数是在浏览器加载完所有的html元素后立即执行,此时所有元素都已经被加载了,在这个函数中获取任何元素都可以获取到!

只要获取元素的代码是在元素加载后执行,就可以获取(不管使用什么方式!)

jQuery选择器

基本选择器

​ 1)元素名选择器
​ $("div") -- 匹配所有的div元素
​ $("span") -- 匹配所有的span元素
​ 2)class选择器
​ $(".mini") -- 匹配所有class值为mini的元素
​ $("span.mini") -- 匹配所有class值为mini的span元素
​ 3)ID选择器
​ $("#one") -- 匹配id值为one的元素
​ 4)多元素选择器
​ $("div,span,.mini,#one") -- 匹配所有的div,所有的span,以及所有class为mini,以及id值为one的元素
​

层级选择器

1)后代选择器

$("div span") -- 匹配所有div内部的span元素
$("#box1 input") -- 匹配id值为box1元素内部的所有input元素

2)相邻兄弟选择器

相邻兄弟:如果两个元素是紧挨着,并且具有相同的父元素,这两个元素就是相邻兄弟
可以通过相邻兄弟选择器选中后面紧邻的兄弟元素

    $("#two+span") -- 匹配id值为two的元素后面紧邻的span兄弟元素
    $("#two").next("span") -- 匹配id值为two的元素后面紧邻的span兄弟元素
    $("#two").prev("span") -- 匹配id值为two的元素前面紧邻的span兄弟元素
    $("#two").nextAll() -- 匹配id为two的元素后面所有的兄弟元素
    $("#two").nextAll("div") -- 匹配id为two的元素后面所有的div兄弟元素
    $("#two").prevAll("div") -- 匹配id为two的元素前面所有的div兄弟元素
    $("#two").siblings("div") -- 匹配id为two的元素前、后所有的div兄弟元素

3、基本过滤选择器

根据下标匹配元素:

    $("div:eq(n)") -- 表示匹配所有div中的第n+1个div元素
    $("div:first") -- 匹配所有div中的第一个div元素
    $("div:eq(0)") -- 匹配所有div中的第一个div元素
    $("div:last") -- 匹配所有div中的最后一个div元素
    $("div:eq(-1)") -- 匹配所有div中的最后一个div元素

4、表单选择器

    $(":input") -- 匹配所有的表单项元素(包括input、select、textarea、button)
    $(":text") -- 匹配所有普通文本输入框
    $(":password") -- 匹配所有密码输入框
    $(":radio") -- 匹配所有单选框
    $(":checkbox") -- 匹配所有复选框

$(":radio:checked") -- 匹配所有被选中的单选框
$(":checkbox:checked") -- 匹配所有被选中的复选框

5、补充:

JS为b1按钮绑定点击事件
    document.getElementById("b1").onclick = function(){
        alert("b1按钮被点击了...");
    }
Jquery
    $("#b1").onlick = function(){
    alert("b1按钮被点击了.....");
    }

jQuery总结

​

each函数

​ each函数: 对前面选择所选中的元素进行遍历,每次从中获取一个元素,并调用其中的function
​ each中的function函数:每次each函数从选择器中获取元素后都会调用该函数,
​ 可以接收两个参数: 第一个参数是当前遍历的元素的下标;
​ 第二个参数是当前正在遍历的元素(JS对象);
​

    $("table tr").each(function(i,ele){
        //...
    })

html元素操作

​ (1)创建html元素
​

        $("<div></div>") -- 创建一个div元素,返回一个jQuery对象
        $("<div>这是一个div元素</div>") -- 创建一个包含内容的div元素,返回一个jQuery对象
        $("<input type=\'text\'/>") -- 创建文本输入框,返回一个jQuery对象

​

(2)添加子元素 -- append()
    $("body").append("<table><tr><td>这是一个td元素</td></tr></table>");
    -- 往body中添加一个表格元素
    
    var $div = $("<div>这是一个div元素</div>");
    $("body").append( $div ) -- 往body中添加一个div元素
    
(3)删除元素 -- remove()
    $("div").remove() -- 删除所有匹配的div元素

(4)替换元素 -- replaceWith()
    $("div").replaceWith("<p>我是来替换div的p元素!!</p>")

​

html内容及值的操作

​ <div>div111</div>
​ <input type="text"/>
​ <select>...</select>
​

html()函数 -- 获取元素的所有内容(包裹在开始标签和结束标签中的所有内容)
    如果通过选择器匹配了多个元素,只能获取第一个元素的内容
    html()函还可以设置元素的内容,如果通过选择器匹配了多个元素,则会给所有元素设置内容
    -- 在js中对应的是innerHTML属性
    
text()函数 -- 获取元素中的所有文本内容(值获取文本,不获取标签)
    如果通过选择器匹配了多个元素,可以将所有元素内部的文本都返回
    text()函数还可以为元素的设置文本内容(只能设置文本)
    -- 在js中对应的是innerText属性(这个属性在部分浏览器中不兼容)

val()函数 -- 获取表单项元素的value值 或者是 为表单项元素设置value值
    表单项元素: input/select/option/textarea

​

html元素属性或者css属性操作

​ prop()函数 -- 获取元素的某一个属性值,或者为元素设置属性值
​ attr()函数 -- 可以获取元素的属性值,或者为元素设置属性值
​ prop()和attr()的区别:
​ (1) prop函数是在jquery1.6版本之后才出现,用于获取或设置元素的属性(固有属性)值,
​ 比如: input元素的id,class,name,type等属性都是固有属性
​ 比如: 为input指定一个aaa属性,这个叫做自定义属性
​ attr函数是在jquery1.6版本之前就有的函数,用于获取或设置元素的属性(自定义属性)值
​ css()函数 -- 可以获取或设置元素的css样式

动画函数

​ show() -- 设置元素为显示状态, 等价于 css("display", "block|inline");
​ hide() -- 设置元素为隐藏状态, 等价于 css("display", "none");
​ toggle() -- 切换元素的显示状态, 如果元素本身是显示的,则会变成隐藏状态,如果元素本身是隐藏的,则会变成显示状态
​

slideToggle() -- 切换元素的显示状态, 如果元素本身是显示的,则会变成隐藏状态,如果元素本身是隐藏的,则会变成显示状态

parent()/parents()/find()

​ parent() -- 获取当前元素的父元素, 类似于js中的 parentNode属性
​ parents() -- 获取当前元素的所有的祖先元素
​ $(":checked").parent().parent();
​ $(":checked").parents("tr")
​

find() -- 获取当前元素内部指定的后代元素
$("div").find("span") -- 获取所有div元素内部的span元素
$("div span") -- 获取所有div元素内部的span元素