javascript第六周学习

shuixianwa_水仙娃的搬砖日常
90 阅读7分钟

***###### ***第一天

1、XML数据格式： 面试题：HTML、XHTML、DHTML、XML分别是什么？ HTML - 网页（预定义标签） XHTML - 更严格的网页 DHTML - 动态效果的网页：并不是新技术，只是统称：HTML+CSS+JS(dom) XML - 配置文件|数据格式 - 现在几乎没人使用，因为最流行的是JSON - 未知的标签语言（没有任何一个预定义的标签，所有标签都需要你自定义）

如何使用： 1、创建后缀名.xml的文件 2、声明头部： version：版本只能用1.0，还有1.1，但是1.1版本几乎无人使用，所以1.0是目前唯一的版本，而且以后都不用学习新的了 encoding：设置中文编码 3、创建一个根标签：必须是双标签，只能有一个 - 标签名你随意 4、里面想放什么标签，你随意 5、打开查看：apache打开，依然使用服务器端方式进行访问 6、前端依然使用ajax获取xml数据： 不同： 1、url->"xx.xml"; 2、xhr.reponseText->xhr.responseXML;

		var xhr=new XMLHttpRequest();
		xhr.open("GET","01我们的第一个xml文件.xml");
		xhr.send(null);
		xhr.onreadystatechange=()=>{
			if(xhr.readyState==4&&xhr.status==200){
				var dom=xhr.responseXML;//返回的dom我们可以使用核心DOM进行解析数据
			}
		}

	XML缺点：解析数据过于繁琐
	1、以后根本不会见到
	2、以后就算见到也不会是一个xml文件

2、*****JSON数据格式：Javascript Object Notation：js对象表示法 作用：数据格式 - 文本数据 比XML更简洁，更快，更容易解析 1、认识【JSON字符串】： 1、'[1,2,3,4,5]'; 2、'{"name":"代老湿"}'; *3、'[{},{},{},{}]'; 4、'{"names":[姓名1,姓名2,...],"age":[年龄1,年龄2,...]}'

2、服务器端如何将数据变为JSON字符串： PHP：echo JSON_encode($arr); Node：JSON.stringify(arr);

3、前端如何将JSON字符串拿到变为JSON对象： 1、eval("("+json字符串+")"); 2、JSON.parse(json字符串);

3、百度地图： 步骤： 1、打开百度搜索 百度地图开放平台 2、注册/登录 百度账号 3、拉到最下面 注册成为开发者 4、来到控制台->应用管理->我的应用->创建应用 5、应用的名称随意->浏览器端应用->白名单：填入* 6、成功获取到百度提供的密钥 7、打开导航条里面的开发文档->javascript API->示例DEMO 8、挑选你喜欢的百度地图：梭代码->改文字，改经纬度

 9、特殊：百度地图更新分为：普通地图 和 GL版地图 两者不能混搭使用，其余都可以

**###### **第二天

1、XML格式：已经淘汰了 用法： 1、文档声明： 2、根标签只能有一个，且是一个双标签 3、其余的随便

前端：依然使用ajax进行获取数据，
	xhr.open("GET","xx.xml");
	xhr.responseXML - 可以使用核心DOM去获取你需要的部分

2、JSON格式 1、认识了哪些叫做json字符串： '[]' '{}' '[{},{},{}]' '{"names":[]}'

2、服务器端如何将数据变为JSON字符串： PHP：JSON_encode($arr); Node：JSON.stringify(arr);

3、客户端获取到数据后要解析为JSON对象： eval("("+xhr.reponseText+")"); JSON.parse(xhr.responseText);

**###### **第三天

0、从现在开始到毕业： 1、不用记得东西 - 习惯使用帮助文档（百度、bing、google、官方文档） 2、代码速度要提高 - 下班准时，更多学习时间

1、jquery概念： jQuery是一个js类库，类库：其实就是一个js文件，别人提供的对象（属性和方法）：压缩版（正式上线项目）和未压缩的源代码版 目的：简化js - DOM、事件、ajax 版本： 1.11.3 - 2.xx版本以上就不再支持老IE，做了向上兼容，1.11.3版本也能使用到最新的特性 2.xx 3.xx

常识题：jQuery有的人称呼叫做js库，而有的人称呼叫做js框架 那些称呼jQuery是一个库的人都是不够了解：jQuery由4个方面组成 1、jquery.js - 库：简化了js，大部分人只知道这一部分 2、jQuery.ui - 提供了页面的组件（组成页面一部分的部件） - 过时（效果有点老，以后也有更棒，网上一大把） 3、jQuery.mobile - 移动端开发，不会学习，现在更流行uniapp 4、Qunit - 测试人员（不需要会代码，英语好）用于测试javascript的工具

曾经jQuery是全球最火的一个js库 现在三大框架：vue、react、angluar 目前市场上流传的库大概有8000+： 问题：没有办法全部学习：需要通过某个库，来学习库的特点（简化：越简单越轻松）

2、jQuery的使用步骤： 1、引入jQuery.js文件 2、使用jQuery的API去获取元素 3、使用jQuery的API去操作元素

3、jQuery如何获取元素： 1、*工厂函数：因为这个工厂可以做很多操作 ();或者jQuery();作用：1、查找元素语法：var元素=(); 或者 jQuery(); 作用： 1、查找元素 语法：var 元素=("jQuery选择器") - jQuery选择器是基于css选择器，但是比css选择器更加的强大

	   jQuery选择器不需要任何记忆：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
	   返回值：使用jQuery的工厂函数找到的元素，是一个jQuery对象集合，意味着不能使用以前的DOM方法去操作

  	   1、jq找到的元素的特点：
	      1、隐式迭代 - 不用循环，直接做操作
	      2、具有链式操作 - 可以不断的使用.一步接一步的做下去
	      3、jq元素 和 dom元素 两者方法不换乱用，只能自己用自己的
		 转换：
		   jq -> dom：$("选择器")[i] - 只要加上下标就会变为DOM元素
				绝对不要这么用，不希望把简单的变得麻烦
				提出一点：千万不要对jq加下标，更不要循环

  2、将dom -> jq：$(dom元素) - 有用：e.srcElement得到的都是一个dom元素，要转为jQuery元素才能使用对应的方法

	为什么一个方法可以实现多个操作
	function $(){
		arguments - 重载：判断传入的实参的不同执行不同的操作
	}

2、通过 节点之间的 关系： 1、父：("xx").parent()2、子：("xx").parent() 2、子：("xx").children() 3、前一个兄弟：("xx").prev();4、后一个兄弟：("xx").prev(); 4、后一个兄弟：("xx").next(); 5、*除了自己的其他兄弟：$("xx").siblings();

jQuery查找元素，返回值：jquery集合，可以直接做操作，切忌不要循环

4、操作元素 内容： html() - 底层就是dom的innerHTML - 能够识别标签 获取：("xx").html();设置：("xx").html(); 设置：("xx").html("新内容");

text() - 底层就是dom的innerText - 只能书写纯文本
获取：$("xx").text();
设置：$("xx").text("新内容");

val() - 底层就是dom的value - 单标签input、select&option
获取：$("xx").val();
设置：$("xx").val("新内容");

属性： attr() - 底层就是dom的getAttribute/setAttribute - 自定义属性也可以操作 获取：("xx").attr("属性名")设置：("xx").attr("属性名") 设置：("xx").attr("属性名","属性值"); 删除：$("xx").removeAttr("属性名")

专门提供了操作class的API：
	1、追加class：$("xx").addClass("追加的class值")
	2、删除class：$("xx").removeClass();
		没传参数，清空所有class
		传递实参，删除你传递的class
	3、切换class：有此class和没有此class之间进行切换
			$("xx").toggleClass("active");//在有active和没有active之间进行切换

样式： css() - 设置时依然是内联样式（优先级高，不会影响到其他元素），获取时不关注内联/内部/外部样式表，只管当前生效的 获取：("xx").css("属性名");设置：("xx").css("属性名"); 设置：("xx").css({ "属性名":"属性值", ... });

获取的目的：往往都是用于判断比较
设置的目的：修改

创建&渲染 创建：var elem=(‘<开始标签属性名=′(`<开始标签 属性名='{属性值}'>${内容}</结束标签>`)

渲染：*父亲.append(elem);//后面，儿子
       父亲.prepend(elem);//前面，儿子
       兄弟.after(elem);//后面，兄弟
       兄弟.before(elem);//前面，兄弟

一句话创建并且渲染：父亲.append($(`<开始标签 属性名='${属性值}'>${内容}</结束标签>`));

删除：$("xx").remove();

克隆：$("xx").clone();

*获取元素下标：$("xx").index();

***今日重点内容回顾：DOM学完了 1、直接查找元素 2、通过关系获取元素 3、操作元素：内容 属性 样式 4、创建&渲染&删除 5、查找元素时：返回的集合，直接可以做操作，并且可以链式操作，千万不要加下标，千万不要循环 6、工厂函数的作用： 1、直接找元素：("选择器");−−("选择器"); -- (".d1"); 2、DOM->JQ：(DOM元素);−−(DOM元素); -- (e.srcElement); 3、创建元素：$(<></>);

**###### **第四天

1、事件：用户触发 或 浏览器自动触发： 绑定：("xx").bind("事件名",callback);简化：("xx").bind("事件名",callback); 简化：("xx").事件名(callback);

面试题：原生JS中 window.onload 和 JQ中(document).ready(callback)有什么区别1、window.onload：等待所有的资源（html、css、js、图片、视频、音频）加载完毕后，最后执行，而且一个页面只能使用一次2、(document).ready(callback) 有什么区别 1、window.onload：等待所有的资源（html、css、js、图片、视频、音频）加载完毕后，最后执行，而且一个页面只能使用一次 2、(document).ready(callback)：等待DOM树加载完毕就会执行，理论上比上者效率更高，而且一个页面可以反复使用 简写：1、(document).ready(()=>)2、(document).ready(()=>{}) 2、().ready(()=>{}) 3、$(()=>{})

原来学过的事件：click、dblclick、mouseover/mouseenter（移入，不会触发冒泡）、mouseout/mouseleave（移出，不会触发冒泡）、mousemove、change、blur、focus、submit、input（只要用户输入就会触发）、 contextmenu、resize、keydown

未学过的事件： 1、mousedown(鼠标按下)、mouseup(鼠标松开)

2、keydown、keypress、keyup - 键盘事件：
	$(window).键盘事件(callback);
	keydown：按下和按住都会触发，任何按键都支持 - 最适合用于做（游戏开发） 
	keypress：按下和按住都会触发，支持数字+字母+回车+空格
	keyup：松开时才触发，任何按键都支持 - 劲舞、炫舞、QQ音速，比手速

	event事件对象：jQuery没有任何的简化操作
		键盘键码：e.keyCode;

3、***scroll - 滚动监听事件：
	绑定事件：$(window).scroll(()=>{
			1、$(window).scrollTop();//获取当前滚动条距离页面顶部有多远

			2、$("xx").offset().top;//获取某个元素距离页面顶部有多远

			3、越往下滚，出现数据越多
		  })

2、JQ动画： 1、预定义动画：3组：9个 1、隐藏和显示： 隐藏：("xx").hide(执行时间,callback)显示：("xx").hide(执行时间,callback) 显示：("xx").show(执行时间,callback) 特殊：1、如果没有传递任何参数，瞬间的隐藏和显示 如果传递了时间参数，会具有动画（同时修改宽高度、透明度） 2、callback是动画执行完毕才会执行的代码操作 3、组合用法：自带判断操作： $("xx").toggle(执行时间,callback) === show+hide

2、滑动效果：
   隐藏：$("xx").slideUp(执行时间,callback)
   显示：$("xx").slideDown(执行时间,callback)
   特殊：1、哪怕不加时间也具有动画，只不过动画比较快（修改高度）
	 2、callback是动画执行完毕才会执行的代码操作
	 3、组合用法：自带判断操作：
		$("xx").slideToggle(执行时间,callback) === slideDown+slideUp

3、淡入淡出：
   淡出/隐藏：$("xx").fadeOut(执行时间,callback)
   淡入/显示：$("xx").fadeIn(执行时间,callback)
   特殊：1、哪怕不加时间也具有动画，只不过动画比较快（修改透明度）
	 2、callback是动画执行完毕才会执行的代码操作
	 3、组合用法：自带判断操作：
		$("xx").fadeToggle(执行时间,callback) === fadeIn+fadeOut

2、自定义动画： 1、并发动画：所有的动画一起执行 $("xx").animate({ "css属性名":"css属性值", ... },执行时间,callback)

2、排队动画：一个动画做完在做下一个
	$("xx").animate({
		"css属性名":"css属性值",
	},执行时间,callback).animate({
		"css属性名":"css属性值",
	},执行时间,callback).animate({
		"css属性名":"css属性值",
	},执行时间,callback).animate({
		"css属性名":"css属性值",
	},执行时间,callback).animate({
		"css属性名":"css属性值",
	},执行时间,callback).animate({
		"css属性名":"css属性值",
	},执行时间,callback)

特殊：
  1、animate方法不支持颜色、transform转换的动画 - 明天就有jQuery.ui.js提供增强animate方法
  2、动画会排队，如果快速的触发动画，怎么排队上很多很多的动画慢慢执行，不希望看到这个效果：
	stop();


扩展：1、如何判断某个元素的有没有动画
	 if(!$("xx").is(":animated")){没有动画的元素才执行}

      2、
	 if(!$("xx").is(":hidden")){没有隐藏的元素才执行}

**###### **第五天

1、jQueryUI：组件/插件库：提供了HTML/CSS/JS，程序员想要使用只需要引入然后梭代码 组件：组成网页一部分的部件 插件：插件就是组件，插件带有js功能

一切插件的使用步骤： 1、下载 2、引入： 3、挑选自己喜欢的效果 - 然后梭： 个人推荐： 1、选项卡/标签页/tabs 2、菜单 3、手风琴/折叠面板 4、自动完成/模糊搜索 5、特效 - 增强toggle("特效名称",duration,callback)+hide+show 6、拖放

4、根据你的设计图修改css - 如果你修改了没有成功只有一个可能，优先级不够

5、根据数据库拿回来的数据渲染页面 - 记得把模板删掉

2、日期选择器：底层date对象 1、wdatepick.js文件 优点：非常简单 缺点：样式比较老化 $("input").focus(function(){ WdatePicker({//配置信息 el:this, isShowToday: false, isShowClear: false, isShowOK: false,//以上三个都是开关，如果三个都关起来了，则会隐藏掉快速选择按钮 lang: "eng", // skin: "twoer", dateFmt: "yyyy年MM月dd日 HH:mm:ss",//年月日时分秒的字母大小写是固定的 minDate: "%y-%M-%d", maxDate: "%y-%M-{%d+7}",//只能购买从今天开始往后7天的车票 readOnly: true, }) })

2、laydate.js： 优点：非常简单，还很漂亮 缺点：作者太穷了，已经下架了 别记任何东西，学会看文档

3、无敌的插件库 打开百度搜索：jQuery插件库 一个账号一天只能下载两次

avatar
文章
阅读
粉丝