前端学习总结

最新推荐文章于 2022-11-16 08:44:22 发布

yydsuzi

最新推荐文章于 2022-11-16 08:44:22 发布

阅读量203

点赞数 1

分类专栏： java 文章标签： javascript jquery css

本文链接：https://blog.csdn.net/yydsuzi/article/details/107774092

版权

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Day42-JS&BOM

1.JavaScript

JS类比于JAVA的SE阶段，让我们了解下JS的基础东西，对象，属性，赋值，创建对象，方法等等。用JAVA的思想去整理JS的这些东西，最低要求是能读得懂JS的代码，不熟悉的东西可以在W3C手册上查询。

1.1 js引入

三种引入方式：1.行内写法（不推荐）作用面积太小了
2.内部写法（学习阶段用的多）
3.外部引入，就是将已经写好的js的格式写在外边，直接引入格式。（项目中用的比较多）

		<!-- 行内推荐写法 -->
		<a href="javascript:void(0)" onclick="alert(1)">111</a>

1.2 JS变量及数据类型

JS原始数据类型：Number:数值类型
String:字符串类型
Blooean:布尔类型
null:空值
Undefind:未定义或者未初始化

js变量：JAVA中的变量是从数据类型限制变量值，JS则简单方便，你可以直接给值,JS自己去处理他的数据类型。
所以JS的变量声名很简单，直接Var就完事

		<script type="text/javascript">
			var num = 10;
			console.debug(typeof num);//number
			var str = "10";
			console.debug(typeof str)//string
			
            /*在JS中 0代表不是整0，代表的是无限接近0的小数，所以1/0不会报错*/
            console.debug(1/0);//"Infinity" 代表无穷大
            console.debug(isFinite(1/0));//判断是否有穷，1/0无穷，所以false

            console.debug(123/"123");//"1" JS底层会将String转换为Number再相除
            console.debug(123/"abc");//"NaN" abc无法被转换为Number，相除得到NaN

            /*在if的条件语句中，只有false    0  null  ""  undefind  这几种情况会被判定为false
            只要有值，就是true*/
            if("21212"){
            console.debug("哪来的猴子")
            }

            var str = null;
            console.debug(str);
            console.debug(typeof str);//"object"
            var str1;
            console.debug(str1);//"undefined" str1没有给予值给他定义属性，所以是undefind属性

		</script>

1.3 JS运算符

没什么特殊的，与数学运算符一致，有一点需要注意的

	<!--	 == :只比较值是否一致
			 ===:即比较值又比较数据类型
			 !==:比较值也比较数据类型
		-->
		<script type="text/javascript">
			var a = 10;
			var b = "10";
			console.debug(a == b);//"true"
			console.debug(a === b);//"false"
			console.debug(a !== b);//"true"
		</script>

1.4 JS函数

JS的函数和JAVA类似，但是比JAVA更简单，参数不用设置数据类型，也可以直接给方法添加参数

		function Person(id,name,age){
				this.id = id;
				this.name = name;
				this.age = age;
			}
			var p = new Person(1,"吾爱国",18);
			console.debug(p.name);//"吾爱国"
			
			function sleep(num1,num2){
				console.debug(num1+num2);
			}
			sleep(10,80)
			/*匿名函数*/
			var fun = function(){
				console.debug("有趣")
			}
			fun();

1.5 JS全局函数

编码解码[window顶级对象下面声明的函数]
encodeURI和decodeURI搭配
使用encodeURICommponent和decodeURICommponent

		/*IE浏览器   不允许发送中文参数*/
		var ss = "百度"
		var str = "www.baidu.com?url="+ss;
		/*编码*/
		var u = encodeURI(str)
		console.debug(u)
		/*解码*/
		var i = decodeURI(u)
		console.debug(i)
		/*
		 使用encodeURICommponent和decodeURICommponent
		 * */
		/*编码*/
		str = "www.baidu.com?url=http://www.qq.com";
		var se = encodeURIComponent(str)
		console.debug(se)
		/*解码*/
		
		/*part2 eval*/
		//eval函数的使用：计算JS的字符串，并将其作为脚本执行
		var a = "console.debug('eval函数实例')";
		console.debug(a); //输出：console.debug('eval函数实例')
		eval(a);//字符串就会当做函数使用

1.6 自定义函数

			/**
			 * js面向对象理解：
			 * 		在JAVA中面类作为对象是通过反射找到对象
			 * 		在JS中一个类直接就可以看成一个对象处理
			 */
			function Person(){
				console.debug("伍鑫是个大傻逼")
			}
			var person = new Person();
			console.debug(typeof person);
			Person();
			
			var p = new Person("吾爱国",18);
			console.debug(p);//object{ }
			console.debug(p.name);//undefined 原方法没定义参数，所有找不到name属性
			function eat(){
				console.debug("大口吃");
			}
			function Person(){
			 //	this.drink=eat;//面代表Person属性 属性所赋值的是函数
				this.smok = function(){
					console.debug("嗦烟")
				}
			}
			p = new Person();
			p.smok();//嗦烟
			
			/*part2对象添加属性的方式详解: 简单粗暴，直接给*/
			function Animal(name,age){
				this.name = name;
				this.age = age;
				this.toString = function(){
					console.debug("name"+this.name+"age"+this.age);
				}
			}
			
			var pig = new Animal("猪5",18);
			console.debug(pig);//name: "猪5", age: 18, toString: toString(
			//直接给当前对象强塞sex属性并赋值
			pig.sex = "女";
			console.debug(pig)//name: "猪5", age: 18,sex: "女", toString: toString()
			
			/*part2.2给原型添加属性：Animal的对象父类添加属性*/
			Animal.prototype.song =function(){
				console.debug("山路十八弯")
			}
			pig.song()

1.7 定时任务

		/* 
			setTimeout() 在指定的毫秒数后调用函数或计算表达式。
			clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 
			
			setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
			clearInterval() 取消由 setInterval() 设置的 timeout。
           */
          	//eval   :  var text1 = document.getElementById('text1');
          	//tout代表了定时任务
          	/*var tout = setTimeout("document.getElementById('text1').value=new Date()",5000)
            clearTimeout(tout)*/
            
            
            
			var res;//时钟任务的标记
			function start(){
				res = setInterval("document.getElementById('text2').value=new Date()",1000)
			}
			function stop(){
				clearInterval(res)
			}
			
			
			function change(){
				var pass = document.getElementById("pass")
				if(pass.type=="password"){
					pass.type="text";
				}else{
					pass.type="password";
				}
				window.location.href = "http://www.baidu.com";
			}

2.BOM

Day43-DOM&Ajax

1.DOM

DOM简单理解就是对页面的标签属性做增删改查的操作。

1.1 元素操作

标签里面有name id value等等元素以及对应的值，我们可以用DOM对象对其进行增删改查

1.2 查找元素

    <script type="text/javascript">
        /*入口函数，可以理解为程序先读取页面再来运行函数，否则从上至下读取的话，找不到内容*/
        window.onload = function(){
            //通过ID属性【唯一性】查找节点
            var div = document.getElementById("mydiv")
            console.debug(div)

            //通过name属性查找节点【数组存储】
            var hob = document.getElementsByName("hobboy")
            console.debug(hob)

            //通过标签名字获取节点[数组存储]
            var input = document.getElementsByTagName("input")
            console.debug(input)

            //找到第一个input标签前的父节点 
            var dv = input[0].parentElement
            console.debug(dv)

            /*PART2:增添标签*/
            var span = document.createElement("span")
            span.innerText="污渍"
            //在document的body里面增添对象  boby不可缺
            document.body.insertBefore(span,dv);
        }

    </script>

1.3 给元素添加属性：

				//入口函数不能忘
				window.onload = function(){
				//获取需要的节点
				var dv = document.getElementById("mydiv")
				//给节点添加属性
				dv.setAttribute("name","name")
				dv.setAttribute("value","射入")
				//给节点添加样式
				dv.style.backgroundColor = "peachpuff"
				
				//添加class属性值
				document.getElementById("div").className="classname";
			}

1.4 给元素添加文本:

			/*文本操作：innerText*/
			var div = document.getElementById("div")
			/*添加*/
			div.innerText="adfasdfasd"
			/*覆盖修改*/
			div.innerText="<input type='text' value='123456'>"
			/*删除*/
			div.innerText="";
			/*查*/
			var text = div.innerText;
			console.debug(text)
			/*文本操作：innerHTML*/
			/**/
			div.innerHTML="dfasdfasd"
			div.innerHTML="<input type='text' value='123456'>"
			console.debug(div.innerHTML)

1.5 给元素绑定时间

在js内写方法，然后再标签内插入标签属性，将方法传入进去

          		//属性标签对应的用用户操作      
                onabort		用户终止页面加载。
                onblur		用户离开对象。失去焦点
                onchange	用户改变对象的值。
                onclick		用户点击对象。
                ondblclick	用户双击对象。
                onfocus		和onblur相反）	用户激活对象。
                onkeydown	按下键盘。
                onkeypress	按压键盘。
                onkeyup		松开键盘。
                onload		页面完成加载。注释：在 Netscape 中，当页面加载时会发生该事件。
                onmousedown	用户按鼠标按钮。
                onmousemove	鼠标指针在对象上移动。
                onmouseover	鼠标指针移动到对象上。
                onmouseout	鼠标指针移出对象。
                onmouseup	用户释放鼠标按钮。
                onreset		用户重置表单。
                onselect	用户选取页面上的内容。
                onsubmit	用户提交表单。
                onunload	用户关闭页面。

		<script type="text/javascript">
			function into(){
				//先获取节点
				var dv = window.document.getElementById("d")
				dv.style.backgroundColor = "red";
			}
			function out(){
				//先获取节点
				var dv = window.document.getElementById("d")
				dv.style.backgroundColor = "blue";
			}

		</script>
	</head>
	<body>
		<div id="d">
			<!--	-->
			<input type="button" onmouseover="into()" value="进来玩啊大爷"/>
			<input type="button" onmouseout="out()"  value="慢走，欢迎再来"/>

2.Ajax

Ajax就是一个对象，处理异步请求的，可以理解为一个页面分为N个请求，有一个请求响应好了，Ajax就会处理它将已经响应好了的请求先展示出来，实时更新网页（股票网站…等），基本所有的页面都需要Ajax对象处理请求。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-88ARgZS3-1596461980919)(C:\Users\吴永鑫\AppData\Roaming\Typora\typora-user-images\image-20200802102804046.png)]

2.1 get请求Ajax

		function getXhr(){
				var xhr;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();
				}else{//针对的是低版本的IE浏览器
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				console.debug(xhr);
				return xhr;
			}
			
			function getTime(){
				var xhr = getXhr();
				//准备请求
				xhr.open("get","/getTime",true);
				//监控状态
				xhr.onreadystatechange = function(){
					if (xhr.readyState == 4 && xhr.status == 200) {
						var text = xhr.responseText;
						console.debug(text)
						//将接收到的文本写进input标签中
						document.getElementById("span").innerText = text;
					}
				}
				//发送请求
				xhr.send();
			}

2.2 Post请求的Ajax

post发送请求一定要设置请求头，步骤基本锁定

	function login(){
		//获取标签的value属性值
		var uname = document.getElementById("uname").value;
		var pwd = document.getElementById("pwd").value;
		//不用IE浏览器，直接new出来xhr
		var xhr = new XMLHttpRequest();
		//开启xhr
		xhr.open("post","/login",true);
		//监听状态
		xhr.onreadystatechange=function(){//事件：xhr状态发生改变，就会调用函数[回调函数]
			if(xhr.readyState==4 && xhr.status == 200){//用户名，密码发送到后台，有跳转到成功面，提示用户名面错误
				var text = xhr.responseText;
			    if(text=="true"){//登录成功 雷区：true代表boolean类型，"true"才是string类型
			    	window.location.href="/success.jsp"
			    }else{//登录失败
			    	alert("老弟：你的账户或者面错误，请重新输入")
			    }
			}
		}
		/*Post发送请求:设置请求头*/
		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//传递的参数是以普通文本传输的
		var parm = "username="+uname+"&password="+pwd;
		xhr.send(parm);//POST 可以这样发送参数  发送请求
	}

Day44-JQuery

JQuery就是JS的一个框架，方便我们装饰前端。

1. 使用JQuery

准备个web项目，然后创建个springMVC框架，在webapp下面创建一个js文件夹，将JQuery的文件导入进去，在前端页面创建的时候引入JQuery文件即可使用。

使用JQuery的时候需要一个入口函数，$(function(){})

2. JQuery选择器

2.1 ID选择器

用$("#id")选择指定id的标签

$(function(){
            //1:id选择器 通过$('#id')来选择
            console.debug($("#aaa"));

2.2 标签选择器

也称元素选择器，直接通过$(“元素名称”)来选择

    		//3:元素选择器，直接通过$("元素名称")来选择
            console.debug($("button").length);//2 2个button标签

2.3 类选择器

通过$(’.类名’)来选择

//2:类选择器 通过$('.类名')来选择
            console.debug($('.abc'));

2.4 通配符选择器

直接通过$("*")来选择，所有的包标签，包括索引html meta script等

	 console.debug($("*").length);// 27

2.5 组合选择器

组合选择器：就是将多个选择器用逗号隔开，将任意选择器查找到的标签合并在一起

	console.debug($("#aaa"),$(".abc"));

2.6 包含选择器

包含选择器,就是找类中类，一层一层的找，譬如我要找按钮11和22，先找class=.abc，再找class=btn，用空格隔开就可以，包含关系可以是直接的也可以是间接的，如果类中类有包含关系，则可以称之为父子选择器

	console.debug($(".abc .btn").length);//2
	
	//父子选择器，和包含选择器差不多意思，但是有限制条件，必须是间接关系的才能找，
    le.debug($(".abc>.btn"));

2.7 兄弟选择器

兄弟选择器：

前面一个选择器 + 后面一个选择器表示查找前面选择器的标签的后面紧跟的那一个兄弟(同级)标签
前面一个选择器 ~ 后面一个选择器表示查找前面选择器的标签的后面所有兄弟(同级)标签
注意：前面一个选择器是用来定位的，后面一个选择器才是查找目标元素的

 			console.debug($("#aaa+div"));//Object { 0: div.abc
            console.debug($("#aaa~div").length);//3--> 说明子类中的div是不算的 只有同级的才算

3. 绑定事件

jQueru绑定事件的方法：先用选择器找到该目标元素，再调用事件方法，传入一个function作为参数
       事件方法:就是js中的事件类型单词，在jQuery中全部都封装成了方法名称
 *     click     点击
 *     mouseover  鼠标移入
 *     mousemove  鼠标移动
 *     mouseout   鼠标移出
 *     mousedown  鼠标按下
 *     mouseup       鼠标弹起
 *     dblclick   双击
 *     keydown       键盘按下
 *     keyup     键盘弹起
 *     keypress   键盘敲击
 *     focus     得到焦点
 *     blur      失去焦点
 *     change    内容改变
 *PS：jQuery不仅可以调用事件函数绑定事件，还可以使用bind方法或者on方法来绑定事件
 * bind：$("选择器").bind("事件类型"，funcition); 此方法只适用于已存在的标签选择器，不能添加和修改元素标签
 * on：$("选择器").on("事件类型", function(){}); 或者$(document).on("事件类型","选择器",function(){});
 *     on方法不仅可以绑定事件，也可以动态添加元素标签到body上面去
 *
 * off  unbind:两个都是解绑事件 如果没指定解绑什么东西，就指解绑全事件。

		 	$("#btn").click(function(){
                alert("你又被点击了1111");
            });
           
            $("#btn").bind("click",function(){
                alert("你又被点击了222");
            }).mousemove(function () {
                $(this).css("color","red")
            }).mouseout(function () {
                $(this).css("color","blue")
            });

            $("#btn").on("click",function(){
                alert("你又被点击了333");
            });
            $(document).on("click","#btn",function(){
                alert("你又被点击了4444");
            });
            $("input").unbind("click");
        }

4.JQuery遍历

第一种方式：用for循环，和JAVA的for循环一样

            var $obj = $("input:button");
            for(var i = 0 ; i < $obj.length ; i++){
            alert($($obj[i]).val());//注意$obj[i]是一个dom对象

第二种方式:each循环

			var hobbies = $("input[name=hobbies]");
			//jQuery里面的each循环
			hobbies.each(function(){
				//获取当前循环对象checked属性值
				var ck1 = $(this).prop("checked");
				//给checked属性值赋予一个相反的属性值
				$(this).prop("checked",!ck1);

5.展示JSON对象

在标签里面用data-XXX命名，然后在JQuery中用data（“XXX”）取出JSON属性

<script type="text/javascript">
        $(function () {
            var name = $("#btn1").prop("id");
            console.debug(name);
            var aa = $("#btn1").data("aa");
            console.debug(aa);
        })
    </script>
</head>
<body>
    <input type="button" value="标签1" id="btn1" name="按钮1" data-aa='{"name":"伍爱国","age":18}'>
    <input type="button" value="标签2" id="btn2">

		var ck1 = $(this).prop("checked");
			//给checked属性值赋予一个相反的属性值
			$(this).prop("checked",!ck1);


## 5.展示JSON对象

		在标签里面用data-XXX命名，然后在JQuery中用data（“XXX”）取出JSON属性

```

yydsuzi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录