JS(JavaScript)和JQuery基本使用
JS
JS:
今天的JavaScript：承担更多责任
2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。
2004年JavaScript命运开始改变了，那一年谷歌公司，开始带头使用Ajax技术了，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。
007年乔布斯发布了iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。
JavaScript在移动页面中，也是不可或缺的。并且这一年，互联网开始标准化，按照W3C规则三层分离，人们越来越重视JavaScript了。
2011年，Node.js诞生，使JavaScript能够开发服务器程序了。
今天，H5工程师是绝对的吃香，能够和iOS、Android工程师比肩，毫不逊色的。
JS：
1、直接嵌入HTML页面。
2、由浏览器解释执行代码，不进行预编译。
JS：解释型语言
Java:编译型语言
JS不区分单引号和双引号。
直接量(常量) 'abc' 12
也称为“字面量”，就是看见什么，它就是什么。
简单的直接量有2种：数字、字符串。
数值的直接量的表达非常简单，就是写上去就行了，不需要任何的符号
alert(886); //886是数字，所以不需要加引号。
字符串，就是人说的话，比如单词、句子，它们不是数字。一定要加上引号。
变量
初中的时候，学习了一个学科“代数”，x、y、z、a、b、c。
计算机的程序中，也是有这样的量，就是用字母来表示数字、字符串等其他东西的，称为“变量”。
var num = 100;
variable
这就是一个固定的写法，就是语法。也就是说，我们使用var来定义一个变量。
int num = 100;
变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号。
起有意义的名字，最重要一点就是“见名知意”。
DOM介绍：
dom：document object model文档对象模型
dom技术在JS里面作用：JS语言和Html/Xml标签之间沟通的一个桥梁。
为了方便javascript语言通过dom操作html比较方便，
把html标签的内容划分为各种节点：
文档节点(document)
元素节点 也叫标签 getElementsByTagName
文本节点
属性节点 type=”text” name=”username”
注释节点
dom就是学习利用JS如何实现对Html标签增删改查。
documnet：是页面中的内置对象，内置对象简单理解就是已经new好的一个对象，对象的名字就叫document。
元素节点的获取：
document.getElementById( id属性值);
document.getElementsByTagName("标签名")；
练习：
写一个计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="input1"/><br/>
<input type="text" id="input2"/><br/>
<button onclick="clickAdd()">加</button>
<button onclick="clickSub()">减</button>
<button onclick="clickMul()">乘</button>
<button onclick="clickDiv()">除</button><br/>
<input type="text" id="output1"/><br/>
<script type="text/javascript">
var inputValue1
var inputValue2
var outputObj
function clickGet(){
inputValue1 = parseFloat(document.getElementById('input1').value)
inputValue2 = parseFloat(document.getElementById('input2').value)
outputObj = document.getElementById('output1')
}
function clickAdd(){
clickGet()
outputObj.value=inputValue1+inputValue2
}
function clickSub(){
clickGet()
outputObj.value=inputValue1-inputValue2
}
function clickMul(){
clickGet()
outputObj.value=inputValue1*inputValue2
}
function clickDiv(){
clickGet()
outputObj.value=inputValue1/inputValue2
}
</script>
</body>
</html>
JS数据类型
null、undefined
变量的声明：
var x;
var y;
没有初始化的变量自动取值为undefined。
如果这个变量值为null表示这个变量已经赋值了，这个值正好是null。
声明变量统一使用var声明，声明的时候变量是没有类型。
但是变量赋值之后就有类型，这个变量的类型就是赋值给这个变量值的类型。
关系运算符：
全等：===
不全等：!==
判断值是不是相等 ，还有类型是不是相等。
String：
创建String对象有两种方式
1、var str1 = "hello js!";
2、var str2 = new String("hello js!");
String属性：length
str1.length; // 9
String常用的方法：
1、大小写转换
str.toLowerCase();
str.toUpperCase();
var str = "Hello jS!";
console.log(str.toLowerCase());//hello js!
console.log(str.toUpperCase());//HELLO JS！
2、获取指定字符：
str.charAt(index) 返回指定位置的字符
index：字符位置
console.log(str.charAt(6));//j
3、查询指定字符串出现索引
str.indexOf(findstr, [index]);
str.indexOf(findstr);
str.indexOf(findstr,index);
str.indexOf(findstr,[index])
str.lastIndexOf(findstr, [index]);
使用说明：
findstr:查找的字符串
index:开始查找的位置索引，可以省略
返回findstr在x中出现的首字符位置索引，如果没有找到则返回-1
lastIndexOf:从后面找起
4、split() 方法用于把一个字符串分割成字符串数组。
x.split(separator,howmany)
separator : 字符串或正则表达式，从该参数指定的地方分割 stringObject
howmany:指定返回数组的最大长度，可以省略
返回分割后的字符串数组
Boolean
Java中条件表达式必须返回布尔类型
2<3
JS中表达式可以是任意表达式。
1不是0，就是非空值，表示true。
NaN=Not a number
在JS里面一切表示空的值都是false，非空的值都是true。
<script type="text/javascript">
if(true) {console.log('true')}
if(0) {console.log('0')}
if(!0) {console.log('!0')}
if('') {console.log('空字符串')}
if('abc') {console.log('字符串abc')}
</script>
Array对象：
创建数组对象
int[] array; String[] array;
var array1 = new Array();//创建一个空的数组
var array2 = new Array(7);//创建长度是7的数组
var array3 = new Array(100, "a", true);
var array4 = [100, 200, 300];
获取数组元素的个数：length属性
var array1 = new Array(7);
console.log(array1.length);//7
var array2 = new Array(100, "a", true);
console.log(array2.length);//3
//创建一个空数组
//数组长度是可变
var array = new Array();
array[0] = "232";
console.log(array);//["232"]
console.log(array.length);//1
array[1] = true;
console.log(array);//["232", true]
console.log(array.length);//2
//使用push和pop分别对应栈操作的入栈和出栈
var arr = new Array();
arr.push("zhangsan");
console.log(arr);//["zhangsan"]
arr.push(false)
console.log(arr);//["zhangsan", false]
arr.push(45)
console.log(arr);//["zhangsan", false, 45]
//console.log(arr[2]);//45
console.log(arr.pop());//45
console.log(arr.pop());//false
console.log(arr.pop());//zhangsan
Math:数学相关操作
Math.PI Math.round(3.14)
eval:
console.log(eval('2+3')); //5
eval('var x=10;var y=20;console.log(x*y);'); //200
innerText 直接当成一个字符串展示
innerHtml 将内容当成html来解析
大了
spanObj.innerText='大了'；
作业：
1、负数是没有阶乘
2、0的阶乘是1
3、整数的阶乘n!=n(n-1)(n-2)....321
span
2、猜数字游戏：
1-100
[0.0,1)
0.0=<Math.random()<1
0.0---------------0.9999999... *100
0.0---------------99.999999... +1
1.0---------------100.99999... parseInt
1-----------------100
var random = parseInt(Math.random() * 100 + 1);
NumberFormatException
parseInt("1234blue"); //returns 1234
parseInt("22.5"); //returns 22
parseInt("blue"); //returns NaN、
JQuery
jQuery:
其是对javascript封装的一个框架包,简化对javascript的操作
javascript代码：获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象
jquery代码：无需考虑浏览器兼容问题、代码足够少
jQuery：javascript+query
使用前期，jquery侧重快速找到页面上各种节点。
后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。
https://www.w3xue.com/manual/jq/manual_index.html
选择器
基本选择器
$(‘#id属性值’) ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’) class属性值选择器
$(‘*’) 通配符选择器
$(‘s1,s2,s3’)联合选择器
2. 层次选择器
2.1 $(s1 s2) [后代选择器]
后代选择器：在s1内部获得全部的s2节点(不考虑层次)
$(“div span”)
<div>
<span></span>
<p>
<span></span>
</p>
</div>
<span></span>
2.2 $(s1 > s2) [父子]
直接子元素选择器:在s1内部获得s2的子元素节点(直接孩子，孙子不算)
$(“div > span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
2.3 $(s1 + s2) [兄弟]
直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点
$(“div + span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>
2.4 $(s1 ~ s2) [兄弟]
后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点
$(“div ~ span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>
<p></p>
<span></span>
3、基本筛选
eq = equal gt=great than lt=less than
4. 内容过滤选择器
4.1 :contains(内容)
包含内容选择器，获得节点内部必须通过标签包含指定的内容
$(“div:contains(beijing)”)
5、 表单域选中选择器
复选框、单选按钮、下拉列表
属性操作
<input type=”text” class=”apple orange” id=”username” name=”username” value=”tom”
address=”beijing”
/>
JS:
itnode.属性名称
itnode.属性名称= 值;
itnode.getAttribute(属性名称);
itnode.setAttribute(属性名称，值);
自定义的属性例如address，只能通过getAttribute方式。
jquery方式操作属性(attribute)：property
\(().attr(属性名称); //获得属性信息值
\)().attr(属性名称，值); //设置属性的信息
$().removeAttr(属性名称); //删除属性
css样式操作
\(().css(name，value); //设置
\)().css(name); //获取
3.1 css()样式操作特点：
① 样式获取，jquery可以获取 行内、内部、外部的样式。
dom方式只能获得行内样式
② 复合属性样式需要拆分为"具体样式"才可以操作
例如： background 需要拆分为 background-color background-image 等进行操作
border： border-left-style border-left-width border-left-color 等
jQuery 中 attr() 和 prop() 方法的区别
具有 true 和 false 两个值的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
jQ基础篇--jQuery对象与dom对象的区别与相互转换
https://segmentfault.com/a/1190000003710344
练习：
1、表格隔行显示
