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 和 false4)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/textareahtml元素属性或者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元素