JS+jQuery
JavaScript
JavaScript(简称“JS”)
是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
JavaScript在1995年由Netscape公司的BrendanEich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。
JS运行在浏览器中,负责实现网页中的动画效果 或者是实现表单校验等功能脚本语言:
脚本语言(Script languages,scripting programming languages,scripting languages)是为了缩短传统的编写-编译-链接-运行(edit-compile-link-run)过程而创建的计算机编程语言。虽然许多脚本语言都超越了计算机简单任务自动化的领域,成熟到可以编写精巧的程序,但仍然还是被称为脚本。几乎所有计算机系统的各个层次都有一种脚本语言。包括操作系统层,如计算机游戏,网络应用程序,文字处理文档,网络软件等。在许多方面,高级编程语言和脚本语言之间互相交叉,二者之间没有明确的界限。一个脚本可以使得本来要用键盘进行的相互式操作自动化。一个Shell脚本主要由原本需要在命令行输入的命令组成,或在一个文本编辑器中,用户可以使用脚本来把一些常用的操作组合成一组序列。主要用来书写这种脚本的语言叫做脚本语言。很多脚本语言实际上已经超过简单的用户命令序列的指令,还可以编写更复杂的程序。
JS特点和优势(了解)
1、特点:
(1)JS是一门直译式的语言(边解释边执行,没有编译的过程)
java–> 编写时 xx.java —>编译成 xx.class --> 运行
js —> 编写时 html, 编写时 js文件, 直接运行, 没有编译过程
(2)JS是一门基于对象的语言(JS中没有类的概念,也没有编译的过程)
JS中是有对象的(内置对象、自定义对象)
(3)JS是一门弱类型的语言(Java:强类型)
在java中: 变量一旦声明, 就属于固定的数据类型, 不能被改变
String s = "abc";
int n = 100;
在JS中: 变量是不区分类型的, 可以指向任意的数据类型
var s = 100;
s = "abc";
s = true;
s = [];
s = function(){}
2、优势:
(1)JS具有良好的交互性
(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)
(3)JS具有跨平台性(JS 浏览器)
( JS语言是跨平台的,是因为有浏览器,但浏览器不跨平台
Java语言是跨平台的,是因为有虚拟机,但虚拟主机不跨平台 )
在HTML书写JS的方式
1、在script标签内部可以书写JS代码:
在head或者body标签内部可以添加一个script标签,在script标签内部可以直接书写JS代码!
<!-- 在script标签内部可以书写JS注释和JS代码 -->
<script type="text/javascript">
//JS的单行注释
/* JS的多行注释 */
alert( "在html中引入JS的第一种方式..." );
</script>
2、通过script标签引入外部的JS文件
在head或body标签内部,可以通过script标签引入外部的JS文件。例如:
<!-- 通过script标签可以引入外部的JS文件 -->
<script src="demo.js"></script>
注意:(1)在引入js文件的script标签内部不要书写JS代码,例如:
<script src="demo.js">
alert( 111 ); //这里的代码不会执行
</script>
(2)不要将引入JS文件的script标签自闭,因为可能会导致文件引入失败,如下:
<script src="demo.js" />
扩展内容:也可以直接在元素上书写JS代码
<!-- 直接在元素上书写JS代码:
onclick属性用于给当前元素绑定点击事件:点击元素就会触发事件,执行相应函数
-->
<input type="button" value="1" onclick="alert('1')"/>
<input type="button" value="2" onclick="console.log( '2' )"/>
JavaScript语法
注释格式
JS的注释符号和Java的注释符号相同,如下:
// 单行注释内容
/* 多行注释内容 */
数据类型
1、基本数据类型
(1)数值类型(number)
在JS中,所有的数值在底层都是浮点型,但是在处理和显示的过程中会自动的和整型进行转换。
例如:2.4+3.6=6
特殊值:Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)
(2)字符串类型(string)
在JS中,字符串类型属于基本数据类型,字符串常量可以使用单引号或者使用双引号引起来。例如:
var s1 = "Hello JS";
var s2 = 'Hello JS';
另外,JS中字符串类型有对应的包装对象(String),在需要时会自动的和包装对象进行转换。
var s1 = "Hello JS"; //基本数据类型, string
console.log( typeof s1 ); //string
var s2 = new String("Hello JS"); //复杂数据类型, object
console.log( typeof s2 ); //object
//不管是基本数据类型s1, 还是对象类型s2, 都可以当作对象来用
console.log( s1.valueOf() ); //s1是基本数据类型, 会转成对象, 调用valueOf函数
console.log( s2.valueOf() );
(3)布尔类型(boolean)
布尔类型的值有两个,分别为true和false。
(4)undefined类型
undefined类型的值只有一个,就是undefined,表示变量未定义(但不是指变量没有声明)。
是指声明了变量,但没有为变量赋值,该变量的值就是undefined。
/* 1.undefined类型 */
var x;
alert( x ); //undefined
alert( y ); //抛异常
(5)null类型
null类型的值也只有一个,就是null,表示空值。
可以作为函数的返回值,表示函数返回的是一个空的对象。
注意:null和undefined类型的变量是不能调用函数或属性的,会抛异常!
2、复杂数据类型
主要指对象(JS的内置对象、自定义的对象、函数、数组)
变量声明
JS中是通过var
关键字声明变量,声明的变量是不区分类型,可以指向任意的数据。例如:
var x = 100;
x = "abc";
x = true;
x = [];
x = function(){}
x = new Object();
x = {};
另外,JS中多次声明同名的变量不会出现语法错误,例如:
/* 2.变量的定义 */
var s = "Hello"; // var s; s="Hello";
var s = 123; // var s; s=123; 第二次声明变量x没有生效
alert( s ); //123
JS是严格区分大小写的!
JS运算符
JS和Java中的运算符大致相同,例如:
算术运算符: +,-,,/,%,++,–
赋值运算符: =,+=,-=,=,/=,%=
比较运算符: ==,!=,>,>=,<,<=
位运算符: & , |
逻辑运算符: && ,|| ( false && 表达式, true || 表达式 )
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式
JS语句
JS中的语句和Java中的语句也大致相同
1、if分支结构
if分支结构用于基于不同的条件来执行不同的动作。语法结构如下:
if (条件 1){
当条件 1 为 true 时执行的代码
}else if (条件 2){
当条件 2 为 true 时执行的代码
}else{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
2、switch语句
使用 switch 语句来选择要执行的多个代码块之一。语法结构如下:
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
...
default:
与 case 1 和 case 2 不同时执行的代码
}
执行原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break来阻止代码自动地向下一个 case 运行。
3、for循环语句 – 循环代码块一定的次数
for 循环的语法结构如下:
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}
4、while循环 – 在指定条件为真时循环执行代码块
JS中while循环也分为while和do/while循环,下面为while循环语法结构:
while (条件){
需要执行的代码
}
while 循环会在指定条件为真时循环执行代码块。
if分支案例: 接收用户输入的成绩,判断成绩所属的等级
80~100(包括80,也包括100)
优秀 60~80(包括60,但不包括80)
中等 0~60(包括0,但不包括60) 不及格
代码实现如下:
propmt( 参数1, 参数2 )函数:在页面上弹出一个消息输入框,接收的参数1是在弹框中显示的提示内容,用户输入的内容,会作为函数的返回值直接返回。
参数2, 是输入框中的默认值, 可以修改
var score = prompt("请输入您的成绩: ");
if( score >= 80 && score <=100 ){
alert("您的成绩属于: 优秀!");
}else if( score >= 60 && score < 80 ){
alert("您的成绩属于: 中等!");
}else if( score >= 0 && score < 60 ){
alert("您的成绩属于: 不及格!");
}else{
alert("您的输入有误, 请重新输入!");
}
switch语句案例—实现一个简易的计算器:
可以接收用户输入的两个数值和一个操作符(+、-、*、/),根据操作符号的不同,对两个数值执行不同的运算。
代码实现如下:
//1.接收用户输入的数值和运算符, 中间用空格分隔
var str = prompt("请输入数值1、运算符、数值2,中间用空格分隔:"); //"10 + 5"
//2.对用户输入的内容进行切割(以空格作为分隔符切割)
var arr = str.split(" "); // ["10", "+", "5"]
var num1 = arr[0] - 0 ;
var opt = arr[1];
var num2 = arr[2] - 0 ;
//3.通过switch分支实现计算器
switch( opt ){
case "+":
alert( "两个数的和为: "+( num1+num2 ) );
break;
case "-":
alert( "两个数的差为: "+( num1-num2 ) );
break;
case "*":
alert( "两个数的乘积为: "+( num1*num2 ) );
break;
case "/":
alert( "两个数的商为: "+( num1/num2 ) );
break;
default:
alert( "您输入的运算符有误, 请重新输入!" );
}
for循环语句案例
遍历1~100之间的所有整数,求1~100之间所有整数的和,并输出到控制台;
代码实现如下:
//--------------------------------------
var i = 1;
var sum = 0;
while( i <= 100 ){
sum += i;
i++;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------
var sum = 0;
for( var i=0; i<=100; i++){
sum += i;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------
while循环语句案例`
遍历下面数组中的元素,将元素输出到控制台。
var arr = [123, “abc”, false, new Object() ];
代码实现如下:
var arr = [123, "abc", false, new Object() ];
var index = 0;
while( index < arr.length ){
console.log( arr[index] );
index++;
}
for( var i=0; i<arr.length; i++ ){
console.log( arr[i] );
}
JS数组
Array 对象用于在单个的变量中存储多个值。
JS数组的声明方式一:
//声明一个空数组,长度为零
var arr1 = [];
//声明一个数组,并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];
JS数组的声明方式二:
//声明一个空数组,长度为零
var arr3 = new Array();
//声明一个数组,并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());
数组中的细节问题:
(1)JS中的数组可以存储任意类型的数据
(2)JS中的数组长度是可以被任意改变的
var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100
JS函数
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块,前面使用了关键词 function。
JS中声明函数的方式为:
function 函数名称([参数列表]){
函数体
}
或者:
var 变量名/函数名 = function([参数列表]){
函数体
}
调用函数: 函数名称([参数列表]);
DOM操作
DOM: Document Object Model,文档对象模型,其实就是JS专门为访问html元素提供的一套API。
JS获取元素
document
是一个js对象,用于表示当前html网页。当浏览器加载完整个html网页后,会用document对象表示整个html网页!
document.getElementById( id值 )
– 通过元素的id值,获取一个元素。返回的是表示该元素的js对象。
<div id="div1">xxxx</div>
//获取id为div1的元素
var oDiv1 = document.getElementById("div1");
//oDiv1是一个js对象,表示获取的div元素
document.getElementsByTagName( 元素名 )
– 通过元素名称获取当前文档中的所有指定名称的元素,返回的是一个数组,其中包含了所有指定名称的元素。
document.body
– 获取当前文档中的body元素
element.parentNode
– 获取当前元素的父元素。element表示当前元素
JS增删改元素
document.createElement( 元素名称 )
– 根据元素名称创建指定名称的元素,返回的是表示新创建元素的js对象
parent.appendChild( child )
– 通过父元素添加子元素,其中parent表示父元素,child表示子元素
parent.removeChild( child )
– 通过父元素删除子元素,其中parent表示父元素,child表示子元素
element.innerHTML
– 获取当前元素的html内容(从开始标签到结束标签之间的所有内容),还可以设置当前元素的html内容(如果元素内部有内容,将会覆盖原有内容)
<div id="div1">
这是一个div元素...
<span>这是一个span元素</span>
</div>
//获取div元素
var oDiv1 = document.getElementById("div1");
oDiv1.innerHTML;//获取div元素的内容
jQuery
jQuery: JavaScript Query JS查询
jQuery是一门轻量的、免费开源的JS函数库(就是JS的简单框架)
jQuery可以极大的简化JS代码
jQuery的核心思想:“写的更少,但做的更多”
轻量的:是指一个技术或框架对代码或程序的侵入程度是比较低的。
或者说代码对该技术依赖程度越低,这个技术越轻。对该技术的依赖程度越高,这个技术越重。所以轻量级的更好.
jQuery本质就是一个包含了很多函数的JS文件,如果要在某一个HTML中使用这个JS文件中的函数,就必须得将JS文件引入到HTML中(想使用jQuery,就得引入jQuery的函数库文件,就是一个JS文件)
jQuery的优势
(1) 可以极大的简化JS代码
(2) 可以像CSS选择器一样获取html元素
css中获取所有的div,给div添加样式:
div{ css属性... }
jQuery中获取所有div,给div添加边框样式:
$("div").css("border", "2px solid red");
JS获取id为div1的元素: document.getElementById("div1")
jQuery获取id为div1的元素: $("#div1")
(3) 可以通过修改css属性控制页面的效果
(4) 可以兼容常用的浏览器
比如: JS中的innerText属性、removeNode()函数(元素调用自己,删除自己)、replaceNode( )函数 这些函数在某些浏览器中是无法使用的。
jQuery中提供了相应的函数( text函数、remove函数、replaceWith函数 )
常用浏览器:谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器等
jQuery引入
jQuery的函数库文件就是一个普通的JS文件,引入jQuery和引入JS文件的方式一样。
<!-- 在使用jQuery之前,必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
文档就绪事件函数
<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前,必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
//1.获取id为demo的h1元素
var h1 = document.getElementById( "demo" );
//2.获取h1元素中的内容( innerHTML )
alert( h1.innerHTML );
</script>
</head>
<body>
<h1 id="demo">jQuery的引入示例...</h1>
</body>
文档就绪事件函数
如果在获取元素时,获取元素的代码执行的时机,比元素本身加载的时间还要早,如果元素还没有加载就获取,必然是获取不到的。
可以将获取元素的代码放在文档就绪事件函数中,等浏览器加载完整个网页后,文档就绪事件函数才会执行,此时所有的元素都被加载了,再获取任何元素都能获取到!
jQuery提供的文档就绪事件函数(简写形式):
<script>
$(function(){
//在浏览器加载完整个html网页后立即执行
});
</script>
其完整写法为:
<script>
$(document).ready(function(){
//在浏览器加载完整个html网页后立即执行
});
</script>
JS也为我们提供了文档就绪事件函数,其写法为:
<script>
window.onload = function(){
//在浏览器加载完整个html网页后立即执行
}
</script>
jQuery选择器(重点)
基本选择器
(1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素
(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素
(3)id选择器
$("#one") -- 选中id为one的元素
(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素
层级选择器
$("div span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素
$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素
$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素
$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素
基本过滤选择器
(1) 选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)
(2) 选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)
(3) 选中第n+1个div元素(n从零开始)
$("div:eq(n)")
$("div").eq(n)
jQuery总结
html元素操作
1、创建元素
$("<div></div>") -- 创建一个div元素,返回的是一个jQuery对象,表示创建的div元素
$("<div>xxxx</div>") -- 创建一个包含内容的div元素,返回的是一个jQuery对象,表示创建的div元素
2、添加子元素
$parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素
3、删除元素
$("div").remove() -- 删除所有的div元素
JS删除所有div元素:
//获取所有的div元素(返回的是所有div组成的数组)
var divArr = document.getElementsByTagName("div"); //div数组
//遍历div数组,依次删除每一个div元素
var len = divArr.length;
for(var i=0;i<len;i++){
//通过当前元素的父元素删除当前元素(始终删除第一个)
divArr[0].parentNode.removeChild( divArr[0] );
}
4、替换元素
$("div").replaceWith("<p>我是来替换的…</p>")
html元素内容和值的操作
<div>
这是一个div11元素
<span>这是一个span元素</span>
这是一个div1111元素
</div>
1、html()函数 (类似于js中的innerHTML属性)
– 用于获取或设置元素的内容,比如为div、span、p、h1~h6、table、tr、td、form等元素设置内容
$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容
2、text()函数 (类似于js中的innerText属性,innerText在部分浏览器中不兼容)
– 用于获取或设置元素的文本内容
$("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容
3、val()函数 (类似于js中的value属性)
– 获取或设置表单项元素的value值(input/select/option/textarea)
$("input").val() -- 获取所有input元素中的第一个input元素的value值,如:获取文本框中的值.
$("input").val(值) -- 为所有的input元素设置value值
元素属性和css属性操作
<input type="text" name="username" id="inp"/>
1、prop()函数 – 用于获取或设置元素的属性值
在jQuery1.6版本之后才有这个函数,1.6之前版本的jQuery可以使用attr()函数
$("input[type='checkbox']").prop("checked")
// 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
// 设置所匹配的复选框元素为选中状态
$("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme
$("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成user
2、css()函数 – 用于获取或设置元素的css属性值
$("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({
"width" : "200px",
"height" : "150px",
"border" : "5px solid red",
"background" : "pink"
}); // 为id为div1的元素设置宽度为200px、高度为150px、边框以及背景颜色等样式
其他函数
1、each() 函数
$(selector).each(function( index,element ){})
// each()函数可以遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)
// function中的index -- 表示遍历的元素的下标
// function中的element -- 表示当前正在遍历的元素(也可以通过this获取)
示例:
$("table tr").each(function(){
//从当前行中获取第二个单元格的内容(当前行的id值)
var tempId = $(this).find("td").eq(1).html();
//拿着用户输入的id 和 每一行中的id值进行比较
if( id == tempId ){
alert("添加失败,id已存在!");
flag = true; //id存在,更新flag的值,true表示已存在!
}
});
2、show()/hide() 函数
show() – 设置元素由隐藏变为显示
$("div").show() -- 设置所有的div元素为显示
等价于:
$("div").css("display", "block");
hide() – 设置元素由显示变为隐藏
$("div").hide() -- 设置所有的div元素为隐藏
等价于:
$("div").css("display", "none")
2、toggle()/slideToggle()
toggle() – 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示
slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏,否则切换为显示,切换为显示为下拉状态,隐藏为收缩状态。
扩展内容
为元素绑定点击事件
以点击事件为例,为元素绑定点击事件的方式为:
方式1(js版):
<script>
function fn(){
alert("input按钮被点击了...");
}
</script>
<body>
<input onclick="fn()" type="button" value="1" />
</body>
方式2(js版):
<script>
window.onload = function(){
//获取id为btn的元素
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("input按钮被点击了...");
}
}
</script>
<body>
<input id="btn" type="button" value="1" />
</body>
方式3(jQuery版):
<script>
$(function(){
//当点击btn按钮时,触发点击事件执行其中的函数
$("#btn").click( function(){
alert("input按钮被点击了...");
});
});
</script>
<body>
<input id="btn" type="button" value="1" />
</body>
js对象和jQuery对象的互相转换
通过JS的方式获取元素,返回的是JS对象,JS对象只能调用JS的属性或函数
通过jQuery选择器获取元素,返回的是jQuery对象(结构像一个集合),jQuery对象只能调用jQuery的属性或函数。
如果现有JS对象,但我们需要调用jQuery的属性或函数,可以将JS对象转成jQuery对象;
如果现有jQuery对象,但我们需要调用JS的属性或函数,可以将jQuery对象转成JS对象;