关于java:js-JQUERY

JavaScript，简称 JS
JS 是一门嵌入在浏览器中执行的脚本语言（一段小程序）
次要作用：用于实现网页中的动画成果和实现表单验证
JS 能够运行在服务器端（Node.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 具备跨平台性
Java 语言具备跨平台性, 是因为有 JVM,JVM 跨平台吗?
JVM 不跨平台!
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(' 不让你点, 你非要点~~~')" />

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 中是通过 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);

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

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

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

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

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 的函数相当于 Java 中的办法
就是一个具备性能的代码块, 通过函数名能够重复执行!

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

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

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

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：是一门轻量的、收费开源的 JS 函数库
jQuery 能够极大地简化 JS 代码
jQuery 核心思想: 写的更少, 但做的更多

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

1)能够极大地简化 JS 代码
2) 能够像 CSS 选择器一样获取元素
3) 能够通过批改 CSS 款式来管制页面的成果
4) 能够兼容罕用浏览器(谷歌 / 火狐 / 苹果 / 欧朋)
…

在 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 元素后立刻执行, 此时所有元素都曾经被加载了, 在这个函数中获取任何元素都能够获取到!

只有获取元素的代码是在元素加载后执行, 就能够获取(不论应用什么形式!)

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 按钮被点击了.....");
    }

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

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

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

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

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() — 获取以后元素的父元素, 相似于 js 中的 parentNode 属性
parents() — 获取以后元素的所有的先人元素
$(“:checked”).parent().parent();
$(“:checked”).parents(“tr”)

find() -- 获取以后元素外部指定的后辈元素
$("div").find("span") -- 获取所有 div 元素外部的 span 元素
$("div span") -- 获取所有 div 元素外部的 span 元素

关于java:js-JQUERY

JS 介绍

JS 的特点

JS 的劣势

在 HTML 中引入 JS

JS 的语法

JS 的变量申明

JS 的运算符

JS 的语句

if 分支

switch 分支

循环构造

JS 数组

JS 函数

JS 的 DOM 操作

获取 html 元素

增删改查元素

jQuery 概述

什么是 jQuery

jQuery 劣势

如何引入 jQuery

文档就绪事件函数

jQuery 选择器

根本选择器

层级选择器

jQuery 总结

each 函数

html 元素操作

html 内容及值的操作

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

动画函数

parent()/parents()/find()