前端(三)js、jquery-学习笔记整理

最新推荐文章于 2023-05-09 15:55:21 发布

吃一口桃酥

最新推荐文章于 2023-05-09 15:55:21 发布

阅读量666

点赞数

分类专栏：笔记文章标签： js jquery ajax json

本文链接：https://blog.csdn.net/sinat_28015305/article/details/106061544

版权

笔记专栏收录该内容

73 篇文章 37 订阅

订阅专栏

JavaScript

JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。
前端三大块

HTML：页面结构
CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

JavaScript嵌入页面的方式

行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

页面script标签嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

外部引入

<script type="text/javascript" src="js/index.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js嵌入页面</title>
	<!-- 第二种方式 内嵌js-->
	<script>
		alert("hello world too!")
	</script>
	<!-- 第三种方式 外部引入 -->
	<script type="text/javascript" src="./js/hello.js"></script>
</head>
<body>
	<!-- 第一种嵌入js方式,行间事件 -->
	<input type="button" name="" value="点击" onclick="alert('hello world')">
</body>
</html>

变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字 ‘var’
弱类型语言和强类型语言

var iNum = 123;
var sTr = 'asd';

//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var iNum = 45,sTr='qwe',sCount='68';

变量类型
5种基本数据类型：

number 数字类型
string 字符串类型
boolean 布尔类型 true 或 false
undefined undefined类型，变量声明未初始化，它的值就是undefined
null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：

object

javascript语句与注释
一条javascript语句应该以“;”结尾

<script type="text/javascript">    
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
    alert(sTr);
};
fnAlert();
</script>

javascript注释

<script type="text/javascript">    

// 单行注释
var iNum = 123;
/*  
    多行注释
    1、...
    2、...
*/
var sTr = 'abc123';
</script>

变量、函数、属性、函数参数命名规范

区分大小写
第一个字符必须是字母、下划线（_）或者美元符号（$）
其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格：
对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

获取元素方法一

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

**注意：**上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：
第一种方法：将javascript放到页面最下边

....
<div id="div1">这是一个div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

<script type="text/javascript">
	// window.onload 表示在整个页面加载完成以后再执行后续语句
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">这是一个div元素</div>

操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作属性的方法

“.” 操作
“[ ]”操作

属性写法

html的属性和js里面属性写法一样
“class” 属性写成 “className”
“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性操作01</title>
	<script>
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var oA = document.getElementById("link");
			var oDiv3 = document.getElementById("div3");
			// 读取属性
			var sID = oDiv.id;
			alert(sID)

			// 写属性
			oDiv.style.color = "red";
			oA.href = "http://www.baidu.com";
			oA.title = "这是百度的链接";
			// “class” 属性写成 “className”
			oDiv3.className = "box";
		}
	</script>
	<style>
		.box{
			font-size:20px;
			color:gold;
		}
		.box2{
			font-size:30px;
			color:green;
		}
	</style>
</head>
<body>
	<div id="div1">这是第一个div元素</div>
	<a href="#" id = "link">这是一个链接</a>
	<div class="box" id = "div2">这是第二个div</div>
	<div class="box2" id = "div3">这是第三个div</div>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性操作02</title>
	<script>
		window.onload = function(){
			var oDiv = document.getElementById("box");
			
			var sMystyle = "color";
			var sValue = "red";

			// oDiv.style.color = "red";
			// 属性用变量代替的话，需要用“[ ]”操作
			oDiv.style[sMystyle] = sValue;
		}
	</script>
</head>
<body>
	<div id="box">这是一个div元素</div>
</body>
</html>

innerHTML
innerHTML可以读取或者写入标签包裹的内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>改变元素内部包裹的内容</title>
	<script>
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			// innerHTML可以读取或者写入标签包裹的内容 用于给页面塞数据
			// 读取
			var sText = oDiv.innerHTML;
			alert(sText);

			// 改写
			oDiv.innerHTML = "这是修改的文字";
			alert(oDiv.innerHTML);
			oDiv.innerHTML = "<a href= 'http://www.baidu.com' title = '百度网'>百度网</a>";
		}
	</script>
</head>
<body>
	<!-- #div1 + tab-->
	<div id="div1">这是一个div元素</div>
</body>
</html>

在这里插入图片描述

函数

函数定义与执行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数的定义和执行</title>
	<script>
		// 由于函数执行在页面加载之后，因此不需要window.onload = function()
		// 函数定义
		function fnMyalert(){
			alert("hello world");
		}
		// 函数执行 fnMyalert();
		function fnChange(){
			var oDiv = document.getElementById("div1");
			oDiv.style.color = "red";
			oDiv.style.fontSize = "30px";
		}
	</script>

</head>
<body>
	<!-- 标签内定义 -->
	<div id="div1" onclick="fnMyalert()">这是一个div元素</div>
	<input type="button" value="改变div" onclick="fnChange()">
</body>
</html>

变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变量和函数预解析</title>
	<script>
		// 变量预解析，会把变量的声明提前，但不会将变量的赋值预解析，因此弹出undefined
		alert(iNum);
		// 函数预解析会让函数的声明和定义提前，正常运行
		myAlert();
		// 使用一个未声明又未定义的变量，程序出错
		// alert(iNum2);
		var iNum = 12;
		function myAlert(){
			alert("hello world");
		}
	</script>
</head>
<body>
	
</body>
</html>

提取行间事件
在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>提取行间事件</title>
	<script>
		window.onload = function(){
			var oBtn = document.getElementById("btn01");
			// 函数在行间调用时候要写(),提取行间事件时候不能写()
			// 即将事件属性和函数关联，不能写()，写了就会马上执行，产生逻辑错误
			oBtn.onclick = fnChange;


			function fnChange(){
				var oDiv = document.getElementById("div1");
				oDiv.style.color = "red";
				oDiv.style.fontSize = "30px";
			}	
		}
		
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
	<input type="button" value="改变div" id = "btn01">
</body>
</html>

对比

<input type="button" value="改变div" onclick="fnChange()">

匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
行间事件案例改写为匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		window.onload = function(){
			var oDiv = document.getElementById('box');
			var oBtn = document.getElementById('btn1');
			oBtn.onclick = function(){
				oDiv.style.color = 'red';
			}
		}
	</script>
</head>
<body>
	<div id="box">这是一个div</div>
	<input type="button" value='改变div' id='btn1'>
</body>
</html>

案例：网页换肤

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		window.onload = function(){
			var oBtn1 = document.getElementById('btn1');
			var oBtn2 = document.getElementById('btn2');
			var oBtn3 = document.getElementById('btn3');


			oBtn1.onclick = function(){
				document.body.style.backgroundColor = 'red';
			}
			oBtn2.onclick = function(){
				document.body.style.backgroundColor='green';
			}
			oBtn3.onclick = function(){
				document.body.style.backgroundColor='gold';
			}
		}
	</script>
	<style>
		body{
			background-color:cyan;
		}
	</style>
</head>
<body>
		<input type="button" value='皮肤1' id='btn1'>
		<input type="button" value='皮肤2' id='btn2'>
		<input type="button" value='皮肤3' id='btn3'>	
</body>
</html>

函数传参

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数传参</title>
	<script>
		function fnMyalert(a){
			alert(a);
		}
		fnMyalert("hello world");

		window.onload = function(){
			function fnChangestyle(mystyle,val){
				var oDiv = document.getElementById("div1");
				// 注意下方中括号用法
				oDiv.style[mystyle] = val;
			}
			fnChangestyle("fontSize","30px");
			fnChangestyle("color","red");
		}
		
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
</body>
</html>

函数中’return’关键字的作用：

返回函数执行的结果
结束函数的运行
阻止默认行为

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert('here!');  // 不弹出
}
var iCount = fnAdd(3,4);
alert(iCount);  //弹出7
</script>

条件语句

通过条件来控制程序的走向，就需要用到条件语句。
运算符

算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
赋值运算符：=、 +=、 -=、 *=、 /=、 %=
条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>加法练习</title>
	<script>
		window.onload = function(){
			var oInput01 = document.getElementById("input01");
			var oInput02 = document.getElementById("input02");
			var oBtn = document.getElementById("btn");
			oBtn.onclick =function(){
				// 获取后得到的是str类型，相加只会将字符串拼接
				// 需要通过parseInt进行整型转换
				var iVal01 = parseInt(oInput01.value);
				var iVal02 = parseInt(oInput02.value);
				alert(iVal01 + iVal02);
			}

		}
	</script>
</head>
<body>
	<input type="text" id="input01" placeholder="第一个数字">+
	<input type="text" id="input02" placeholder="第二个数字">
	<input type="button" id="btn" value="加法">
</body>
</html>

if else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var iNum01 = 12;
        var iNum02 = 24;
        if(iNum01>iNum02){
            alert('大于');
        }
        else{
            alert('小于');
        }
    </script>
</head>
<body> 
</body>
</html>

案例：制作单个按钮点击切换元素的显示和隐藏效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>按钮切换元素显示</title>
	<style>
		.box{
			width:200px;
			height:400px;
			background-color:gold;
		}
	</style>
	<script>
		window.onload = function(){
			var oBtn = document.getElementById("btn01");
			var oDiv = document.getElementById("box01");

			// 由于默认div中无style这一行间属性，因此alert一开始为null
			/*oDiv.style.display读取的是标签里<div class="box" id="box01"></div>
			写的属性值，若没有写这个值，一开始为null*/
			alert(oDiv.style.display);
			oBtn.onclick = function(){
				if(oDiv.style.display == "none"){
					oDiv.style.display ="block";
				}
				else{
					oDiv.style.display = "none";
				}
			/*	// 改进方法
				if(oDiv.style.display == "block" ||oDiv.style.display == "" ){
					oDiv.style.display = "none";
				}
				else{
					oDiv.style.display = "block";
				}*/
				
			}
		}
	</script>
</head>
<body>
	<input type="button" value="切换" id="btn01">
	<div class="box" id="box01"></div>
</body>
</html>

多重if else语句

if(iWeek == 1){
	oBody.style.backgroundColor = "gold";
}
else if(iWeek == 2){
	oBody.style.backgroundColor = "green";
}
else if(iWeek == 3){
	oBody.style.backgroundColor = "pink";
}
else if(iWeek == 4){
	oBody.style.backgroundColor = "yellowgreen";
}
else if(iWeek == 5){
	oBody.style.backgroundColor = "lightblue";
}
else{
	oBody.style.backgroundColor = "lightgreen";
}

switch语句
多重if else语句可以换成性能更高的switch语句

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>switch语句</title>
	<script>
		window.onload = function(){
			var oInput = document.getElementById("text01");
			var oBtn = document.getElementById("btn01");
			var iNum;
			oBtn.onclick = function(){
				iNum = parseInt(oInput.value);
				switch (iNum){
					case 1:
						document.body.style.backgroundColor = "gold";
						break;
					case 2:
						document.body.style.backgroundColor = "green";
						break;
					case 3:
						document.body.style.backgroundColor = "pink";
						break;
					case 4:
						document.body.style.backgroundColor = "yellowgreen";
						break;
					case 5:
						document.body.style.backgroundColor = "lightblue";
						break;
					// default 相当于 else
					default:
						document.body.style.backgroundColor = "lightgreen";
				}
			}
		}
	</script>
</head>
<body>
	<input type="text" placeholder="输入星期数字" id="text01">
	<input type="button" value="确定" id="btn01">
	
</body>
</html>

数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
定义数组的方法

//对象的实例创建
var aList = new Array(1,2,3);

//直接量创建
var aList2 = [1,2,3,'asd'];

操作数组中数据的方法

获取数组的长度：aList.length
用下标操作数组的某个数据：aList[0]
join() 将数组成员通过一个分隔符合并成字符串
push() 和 pop() 从数组最后增加成员或删除成员
unshift()和 shift() 从数组前面增加成员或删除成员
reverse() 将数组反转
indexOf() 返回数组中元素第一次出现的索引值

splice() 在数组中增加或删除成员

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数组</title>
	<script>
		//对象的实例创建
		var aList = new Array(1,2,3);
		//直接量创建
		var aList02 = [1,2,3,"asd"];
		var aList03 = [1,2,"b",1,4,5,"b"];
		// 获取数组长度
		alert(aList02.length);
		// 用下标操作数组的某个数据
		alert(aList02[0]);
		// join() 将数组成员通过一个分隔符合并成字符串
		alert(aList02.join("+"));// 弹出 1+2+3+asd
		alert(aList02.join("")); //弹出123asd
		// push() 从数组最后增加成员
		aList02.push("dasdsad");
		alert(aList02);
		// pop() 从数组最后删除成员
		aList02.pop();
		alert(aList02);
		// reverse() 将数组反转
		aList02.reverse();
		alert(aList02);
		// unshift()和 shift() 从数组前面增加成员或删除成员
		aList02.shift("b");
		alert(aList02);
		aList02.unshift();
		alert(aList02);
		// indexOf() 返回数组中元素第一次出现的索引值
		alert(aList03.indexof(1));
		alert(aList03.indexof("b"));
		// splice() 在数组中增加或删除成员
		/*var aList = [1,2,3,4];
		aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
		alert(aList); //弹出 1,2,7,8,9,4*/
		aList03.splice(1,0,"e");
		alert(aList03);  // 弹出 1,"e",2,"b",1,4,5,"b"

	</script>
</head>
<body>
	
</body>
</html>

多维数组
多维数组指的是数组的成员也是数组的数组。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多维数组</title>
	<script>
		var aList = [[1,2,3,4],["a","b","c"],[6,7,8]];
		/*aList[0] = [1,2,3,4];
		aList[1] = ["a","b","c"];
		aList[2] = [6,7,8];*/
		alert(aList.length);  //弹出3
		alert(aList[0].length);  //a[0]这个数组的长度，弹出4
		alert(aList[0][1]);  //弹出2 a[0]数组中的第二个元素
		alert(aList[1][0]);   //弹出 a[1]数组中的第一个元素
		alert(aList[2][0]);  //弹出6 a[2]数组中的第一个元素
	</script>
</head>
<body>
	
</body>
</html>

循环语句

程序中进行有规律的重复性操作，需要用到循环语句。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>for循环</title>
	<script>
		for(var i=0;i<5;i++){
			alert("ok");
		}
		var aList = ["a","b","c","d"];
		// 性能优化考虑可以先获取长度，避免每次获取
		// var aLen = aList.length;
		for(var i=0;i<aList.length;i++){
			alert(aList[i]);
		}
	</script>
</head>
<body>
</body>
</html>

案例：将数组中的数据放入到页面中的列表中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>将数据循环放入页面中</title>
	<script>
		window.onload = function(){
			var aList = ["美人鱼","疯狂动物城","魔兽","美队3","湄公河行动"];
			var iLen = aList.length;
			var oUl = document.getElementById("list");
			var sTr = "";
			for(var i=0;i<iLen;i++){
				sTr += "<li>"+aList[i] +"</li>";
				
			}
			alert(sTr);
			oUl.innerHTML = sTr;
		}
		

	</script>
	<style>
		.list{
			list-style: none;
			margin:50px auto 0;
			padding:0px;
			width:300px;
			height:300px;
			
		}
		.list li{
			height:60px;
			border-bottom:1px dotted #000;
			line-height: 60px;
			font-size:16px;
		}
	</style>
</head>
<body>
	<ul class="list" id="list">
	<!--通过js 将数据拼接为需要的li格式，插入ul中
	<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li> -->
	</ul>
</body>
</html>

案例：数组去重

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数组去重</title>
	<script>
		var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
		var aList2 = [];
		for(var i=0;i<aList.length;i++){
			// indexOf() 返回数组中元素第一次出现的索引值
			//如果该元素第一次出现的索引等于当前索引，表示该元素第一次出现
			if(aList.indexOf(aList[i])==i){
				// push() 从数组最后增加成员，pop()为从最后删除成员
				// unshift()和 shift() 从数组前面增加成员或删除成员
				aList2.push(aList[i]);
			}
		}
		alert(aList2);
	</script>
</head>
<body>
	
</body>
</html>

while循环

var i=0;

while(i<8){
    ......
    i++;
}

获取元素方法二

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通过标签获取元素</title>
	<script>
		window.onload = function(){
			// 通过标签名获取li元素，生成一个选择集，赋值给aLi
			var aLi = document.getElementsByTagName("li");
			// 读取选择集内元素的个数
			alert(aLi.length);  //弹出13
			// aLi.style.backgroundColor = 'gold'; // 出错！不能给选择集设置
			//给单独一个aLi设置样式
			aLi[0].style.backgroundColor="gold";
			aLi[4].style.backgroundColor="green";

			// 整体加背景色方法,通过for给每一个加
			var aLen = aLi.length;
			for(var i=0;i<aLen;i++){
				aLi[i].style.backgroundColor = "pink";
			}

			//给每个ul 单独设置
			var oLi01 = document.getElementById("list1");
			var oLi02 = document.getElementById("list2");

			var aLi01 = oLi01.getElementsByTagName('li');
			alert(aLi01.length);
			var aLi02 = oLi02.getElementsByTagName("li");
			alert(aLi02.length);

			var aLen01 = aLi01.length;
			for(var i=0;i<aLen01;i++){
				aLi01[i].style.color = "red";
			}
			var aLen02 = aLi02.length;
			for(var i=0;i<aLen02;i++){
				// 数组中 索引从0开始 因此要是偶数行需要 i%2!=0
				if(i%2!=0){
					aLi02[i].style.color = "#ddd";
				}
				
			}

		}
	</script>
</head>
<body>
	<ul id="list1">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
	<ul id="list2">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</body>
</html>

Javascript组成

ECMAscript javascript的语法（变量、函数、循环语句等语法)
DOM 文档对象模型操作html和css的方法
BOM 浏览器对象模型操作浏览器的一些方法

字符串处理方法

字符串合并操作：“ + ”
parseInt() 将数字字符串转化为整数
parseFloat() 将数字字符串转化为小数
split() 把一个字符串分隔成字符串组成的数组
charAt() 获取字符串中的某一个字符
indexOf() 查找字符串是否含有某字符
substring() 截取字符串用法： substring(start,end)（不包括end）
toUpperCase() 字符串转大写
toLowerCase() 字符串转小写
reverse()字符串反转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>字符串处理方法</title>
	<script>
		var iNum01 = 12;
		var sNum02 = "24";
		var sTr = "abc";

		// 字符串合并操作：“ + ”
		// 数字和字符串相加，等同于字符串拼接
		alert(iNum01+sNum02);  //弹出1224
		var sTr = "12.35";
		// parseInt() 将数字字符串转化为整数
		// parseFloat() 将数字字符串转化为小数
		alert(parseInt(sTr)); //弹出12
		alert(parseFloat(sTr)); //弹出12.35

		// split() 把一个字符串分隔成字符串组成的数组
		var sTr03 = "2017-04-22";
		var aRr = sTr03.split("-");
		alert(aRr); //弹出2017,04,22 表示["2017","04","22"]即2017 04 22,显示中的,不在格式内
		var aRr2 = sTr03.split("");
		alert(aRr2); // 弹出["2","0","1","7","-","0","4","-","2","2"]

		// 获取字符串中的某一个字符
		var sTr04 = "#div";
		var sTr05 = sTr04.charAt(0); //sTr04.charAt(pos: int); 弹出#
		alert(sTr05);

		// indexOf() 查找字符串是否含有某字符
		var sTr06 = "asda microsoft asda";
		alert(sTr06.indexOf("microsoft"));//弹出5 ,表示存在且第一个字母索引为5 空格也计算索引
		alert(sTr06.indexOf("yahei"));  //弹出-1,表示不存在

		// substring() 截取字符串 用法： substring(start,end)（不包括end）
		var sTr07 = "abcdef123456edgf";
		var sTr08 = sTr07.substring(6, 12); //sTr07.substring(start: int, end: int) 若sTr07.substring(6, 11)弹出12345;不能包含end,即sTr07.substring(6, 10),弹出123456
		alert(sTr08);
		var sTr09 = "#div";
		alert(sTr09.substring(1)); //弹出 div ,1表示从1号索引开始切到最后

		var sTr10 = "abcdEFG";
		alert(sTr10.toUpperCase()); //弹出ABCDEFG;
		alert(sTr10.toLowerCase()); //弹出abcdefg;


		// 字符串反转
		var sTr11 = 'asdfj12jlsdkf098';
		// split() 将字符串分隔成字符串组成的数组,通过reverse倒置数组,再通过join()将数组成员通过一个分隔符合并成字符串
		alert(sTr11.split("").reverse().join(""));
	</script>
</head>
<body>
	
</body>
</html>

类型转换

直接转换 parseInt() 与 parseFloat()

alert('12'+7); //弹出127
alert( parseInt('12') + 7 );  //弹出19 
alert( parseInt(5.6));  // 弹出5
alert('5.6'+2.3);  // 弹出5.62.3
alert(parseFloat('5.6')+2.3);  // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

隐式转换 “==” 和 “-”

if('3'==3)
{
    alert('相等');
}

// 弹出'相等'
alert('10'-3);  // 弹出7

NaN 和 isNaN

alert( parseInt('123abc') );  // 弹出123
alert( parseInt('abc123') );  // 弹出NaN

定时器

定时器在javascript中的作用

制作动画
异步操作
函数缓冲与节流

定时器类型及语法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器</title>
	<script>
		// 定时器可以隔一段时间调用函数,因此不必写在window.noload中
		function fnMyalert(){
			alert("hello world");
		}
		// 只执行一次的定时器
		// setTimeout(函数名/匿名函数,毫秒值) 单位不写 1000ms=1s;
		var timer01 = setTimeout(fnMyalert,2000);
		//关闭只执行一次的定时器
		clearTimeout(timer01);

		//反复执行的定时器
		var timer02 = setInterval(fnMyalert,1000);
		//关闭定时器
		clearInterval(timer02);
		//匿名函数
		var timer03 = setTimeout(function(){
			alert("匿名函数");
		},1000);
	</script>
</head>
<body>
	
</body>
</html>

案例：定时器制作移动动画-定向移动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器动画</title>
	<style>
		.box{
			width:200px;
			height:200px;
			background-color:gold;
			position:absolute;
			left:0;
			top:100px;
		}
	</style>
	<script>
		/*window.onload = function(){
			var oDiv = document.getElementById("div1");
			var iLeft = 0;
			//30ms 经验值,动画效果连续
			var timer = setInterval(moving,30);
			function moving(){
				iLeft +=2;
				oDiv.style.left = iLeft + "px";
			}
		}*/
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var iLeft = 0;
			//30ms 经验值,动画效果连续
			var timer = setInterval(function(){
				iLeft +=2;
				oDiv.style.left = iLeft + "px";
				if(iLeft>700){
					clearInterval(timer);
				}
			},30);
			
		}
	</script>
</head>
<body>
	<div class="box" id="div1"></div>
</body>
</html>

案例：定时器制作移动动画-往复运动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器动画</title>
	<style>
		.box{
			width:200px;
			height:200px;
			background-color:gold;
			position:absolute;
			left:0;
			top:100px;
		}
	</style>
	<script>
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var iLeft = 0;
			var iSpeed = 3;
			//30ms 经验值,动画效果连续
			var timer = setInterval(function(){
				if(iLeft>100){
					iSpeed = -3;
				}
				if(iLeft<0){
					iSpeed = 3;
				}
				iLeft += iSpeed;
				oDiv.style.left = iLeft + "px";
			},30);
			
		}
	</script>
</head>
<body>
	<div class="box" id="div1"></div>
</body>
</html>

案例：定时器制作无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝滚动</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.btns_con{
			width:1000px;
			height:30px;
			margin:50px auto 0;
			position:relative;
		}

		.left,.right{
			width:30px;
			height:30px;
			background-color:gold;
			position:absolute;
			left:-40px;
			top:124px;
			font-size:30px;
			line-height:30px;
			color:#000;
			font-family: 'Arial';
			text-align:center;
			cursor:pointer;
			border-radius:15px;
			opacity:0.5;
		}

		.right{
			left:1010px;			
			top:124px;			
		}

		.list_con{
			
			width:1000px;
			height:200px;
			border:1px solid #000;
			margin:10px auto 0;
			background-color:#f0f0f0;
			position:relative;
			overflow:hidden;
		}

		.list_con ul{
			list-style:none;
			width:2000px;
			height:200px;
			position:absolute;
			left:0;
			top:0;
		}
		.list_con li{
			width:180px;
			height:180px;
			float:left;
			margin:10px;
		}
	</style>
	<script type="text/javascript">
		/*原理为在原来5个li后即右侧,拼接一张同样的图,实现无缝;
		当两张图向左移动到最后一张也就是第十张末尾时候,瞬间将整个图拉回到起始位置.
		当两张图向右移动时候,由于右边没有内容,因此在开始移动时候,将一张图拉至整个边框最左侧.
		由于整张图拼接了一张图,即使将一张图拉至框的最左侧,框内还留有一张,因此框内并不会出现无内容效果*/
		window.onload = function(){
			var oDiv = document.getElementById("slide");
			var oBtn01 = document.getElementById("btn01");
			var oBtn02 = document.getElementById("btn02");
			//通过标签获取元素，获取的是选择集，加上下标才能获取到元素
			var oUl = document.getElementsByTagName("ul")[0];
			//为了实现无缝滚动,将ul里面的内容复制一份，整个ul里面就包含了10个li
			oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
			var iLeft = 0;
			// 默认开始向右移动
			var iSpeed = 2;
			// 定义一个变量用于存储当鼠标悬停时候的当前速度,便于赋值给鼠标移开后的当前速度
			var iNowspeed = 0;
			// 获取左右两个按钮效果,iLeft >0 往右边移动,<0 往左边移动
			oBtn01.onclick = function(){
				iSpeed = 2;
			}
			oBtn02.onclick = function(){
				iSpeed = -2;
			}
			// 当鼠标悬停onmouseover在图片即oDiv上时候,图片停止运动
			oDiv.onmouseover = function(){
				iNowspeed = iSpeed;
				iSpeed = 0;
			}
			//当鼠标移开onmouseout整个oDiv时候,图片继续保持现有速度和方式运动
			oDiv.onmouseout = function(){
				iSpeed = iNowspeed;
			}
			function moving(){
				iLeft += iSpeed;
				// 1000为整个盒子宽度,也就是5张图一次走完的宽度
				// 当ul向左滚动到第5个li时，瞬间将整个ul拉回到初始位置
				if(iLeft<-1000){
					iLeft = 0;
				}
				// 当ul向右滚动时，瞬间将整个ul拉回到往左的第5个li的位置
				if(iLeft >0){
					iLeft = -1000;
				}
				oUl.style.left = iLeft + "px";
				
			}
			var timer = setInterval(moving, 30);
		}
	</script>
</head>
<body>
	<div class="btns_con">
		<div class="left" id="btn01">&lt;</div>
		<div class="right" id="btn02">&gt;</div>
	</div>
	<div class="list_con" id="slide">
		<ul>
		<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
		</ul>		
	</div>
</body>
</html>

案例：时钟

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>时钟</title>
	<style>
		div{
			text-align:center;
			font-size:30px;
			color:pink;
		}
	</style>
	<script>
		window.onload = function(){
			oDiv = document.getElementById("div1");
			function fnTimego(){
				var sNow = new Date();
				// 获取年月日时分秒
				var iYear = sNow.getFullYear();
				// month默认为0-11,0为1月.因此需要+1
				var iMonth = sNow.getMonth()+1;
				var iDate = sNow.getDate();
				// 星期是从0-6,周日为0
				var iWeek = sNow.getDay();
				var iHours = sNow.getHours();
				var iMinutes = sNow.getMinutes();
				var iSeconds = sNow.getSeconds();

				// 将以上字符串拼接
				var sTr = "当前时间是" +iYear + "年" +iMonth +"月" + iDate +"日" +fnToweek(iWeek)+
				" "+fnTodouble(iHours) +":"+fnTodouble(iMinutes)+":"+fnTodouble(iSeconds);
				oDiv.innerHTML = sTr;
			}
			
			// 修改星期的表现方式
			function fnToweek(n){
				if(n==0){
					return "星期日";
				}
				else if(n==1){
					return "星期一";
				}
				else if(n==2){
					return "星期二";
				}
				else if(n==3){
					return "星期三";
				}
				else if(n==4){
					return "星期四";
				}
				else if(n==5){
					return "星期五";
				}
				else {
					return "星期六";
				}
			}
			// 修改个位数时分秒的表现方式 1 改为01
			function fnTodouble(n){
				if(n<10){
					return "0"+n;
				}
				else{
					return n;
				}
			}
			// 由于定时器开始第1S未开始执行会显示空白,因此先调用一次函数
			fnTimego();
			setInterval(fnTimego,1000);

		}
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

案例：倒计时

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>倒计时</title>
	<script>
		window.onload = function(){
			// 使用匿名函数还是会出现定时器第一秒空白的情况,因此不建议
			setInterval(function(){
				var oDiv = document.getElementById("div1");
				//获取当前时间,实际开发中,需要通过ajax读取后台服务器时间
				var sNow = new Date();
				//未来时间假设为2020年5月1日0:0:0,由于月是0-11因此4月需要用3表示
				var sFuture = new Date(2020,3,30,24,0,0);
				// alert(sFuture -sNow);  弹出结果为毫秒值
				var sLeft = parseInt((sFuture -sNow)/1000); //毫秒转为秒,并取整
				// 计算剩余多少天多少时分秒,一天为86400,24*60*60
				var iDays = parseInt(sLeft/86400);
				var iHours = parseInt((sLeft%86400)/3600);
				var iMinutes = parseInt(((sLeft%86400)%3600)/60);
				var iSeconds = (sLeft%60);
				/*执行结果相同
				var iSecond01 = (((sLeft%86400)%3600)%60);
				var iSeconds = (sLeft%60);
				alert(iSecond01);  
				alert(iSeconds);*/
				var sTr = "距离2020年5月1日还剩:"+fnTodou(iDays)+"天"+fnTodou(iHours)+"时"+fnTodou(iMinutes)+"分"+fnTodou(iSeconds)+"秒";
				oDiv.innerHTML = sTr;
			},1000);
			function fnTodou(n){
				if(n<10){
					return "0"+n;
				}
				else{
					return n;
				}
			}	
		} 
	</script>
	<style>
		div{
			text-align: center;
			color:red;
			font-size:30px;
		}
	</style>
</head>
<body>
	<div id="div1" ></div>
</body>
</html>

变量作用域

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">

		//函数外部定义的是全局变量，函数内部和外部都可以访问
		var iNum01 = 12;

		// 重复定义，后面的会覆盖前面的值
		//var iNum01 = 14;

		function myalert(){

			//var iNum01 = 24;

			// 函数内部定义的是局部变量，函数内部可以访问，外部不能访问
			var iNum02 = 36;

			alert(iNum01);
			iNum01 += 10;
		}


		function myalert02(){
			alert(iNum01);
		}

		myalert();  // 弹出 12
		myalert02();  // 弹出 22

		//alert(iNum02);  出错！



	</script>
</head>
<body>
	
</body>
</html>

封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
一般定义的函数和执行函数：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>封闭函数</title>
	<script>
		/*function Myalert(){
			alert("hello world");
		}
		Myalert();*/
		// 封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
		
		(function(){
			alert("hello world!");
		})();

		/*封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，*/
		function Myalert02(){
			alert("hello world ");
		}
		var iNum01 = 12;
		(function(){
			var iNum01 =24;
			function Myalert02(){
				alert("hello hello!");
			}
			alert("封闭函数内"+iNum01);
			Myalert02();
		})();

		alert("外部变量"+iNum01);
		Myalert02();

		// 还可以在函数定义前加上“~”和“!”等符号来定义封闭函数
		!function(){
			alert("hello");
		}();
		~function(){
			alert("1234");
		}();
		// 在封闭函数前加 ; 可以避免js压缩时出错
		;(function(){
			var iNum01 =24;
			function Myalert02(){
				alert("hello hello!");
			}
			alert("封闭函数内"+iNum01);
			Myalert02();
		})();
	</script>
</head>
<body>
	
</body>
</html>

常用内置对象

document

document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer  //获取上一个跳转页面的地址(需要服务器环境)

location

window.location.href  //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>location属性</title>
	<script>
		window.onload = function(){
			// document.referrer  //获取上一个跳转页面的地址(需要服务器环境)
			//var sUrl = document.referrer;
			var oBtn01 = document.getElementById("btn01");
			oBtn01.onclick = function(){
				// window.location.href  //获取或者重定url地址
				// window.location.href = oUrl;
				window.location.href = "http://www.baidu.com";
			}
		}
	</script>
</head>
<body>
	<input type="button" value="跳转" id="btn01">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>location属性</title>
	<script>
		window.onload = function(){
			var oBody = document.getElementById("body01");
			//通过?传递
			var sData = window.location.search;
			//通过#传递
			var sHash = window.location.hash;
			alert(sHash);
			if(sData!=""){
				/*split() 把一个字符串分隔成字符串组成的数组
				var sTr = '2017-4-22';
				var aRr = sTr.split("-");*/
				//例如传入参数为?aa=1,经过split为[?aa,1],aRr[1]=1,获取到参数值
				var aRr = sData.split("=");
				var iNum = aRr[1];
				if(iNum==1){
					oBody.style.backgroundColor = "gold";
				}
				else if(iNum==2){
					oBody.style.backgroundColor = "green";
				}
				else{
					oBody.style.backgroundColor = "pink";
				}

			}
		}

	</script>
</head>
<body id="body01">
	<h1>038页面</h1>
</body>
</html>

Math

Math.random 获取0-1的随机数，不包括1
Math.floor 向下取整
Math.ceil 向上取整

案例：获取一定范围内随机数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取固定区间的随机数</title>
	<script>
		var iNum_min = 10;
		var iNum_max = 20;
		var aRr = [];
		var aRr2 = [];
		for(var i=0;i<30;i++){
			var iNum = Math.floor((iNum_max-iNum_min)*Math.random() + iNum_min);
			aRr.push(iNum);
		}
		console.log(aRr);
		// 向下取整导致随机数里不含20，且random()不含1
		//若要随机生成里含最大值
		for(var i=0;i<30;i++){
			var iNum2 = Math.floor((iNum_max-iNum_min +1)*Math.random() + iNum_min);
			aRr2.push(iNum2);
		}
		console.log(aRr2);
	</script>
</head>
<body>
	
</body>
</html>

案例：倒计时弹窗

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>倒计时弹框</title>
	<style type="text/css">
		.menu{
			height:80px;
			background-color:gold;
			position:fixed;
			width:960px;
			top:0px;
			/*fixed定位后，left：50%水平居中*/
			left:50%;
			margin-left:-480px;
		}
		p{
			text-align:center;
		}
		.popup{
			width:500px;
			height:300px;
			border:1px solid #000;
			background:#fff;
			position:fixed;
			left:50%;
			margin-left:-251px;
			top:50%;
			margin-top:-151px;
			z-index:999;

		}
		.popup h2{
			background-color:gold;
			margin:10px;
			height:40px;
		}
		.mask{
			position:fixed;
			width:100%;
			height:100%;
			background-color:#000;
			left:0px;
			top:0px;
			/*opacity 透明度*/
			opacity:0.5;
			z-index: 998;
		}
		.pop_con{
			display:none;
		}
	</style>
	<script>
		window.onload = function(){
			var oPop = document.getElementById("pop_con");
			var oBtn = document.getElementById("btn");
			var oPop_tip = document.getElementById("pop_tip");
			var iTime = 5;
			oBtn.onclick = function(){
				oPop.style.display = "block";
				var timer = setInterval(fnDaojishi,1000);
				function fnDaojishi(){
					iTime--;
					oPop_tip.innerHTML = "还有"+iTime+"秒钟关闭弹框";
					if(iTime==0){
						oPop.style.display ="none";
						clearInterval(timer);
						iTime = 5;
						oPop_tip.innerHTML = "还有5秒钟关闭弹框";
					}
				}
			}
		}
	</script>
</head>
<body>
	<div class="menu">菜单文字</div>
	<div class="pop_con" id="pop_con">
			<div class="popup">
			<h2>弹框</h2>
			<br>
			<br>
			<br>
			<br>
			<p id="pop_tip">还有5秒钟关闭弹框</p>
		</div>
		<div class="mask"></div>
	</div>
	<input type="button" value="弹出弹框" id="btn">
	<p>网页文字</p>
	<br>
	<br>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>
	<br>
	<br>
</body>
</html>

jquery

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

官方网站
 版本下载
jquery加载
将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

可以简写为：

<script type="text/javascript">

$(function(){

     ......

});

</script>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery加载</title>
	<script src="js/jquery-1.12.4.min.js">

	</script>
	<script>
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			alert("原生js"+oDiv);
		}
		/*等同于js中window.onload = function(){
	
		}
		$(document).ready(function(){
		})*/
		/*ready()完整写法
		ready()比window.onload 快的原因是因为window.onload()标签加载并渲染完后才运行
		ready()等标签加载完后就运行.
		$(document).ready(function(){
			var $div = $("#div1");
			alert("jquery弹出"+$div);
		})*/

		$(function(){
			var $div = $("#div1");
			alert("jquery弹出"+$div);
		})
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
</body>
</html>

注意：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery引入容易出错的地方</title>
	<!-- 先引入jquery后再新建<script></script> 
	不能在引入jquery的地方直接写js代码 -->
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){

		})
	</script>
</head>
<body>
	<div id="div1">div元素</div>
</body>
</html>

jquery选择器

jquery用法思想一
选择某个网页元素，然后对它进行某种操作
jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素

jquery样式操作

jquery用法思想二
同一个函数完成取值和赋值

操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery选择器</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			// 有id的标签选择用#,class选择用.类名
			var $div = $("#div1");
			$div.css({"color":"red"});
			var $div2 = $(".box");
			$div2.css({"color":"green"});
			var $li = $(".list li");
			// jquery有容错,background-color也兼容
			$li.css({"backgroundColor":"pink","color":"red"});
		})
	</script>
<!-- 	<style>
		#div1{
			color:red;
		}
		.box{
			color:green;
		}
		.list li{
			background-color:pink;
		}
	</style> -->
</head>
<body>
	<div id="div1">这是第一个div元素</div>
	<div class="box">这是第二个div元素</div>
	<div class="box">这是第三个div元素</div>
	<!-- ul.list>li{$}*8 -->
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>
</html>

对选择集进行过滤

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(5); //选择第6个div元素

选择集转移

$('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevAll(); //选择div元素之前所有的同辈元素
$('div').next(); //选择div元素后面紧挨的同辈元素
$('div').nextAll(); //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery选择器过滤</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(document).ready(function(){
			// 针对使用一次的变量可以
			// $("div").css({"backgroundColor":"gold"});
			var $div = $("div");
			$div.css({"backgroundColor":"gold"});
			$div.has("p").css({"fontSize":"30px"});
			$div.eq(4).css({"textIndent":"20px"});
			$div.eq(3).prev().css({"color":"red"});
			$div.find(".tip").css({"fontSize":"30px"});
		})
	</script>
</head>
<body>
	<div>1</div>
	<div><p>2</p></div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div><span>8</span><span class="tip">9</span></div>
</body>
</html>

判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。

var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
$("#div1").hasClass("divClass")//判断是否有divClass样式，若有返回true

绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绑定click事件</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			var $Btn = $("#btn");
			// //方法1
			// $Btn.click(function(){
			// 	// hasClsss()判断是否含有某个样式名,若有返回true
			// 	if($(".box").hasClass("col01")!=true){
			// 		$(".box").addClass("col01");
			// 	}
			// 	else{
			// 		$(".box").removeClass("col01")
			// 	}
				
			// })
			//方法2
			$Btn.click(function(){
				$(".box").toggleClass("col01");
			})
		})
	</script>
	<style>
	.box{
		width:200px;
		height:200px;
		background-color:gold;
	}
	.col01{
		background-color: green;
	}
</style>
</head>
<body>
	<input type="button" id="btn" value="切换样式">
	<div class="box">div元素</div>
</body>
</html>

获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

$(function(){
			var $Li = $(".list li");
			// alert($Li.eq(3).index());  //3
			// $('div').filter('.myClass'); //选择class等于myClass的div元素
			// 有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取
			alert($Li.filter(".myli").index());  //4
		})
......
<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li class="myli">5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>

案例：选项卡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			var $Btn = $(".btns input");
			var $Div = $(".cons div");
			$Btn.click(function(){
				/*js:this 表示当前点击/选中的对象
				jquery:$(this)*/
				// $('div').siblings(); //选择除了自身外所有的div的同级元素
				// 当前选中对象添加current,且除this外的元素删除current
				$(this).addClass("current").siblings().removeClass("current");
				//将当前点击按钮的索引和cons中的div关联起来
				//alter($(this).index()); // 0 1 2
				$Div.eq($(this).index()).addClass("active").siblings().removeClass("active");
				
			})
		})
	</script>
	<style>
		.btns input{
			width:100px;
			height:40px;
			background-color: #ddd;
			border:0;
		}
		.btns .current{
			background-color:gold;
		}
		.cons div{
			width:500px;
			height:300px;
			background-color: gold;
			display:none;
			text-align: center;
			line-height: 300px;
			font-size:30px;
		}
		.cons .active{
			display:block;
		}
	</style>
</head>
<body>
	<div class="btns">
		<input type="button"  value="01" class="current">
		<input type="button"  value="02">
		<input type="button"  value="03">
	</div>
	<div class="cons">
		<div class="active">选项卡1的内容</div>
		<div>选项卡2的内容</div>
		<div>选项卡3的内容</div>
	</div>
</body>
</html>

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery特殊效果</title>
	<script src="./js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			var $Btn = $("#btn");
			$Btn.click(function(){
				//fadeIn/Out(1000,"swing",function(){})
				// 3个参数分别代表时间,运动曲线,回调函数
				//运动方式有swing缓冲运动和linear匀速运动
				$(".box").fadeIn(1000,"swing",function(){
					alert("动画结束");
				})
			})
		})
		$(function(){
			$("#btn01").click(function(){
				$(".box").fadeToggle();
			})
		})
		$(function(){
			$("#btn02").click(function(){
				// hide() 隐藏元素/toggle()切换/show() 显示元素 
				$(".box").toggle();
			})
		})
		$(function(){
			$("#btn03").click(function(){
				/*slideDown() 向下展开
				slideUp() 向上卷起
				slideToggle() 依次展开或卷起某个元素*/
				$(".box").slideDown(1000,function(){
					alert("由于盒子默认隐藏,因此不能卷起,但可以展开");
				});
			})
		})
	</script>
	<style>
		.box{
			width:300px;
			height:300px;
			background-color:gold;
			display:none;
		}
	</style>
</head>
<body>
	<input type="button" value="动画" id="btn">
	<input type="button" value="切换淡入淡出" id="btn01">
	<input type="button" value="切换显示隐藏" id="btn02">
	<input type="button" value="展开" id="btn03">
	<div class="box"></div>
</body>
</html>

jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

案例：层级选项卡
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级菜单</title>
	
	
	<style type="text/css">
		body{
			font-family:'Microsoft Yahei';
		}
		body,ul{
			margin:0px;
			padding:0px;
		}
		
		ul{
			list-style:none;
		}


		.menu{
			width:200px;
			margin:20px auto 0;
		}

		.menu .level1,.menu li ul a{
			display:block;
			width:200px;
			height:30px;
			line-height:30px;
			text-decoration:none;
			background-color:#3366cc;
			color:#fff;
			font-size:16px;
			text-indent:10px;			
		}

		.menu .level1{
			border-bottom:1px solid #afc6f6;
			
		}

		.menu li ul a{
			font-size:14px;
			text-indent:20px;
			background-color:#7aa1ef;
					
		}

		.menu li ul li{
			border-bottom:1px solid #afc6f6;
		}

		

		.menu li ul{
			display:none;
		}

		.menu li ul.current{
			display:block;
		}

		.menu li ul li a:hover{
			background-color:#f6b544;
		}


	</style>
	
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">
		
		$(function(){

			$('.level1').click(function(){

				/*当前点击的元素$(this)即a
				紧挨的同辈元素next()即ul
				slideToggle()向下展开，
				再跳到parent()此元素的父级(li),
				再跳到此父级的其他的同辈元素siblings()即(li),
				选择其他同辈元素children('ul')即(li)的子元素ul，然后将它向上收起slideUp()。
				通过stop() 可以修正反复点击导致的持续动画的问题*/
				$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
			})

		})

	</script>
</head>
<body>
	<ul class="menu">
		<li>
			<a href="#" class="level1">水果</a>
			<ul class="current">
				<li><a href="#">苹果</a></li>
				<li><a href="#">梨子</a></li>
				<li><a href="#">葡萄</a></li>
				<li><a href="#">火龙果</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">海鲜</a>
			<ul>
				<li><a href="#">蛏子</a></li>
				<li><a href="#">扇贝</a></li>
				<li><a href="#">龙虾</a></li>
				<li><a href="#">象拔蚌</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">肉类</a>
			<ul>
				<li><a href="#">内蒙古羊肉</a></li>
				<li><a href="#">进口牛肉</a></li>
				<li><a href="#">野猪肉</a></li>				
			</ul>
		</li>
		<li>
			<a href="#" class="level1">蔬菜</a>
			<ul>
				<li><a href="#">娃娃菜</a></li>
				<li><a href="#">西红柿</a></li>
				<li><a href="#">西芹</a></li>
				<li><a href="#">胡萝卜</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">速冻</a>
			<ul>
				<li><a href="#">冰淇淋</a></li>
				<li><a href="#">湾仔码头</a></li>
				<li><a href="#">海参</a></li>
				<li><a href="#">牛肉丸</a></li>
			</ul>
		</li>
		
	</ul>
</body>
</html>

jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

$('#div1').animate({
    width:300,
    height:300
},1000,'swing',function(){
    alert('done!');
});

参数可以写成数字表达式：

$('#div1').animate({
    width:'+=100',
    height:300
},1000,'swing',function(){
    alert('done!');
});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animate动画</title>
	<script src="./js/jquery-1.12.4.min.js"></script>
	<script>
		// animate类似与css的transition
		$(function(){
			$("#btn01").click(function(){
				$(".box").animate({"width":"200px"});
			})
		})
		$(function(){
			$("#btn02").click(function(){
				$(".box").animate({"width":"400px","height":"400px"});
			})
		})
		$(function(){
			$("#btn03").click(function(){
				$(".box").animate({"width":"500px"},1000,function(){
					$(".box").animate({"height":"500px"},function(){
						// opacity透明度
						$(".box").animate({"opacity":"0"});
					})
				})
			})
		})
		$(function(){
			$("#btn04").click(function(){
				$(".box2").stop().animate({"width":"+=100"});
			})
		})
	</script>
	<style>
		.box,.box2{
			width:100px;
			height:100px;
			background-color: gold;
		}

	</style>
</head>
<body>
	<input type="button" value="宽度改变" id="btn01">
	<input type="button" value="宽高同时改变" id="btn02">
	<input type="button" value="先宽后高改变" id="btn03">
	<input type="button" value="参数表示数学式" id="btn04">
	<div class="box"></div>
	<br>
	<br>
	<br>
	<div class="box2"></div>
</body>
</html>

案例：滑动选项卡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			var $Btn = $(".btns input");
			var $slides = $(".cons .slides");
			$Btn.click(function(){
				/*js:this 表示当前点击/选中的对象
				jquery:$(this)*/
				// $('div').siblings(); //选择除了自身外所有的div的同级元素
				// 当前选中对象添加current,且除this外的元素删除current
				$(this).addClass("current").siblings().removeClass("current");
				//将当前点击按钮的索引和cons中的div关联起来
				//alter($(this).index()); // 0 1 2
				$slides.stop().animate({"left":-500*$(this).index()});
				
			})
		})
	</script>
	<style>
		.btns input{
			width:100px;
			height:40px;
			background-color: #ddd;
			/*去除按钮自身的背景框*/
			border:0;
			/*去除按钮上选中时候响应的边框*/
			outline: none;
		}
		.btns .current{
			background-color:gold;
		}
		.cons{
			width:500px;
			height:300px;
			overflow:hidden;
			position:relative;
		}
		.cons .slides{
			width:1500px;
			height:300px;
			position:absolute;
		}
		.cons .slides div{
			width:500px;
			height:300px;
			background-color: gold;
			/*display:none;*/
			text-align: center;
			line-height: 300px;
			font-size:30px;
			float:left;
		}
		.cons .active{
			display:block;
		}
	</style>
</head>
<body>
	<div class="btns">
		<input type="button"  value="01" class="current">
		<input type="button"  value="02">
		<input type="button"  value="03">
	</div>
	<div class="cons">
		<div class="slides">
			<div class="active">选项卡1的内容</div>
			<div>选项卡2的内容</div>
			<div>选项卡3的内容</div>
		</div>
	</div>
</body>
</html>

尺寸相关、滚动事件

获取和设置元素的尺寸

width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取元素尺寸</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			var $Div = $(".box");
			//盒子内容宽高
			console.log($Div.width()); //300
			console.log($Div.height()); //200

			//盒子内容+两边padding
			console.log($Div.innerWidth());  //300+20*2
			console.log($Div.innerHeight()); //200+20*2

			//盒子内容+两边padding+border即盒子真实尺寸
			console.log($Div.outerWidth());  //300+20*2+20*2
			console.log($Div.outerHeight()); //200+20*2+20*2

			//盒子内容+padding+border+margin
			console.log($Div.outerWidth(true));  // 300+20*2+20*2+30*2
			console.log($Div.outerHeight(true)); //200+20*2+20*2+30*2
		})
	</script>
	<style>
		.box{
			width:300px;
			height:200px;
			padding:20px;
			border:20px solid #000;
			margin:30px;
			background-color:gold;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

获取元素相对页面的绝对位置

offset()

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取元素绝对位置</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			var $Div = $(".box");
			$Div.click(function(){
				var oPos = $Div.offset();
				alert(oPos.left);
				document.title = oPos.left+"|"+oPos.top;
			})
			// var $oPos = $Div.offset();
			// console.log($oPos);  //Object {top: 50, left: 102}
		})
	</script>
	<style>
		.box{
			width:200px;
			height:200px;
			background-color:gold;
			margin:50px auto 0;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

在这里插入图片描述
案例：模拟加入购物车动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>加入购物车</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>

		$(function(){
			var $btn = $(".add");
			var $chart = $(".chart");
			var $count = $(".chart em");
			var $point = $(".point");
			//获取两个div的盒子的实际宽高,便于将圆点置于中间位置
			var $w01 = $btn.outerWidth();
			var $h01 = $btn.outerHeight();

			var $w02 = $chart.outerWidth();
			var $h02 = $chart.outerHeight();

			$btn.click(function(){
				//获取两个盒子的绝对位置
				var oPos01 = $btn.offset();
				var oPos02 = $chart.offset();
				//默认圆点为隐藏,需要在点击加入购物车后,将圆点显示在div中间位置
				$point.css({"left":oPos01.left+parseInt($w01/2)-8,"top":oPos01.top+parseInt($h01/2)-8});
				$point.show();
				//通过animate实现点击后,将圆点从加入购物车移动到购物车,并隐藏
				$point.animate({"left":oPos02.left+parseInt($w02/2)-8,"top":oPos02.top+parseInt($h02/2)-8},1000,function(){
					//移动圆点到指定位置后,隐藏圆点,并修改em中的值也就是购物数量
					$point.hide();
					//通过.html()获取em中的值,返回类型为string,相当于css中的innerHTML
					var iNum = $count.html();
					//修改em的值
					$count.html(parseInt(iNum)+1);

				});


			})

		})
	</script>
	<style>
		.chart{
			width:150px;
			height:50px;
			text-align:center;
			line-height: 50px;
			float:right;
			border:2px solid #000;
			margin-right:50px;
			margin-top:100px;
		}
		.chart em{
			font-style: normal;
			color:red;
			font-weight:bold;
		}
		.add{
			width:100px;
			height:50px;
			background-color:green;
			border:0;
			color:#fff;
			float:left;
			margin-top:300px;
			margin-left:300px;
			outline:none;
		}
		.point{
			width:16px;
			height:16px;
			background-color: red;
			/*便于定位,将小圆点设置为固定定位*/
			position:fixed;
			left:0;
			top:0;
			border-radius: 8px;
			display:none;
			/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
			z-index:999;
		}
	</style>
</head>
<body>
	<div class="chart">购物车<em>0</em></div>
	<input type="button" value="加入购物车" class="add">
	<div class="point"></div>
</body>
</html>

获取浏览器可视区宽度高度

$(window).width();
$(window).height();

获取页面文档的宽度高度

$(document).width();
$(document).height();

获取页面滚动距离

$(document).scrollTop();  
$(document).scrollLeft();

页面滚动事件

$(window).scroll(function(){  
    ......  
})

案例：置顶菜单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>置顶菜单</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			var $menu = $(".menu");
			var $menu_back = $(".menu_back");
			var $totop = $(".totop");
			$(window).scroll(function(){
				var iNum = $(document).scrollTop();
				document.title = iNum;
				if(iNum>200){
					//定位元素水平居中方式:1.left = 50%,2.margin-left = -(width/2)
					$menu.css({"position":"fixed","left":"50%","top":"0px","marginLeft":"-480px"});
					$menu_back.show();
					$totop.fadeIn();
				}
				else{
					//static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
					$menu.css({"position":"static","marginLeft":"auto"});
					$menu_back.hide();
					$totop.fadeOut();
				}
				/*if(iNum>400){
					$totop.fadeIn();
				}
				else{
					$totop.fadeOut();
				}
*/
			})
			$totop.click(function(){
				//针对不同浏览器,兼容写法$("html,body")
				$("html,body").animate({"scrollTop":0});
			})
		})
	</script>
	<style>
		body{
			margin:0;
		}
		.banner{
			width:960px;
			height:200px;
			background-color:cyan;
			margin:0 auto;

		}
		.menu{
			width:960px;
			height:80px;
			background-color:gold;
			margin:0 auto;
			text-align:center;
			line-height:80px;
			opacity:0.3;
/* 			{
		        opacity:0.1;
		        兼容IE
		        filter:alpha(opacity=10); 
		    } */
		}
		.menu_back{
			width:960px;
			height:80px;
			margin:0 auto;
			display:none;
		}
		p{
			text-align:center;
			color:red;
		}
		.totop{
			width:60px;
			height:60px;
			background-color:blue;
			color:#fff;
			font-size:40px;
			text-align:center;
			line-height:60px;
			position:fixed;
			right:20px;
			bottom:50px;
			border-radius:50%;
			cursor:pointer;
			display:none;
		}
	</style>
</head>
<body>
	<div class="banner"></div>
	<div class="menu">菜单</div>
	<!-- 创建一个和menu样式相当的隐藏div用于占位,防止向下滚动时候出现跳变 -->
	<div class="menu_back"></div>
	<div class="totop">↑</div>


	<p>文档内容</p>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<p>文档内容</p>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<p>文档内容</p>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<p>文档内容</p>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<p>文档内容</p>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
</body>
</html>

jquery属性操作

html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

prop() 取出或设置某个属性的值

// 取出图片的地址

var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性

$('#img1').prop({src: "test.jpg", alt: "Test Image" });

jquery循环

对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery循环</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			var $li = $(".list li");
			/*$li.css({"backgroundColor":"gold"});
			$li.eq(0).css({"backgroundColor":"gold"});*/
			$li.each(function(){
				// alert($(this).html()); //弹8次 执行8次
				if($(this).index() % 2==0){
					$(this).css({"backgroundColor":"gold"});
				}
			})
		})
	</script>
</head>
<body>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>
</html>

案例：手风琴效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<style>
	*{
		margin:0;
		padding:0;
	}
	body{
		font-size:12px;
	}
	#accordion{
		width:727px; 
		height:350px; 
		margin:100px auto 0; 
		position:relative; 
		overflow:hidden; 
		border:1px solid #CCC;
	}

	#accordion ul{
		list-style:none;
	}
	#accordion ul li{
		width:643px;
		height:350px; 
		position:absolute; 
		background:#FFF;
	}
	#accordion ul li span{
		display:block;
		width:20px; 
		height:350px; 
		float:left; 
		text-align:center; 
		color:#FFF; 
		padding-top:5px; 
		cursor:pointer;
	}
	#accordion ul li img{
		display:block; 
		float:right;
	}
	.bar01{
		left:0px;
	}
	.bar02{
		left:643px;
	}
	.bar03{
		left:664px;
	}
	.bar04{
		left:685px;
	}
	.bar05{
		left:706px;
	}
	.bar01 span{
		background:#09E0B5;
	}
	.bar02 span{
		background:#3D7FBB;
	}
	.bar03 span{
		background:#5CA716;
	}
	.bar04 span{
		background:#F28B24;
	}
	.bar05 span{
		background:#7C0070;
	}
</style>

<script type="text/javascript">
		$(function(){

			var $li = $('#accordion li');

			$li.click(function(){

				//alert($(this).html());
				//21是小标签宽度,21*$(this).index()就是每个的left定位位置
				$(this).animate({'left':21*$(this).index()});

				//点击的li,前面的li向左运动到各自的位置
				$(this).prevAll().each(function(){

					//这里的$(this)指的是循环选择的每个li
					$(this).animate({'left':21*$(this).index()});
				})
				//   第5个li在右边的left值   727-21*1 等同于 727-21*(5-$(this).index())
				//   第4个li在右边的left值   727-21*2 等同于 727-21*(5-$(this).index())
				//   第3个li在右边的left值   727-21*3 等同于 727-21*(5-$(this).index())

				$(this).nextAll().each(function(){

					$(this).animate({'left':727-21*(5-$(this).index())});
				})
			})
		})
</script>
<title>手风琴效果</title>
</head>

<body>
<div id="accordion">
	<ul>
	<li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
    <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
    <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
    <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
    <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
	</ul>
</div>
</body>
</html>

jquery事件

blur() 元素失去焦点  //用于表单验证
focus() 元素获得焦点   //用于表单验证
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数 //类似于toggle
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单

绑定事件的其他方式

$(function(){
			// $("#btn").click(function(){})
			//点击或者移入的时候,都执行绑定的匿名函数
			$("#btn").bind("click mouseover",function(){
				alert("触发事件绑定的函数");
				//解绑事件
				$(this).unbind("mouseover");
			})
		})

事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止
阻止默认行为
阻止表单提交

$('#form1').submit(function(event){
    event.preventDefault();
})
$('#form1').submit(function(event){
    event.preventDefault();
})

合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

// event.stopPropagation();
// event.preventDefault();

// 合并写法：
return false;

案例：页面弹框（点击弹框外弹框关闭）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面弹框（点击弹框外弹框关闭）</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			$("#btn").click(function(){
				$(".pop_con").show();
				return false;
			})
			$(document).click(function(){
				$(".pop_con").fadeOut();
			})
			$(".pop").click(function(){
				return false;
			})
			$(".pop .close").click(function(){
				$(".pop_con").fadeOut();
			})
		})
	</script>
	<style>
		.pop_con{
			display: none;
		}
		.pop{
			position:fixed;
			width:500px;
			height:300px;
			background-color:#fff;
			border:3px solid #000;
			left:50%;
			top:50%;
			margin-top:-150px;
			margin-left:-250px;
			z-index:9999;
		}
		.mask{
			position: fixed;
			width:100%;
			height:100%;
			background-color:#000;
			opacity:0.3;
			filter: alpha(opacity=30);
			left:0;
			top:0;
			z-index: 9990;
		}
		.pop .close{
			float:right;
			font-size:30px;
			text-decoration: none;
			color:#ddd;
		}

	</style>
</head>
<body>
	<input type="button" value="弹出" id="btn">
	<div class="pop_con">
		<div class="pop">
			弹框里面的文字
			<input type="text" placeholder="输入内容">
			<a href="#" class="close">X</a>
		</div>
		<div class="mask"></div>
	</div>
</body>
</html>

事件委托

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件委托</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function(){
			/*
			$(".list li").click(function(){
				$(this).css({"backgroundColor":"red"});

			})
			//新建一个li元素 增加到ul子集的最后面
			var $li = $("<li>9</li>");
			$(".list").append($li);
			//让新加入的li有相同事件,需要单独绑定
			$li.click(function(){
				$(this).css({"backgroundColor":"red"});
			})
			*/

			//事件委托
			/*事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。*/
			$(".list").delegate('li', 'click', function(event) {
				// $(this)指每次委托的子元素
				$(this).css({"backgroundColor":"red"});
			});
			//事件委托的方式不需要单独给新加入的li单独绑定相同事件
			var $li = $("<li>9</li>")
			$(".list").append($li);
		})
	</script>
	<style>
		.list{
			background-color:gold;
			list-style: none;
			padding:10px;
		}
		.list li{
			height:30px;
			background-color: green;
			margin:10px;
		}
	</style>
</head>
<body>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>
</html>

jquery元素节点操作

创建节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

插入节点

append()和appendTo()：在现存元素的内部，从后面插入元素
prepend()和prependTo()：在现存元素的内部，从前面插入元素
after()和insertAfter()：在现存元素的外部，从后面插入元素
before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

$('#div1').remove();

案例：todolist(计划列表)实例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<style type="text/css">
		.list_con{
			width:600px;
			margin:50px auto 0;
		}
		.inputtxt{
			width:550px;
			height:30px;
			border:1px solid #ccc;
			padding:0px;
			text-indent:10px;			
		}
		.inputbtn{
			width:40px;
			height:32px;
			padding:0px;
			border:1px solid #ccc;
		}
		.list{
			margin:0;
			padding:0;
			list-style:none;
			margin-top:20px;
		}
		.list li{
			height:40px;
			line-height:40px;
			border-bottom:1px solid #ccc;
		}

		.list li span{
			float:left;
		}

		.list li a{
			float:right;
			text-decoration:none;
			margin:0 10px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $inputtxt = $("#txt1");
			var $btn = $("#btn1");
			var $ul = $("#list");

			$btn.click(function(){
				//获取input输入框的内容
				var $val = $inputtxt.val();
				if($val == ""){
					alert("请输入内容");
					return;
				}
				var $li = $('<li><span>'+$val+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
				$ul.append($li);
				// 添加完成后,清空输入框内容
				$inputtxt.val("");
				/*	由于不是事件委托,因此需要对新增加标签的同样事件重复定义行为
				$('div').find('.myClass'); //选择div内的class等于myClass的元素
				var $a = $li.find('.del');

				$a.click(function(){
					$(this).parent().remove();
				})*/
			})
			$ul.delegate("a", "click", function() {
				//prop() 取出或设置某个属性的值
				var $handler = $(this).prop("class");
				if($handler =="del"){
					// parent()在这里指a的父类,也就是li
					$(this).parent().remove();
				}
				if($handler == "up"){
					if($(this).parent().prev().length== 0){
						alert('到顶了！');
						return;
					}
					else{
						$(this).parent().insertBefore($(this).parent().prev());
					}
				}
				if($handler == "down"){
					if($(this).parent().next().length== 0){
						alert('到底了！');
						return;
					}
					else{
						$(this).parent().insertAfter($(this).parent().next());
					}
					
				}
			})
			
		})

	</script>	
</head>
<body>

	<div class="list_con">
	<h2>To do list</h2>
		<input type="text" name="" id="txt1" class="inputtxt">
		<input type="button" name="" value="增加" id="btn1" class="inputbtn">
		
		<ul id="list" class="list">
			<li>
				<span>学习html</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
			</li>
			<li>
				<span>学习css</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
			</li>
			<li>
				<span>学习javascript</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
			</li>

		</ul>

	</div>
</body>
</html>

滚轮事件与函数节流

jquery.mousewheel插件
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js

<script src="js/jquery.mousewheel.js"></script>

$(function(){
	$(window).mousewheel(function(event,dat){
	...
	})
})

函数节流
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。
案例：整屏滚动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>整页滚动</title>
	<link rel="stylesheet" type="text/css" href="css/test.css">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript">
		$(function(){
			//使页面高度和屏幕可视区同宽
			var $h = $(window).height();
			var $pages = $(".pages");
			$pages.css({"height":$h});

			var $screen = $(".pages_con");

			//定义一个参数用于接收dat的值,判断滚动方向和次数
			var $nowscreen = 0;  

			//定义一个变量用于统计页面页数
			var $len = $pages.length; //5

			// 由于刚进页面后,未发生mousewheel事件,需要手动添加第一屏动画
			$pages.eq(0).addClass('moving');

			//获取屏幕右侧圆点
			var $points = $(".points li");

			//定义一个空对象,用于定时器节流处理高频触发事件
			var $timer = null;

			$(window).mousewheel(function(event,dat){
				//每次触发前,先清空之前的定时器,保留最后一次的timer
				clearTimeout($timer);
				// 在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。
				timer = setTimeout(function(){
				// alert(dat); // 向上1,向下-1
				if(dat ==-1){
					$nowscreen ++;
				}
				else{
					$nowscreen --;
				}
				//页面最多5屏,需要对$nowscreen作以限制
				if($nowscreen<0){
					$nowscreen = 0;
				}
				if($nowscreen>$len -1){
					$nowscreen = $len -1;
				}
				$screen.animate({"top":-$h*$nowscreen},300);

				//通过将moving加入到滚动到的每一屏中实现动画效果,同时,取消其他屏的moving动画,否则回翻无动画效果
				//$('div').siblings(); //选择div的同级元素
				$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
				//当翻页后,每页右侧小圆点的动画效果
				$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
				},200)
			})

			//点击右侧圆圈实现切换页面
			$points.click(function(){
				$nowscreen = $(this).index();
				$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
				//翻页效果和当前页动画
				$screen.animate({"top":-$h*$nowscreen},300);
				$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');

			})
		})

	</script>	
</head>
<body>
	<div class="pages_con">
		<div class="pages page1">
			<div class="main_con">
				<div class="left_img"><img src="images/001.png"></div>
				<div class="right_info">
				Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
					
				</div>
			</div>
		</div>

		<div class="pages page2">
			<div class="main_con">
				<div class="right_img"><img src="images/002.png"></div>
				<div class="left_info">
				2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
				</div>
			</div>
			
		</div>

		<div class="pages page3">
			<div class="main_con">
				<div class="left_img"><img src="images/004.png"></div>
				<div class="right_info">
				以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

					
				</div>
			</div>			
		</div>

		<div class="pages page4">
			<div class="main_con">
				<div class="left_img"><img src="images/003.png"></div>
				<div class="right_info">
					Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
				</div>
			</div>			
		</div>

		<div class="pages page5">
			<div class="main_con">
				<div class="center_img"><img src="images/005.png"></div>		
			</div>
			
		</div>
	</div>
	<ul class="points">
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>

json

json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
javascript自定义对象：

var oMan = {
    name:'tom',
    age:16,
    talk:function(s){
        alert('我会说'+s);
    }
}

json格式的数据：

{
    "name":"tom",
    "age":18
}

与json对象不同的是，json数据格式的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。
json的另外一个数据格式是数组，和javascript中的数组字面量相同。

ajax与jsonp

ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。
同步和异步
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。
局部刷新和无刷新
ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。
同源策略
ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：

XMLHttpRequest cannot load https://www.baidu.com/. No  
'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.

$.ajax使用方法
常用参数：

url 请求地址
type 请求方式，默认是’GET’，常用的还有’POST’
dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
data 设置发送给服务器的数据
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步，默认值是’true’，表示异步

以前写法

$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
        alert(data.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});

现在写法

$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
})
.done(function(data) {
    alert(data.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

// data.json里面的数据： {"name":"tom","age":18}

本地存储

本地存储分为cookie，以及新增的localStorage和sessionStorage

cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。
```
jquery 设置cookie
//$.cookie(键名,'键值',{过期时间:天数,存储路径:根目录下'/'})
$.cookie('mycookie','123',{expires:7,path:'/'});
jquery 获取cookie
$.cookie('mycookie');
```
localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。
```
//设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';

//获取：
localStorage.getItem("dat");
localStorage.dat

//删除
localStorage.removeItem("dat");
```
sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。
localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。

吃一口桃酥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端(三)js、jquery-学习笔记整理

JavaScriptJavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。前端三大块HTML：页面结构CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能JavaScript嵌入页面的方式
复制链接

扫一扫