关于java:js-JQUERY

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 元素