Js-JQuery-总结

Check_Chen_PC

于 2019-10-17 16:56:24 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/Chen_neal_Java/article/details/102610578

版权

JavaScript总结

一：JavaScript简介

什么是JavaScript？

JavaScript用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断。

完整的javascript由语言基础，BOM和DOM组成。另外，document是javascript的内置对象，代表浏览器的文档部分、document.write(“Hello Javascript”); 向文档写入字符串。

document.write("hello JS")
//弹框页面
/*alert("hello")*/
/*$(document).ready(
	function() {
		alert("Heijj ds");
	}
);*/

二：JavaScript基础

1：基础语法和注释

；结尾、大括号包裹语句块（基本与Java语法类似）、

注释和eclipse相同。（//——单行注释、/**/——多行注释）、

区分大小写。

2：在HTML网页中加入JavaScript的方式

外部引入:(写在head 中)

<title>javaScript基础</title>
		<!--1:外部引入-->
		<!--<script type="text/javascript" src="js/demo.js"></script>-->
		<script type="text/javascript" src="js/json.js"></script>
		<!--1:外部链接引入-->
		<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
		<script type="text/javascript">
		</script>

内联:(写在body中)

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

三:JavaScript数据类型

1：JavaScript的数据类型：

JavaScript是一种弱类型或者说动态类型的语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据。

主要有：Number（BigInt）、String字符串、Boolean布尔值、Undefined、Null、

Object（Array、Function、RegExp、Date 、JSON）

代码如下：

//变量var不需要其他的定义
var sname = "张三";
var age = 21;
sname = false;
console.log("sname " + sname);
console.log("sname的类型:" + (typeof sname));
//One:BigInt储存很大的整型 [Number]
var num = 19385899859389893893589; //后缀n
num++;
console.log("num的类型   " + (typeof num) + num)
//num = 19385899859389893893589n;
num = BigInt(19385899859389893893589);
num++;
console.log("num的类型   " + (typeof num) + num)

//Two:定义:Array
var nums = [34, 43, 54, 43, "dnc"];
for(var idx in nums) {
	console.log(nums[idx])
}

var num1 = 0;
//如果(!num1) 判空. 数字0,空字符串,null,undefined,都会返回false
var inputVal = {name: "djfs"};//都是false
//	{}
//空对象
console.log("类型: " + (typeof inputVal))
if(num1) {
	console.log("ture")
} else {
	console.log("false")
}



//下午:String中无字符和字符串区别'  " \"转义套\"  "  '(嵌套)+ 正则表达式
var ss = "<div id = 'container'></div>"
document.write(ss);
//JSON字符串转JS对象
var obj = JSON.parse(jsonData);
console.log(obj.name);
console.log(typeof obj);
//修改对象的属性值
obj.name = "李四";

//JS对象转JSON字符串
var str =JSON.stringify(obj)

四：JavaScript的程序控制语句

控制语句和JAVA一致：包括顺序结构、分支结构、和循环结构。

在循环结构中常规for循环与JAVA相同、在Java的for each中，JavaScript用for in来表示。

for(var i = 0; i < 10; i++) {
  // 循环10次
}
for(var idx in arr) {
  // console.log(arr[idx]);
}

五：JavaScript的对象

1：自定义对象：

定义fuction，使用new关键字创建对象、

{}的方式。

代码如下：

//局部变量和全局变量
function Student(sname,age){
	//私有的属性
	var gender = "保密";
	
	this.sname = sname;
	this.age = age;
	this.getGender = function(){
		return gender;
	}
	this.setGender = function(_gender){
		gender =  _gender;
	}
	this.sayName = function(){
		console.log(this.sname)
	}
	function sayGender(){
		console.log(gender);
	}
}


//创建对象:(扩展:prototype类似于继承的属性)
//第一种:
var stu = new Student();

//第二种{}:
var man = {sname: "张三",age: 45};
man.id = "No.1";
man.learn = function(){
	 console.log("技能");
}
console.log("man的类型: " + (typeof man));
console.log(man);

2：内置对象：

window对象（注意，w为小写）指当前的浏览器窗口。window对象是BOM的核心，window对象指当前的浏览器窗口所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。
1.全局变量是window对象的属性 2.全局函数是window对象的方法、
甚至HTML DOM的document也是window对象的属性之一。

window.screen对象包含用户屏幕信息

window.location 对象用于获得当前页面的地址URL,并把浏览器重定向到新的页面。

window.history 对象包含浏览器历史URL集合

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qBUNGkvV-1571302549289)(C:\Users\lanou\Desktop\360截图18180713398881.png)]

window对象的一些方法:

代码如下:

console.log(window);
window.onload = function(){
	alert("页面已经加载完成！")
}
//使用
//打开新的窗口
window.open();
//跳转某个页面
window.href = "";

window.Location();
//前进后退
window.forward();
window.back();

window.document的部分用法：

//创建表格:
var table = document.createElement("table");
//设置元素样式
table.style.border = "1px solid black"
//添加元素appendChild();将..添加到网页中:
document.body.appendChild();

//生成表单
//表单验证
var form = document.getElementsByTagName("form");
//提交事件
form[0].onsubmit = function(){
	var usernameInput = document.querySelector("#username")
	var passwordInput = document.querySelector("#password")
	
	var username = usernameInput.value;
	var password = passwordInput.value;
	
}


 var usernameInput = document.querySelector("#username")
 //触发事件
 usernameInput.onblur = function(){
 	
 	
 }

window.location的部分用法：

//改变当前网页地址（加载新的网页）
//location.hostname 返回web主机的域名
//location.port 放回web主机的端口
location.href = 'http://www.baidu.com';

五：JavaScript的函数

简介:

JavaScript 函数是被设计为执行特定任务的代码块,通过 function 关键词进行定义，其后是函数名和括号 ()。

JavaScript 函数会在某代码调用它时被执行。

1:获取函数参数:

函数参数是在函数定义中所列的名称, 是当调用函数时由函数接收的真实的值

在函数中，参数是局部变量。

常规方式:

通过内置arguments对象获取

JSON字符串转对象：JSON.parse(jsonStr);
对象转JSON字符串：JSON.stringify(obj);

function myCustomFn(arg1, arg2,arg3) {
  
}

console.log(getArgs(myCustomFn));


function testFn(arg0,arg1,arg2){

var arr = arguments;//参数数组

2:自调用函数:

//自调用函数(局部变量)可以提升作用域(Window)
(function sayHello(name){
	alert("你好," + name)
})("张三");

六:JavaScript的应用场景

1:添加交互事件:

//交互,如:按钮点击后的反应连接这个过程生成
<button onclick="start()">开始</button>
<button onclick="stop()">结束</button>

2:操作DOM元素:

//创建表格:
var table = document.createElement("table");
//设置元素样式
table.style.border = "1px solid black"
//添加元素appendChild();将..添加到网页中:
document.body.appendChild();

3:操作样式:

<!--样式操作相关-->
		<div id="style_div">测试修改样式</div>
		
		
		<button onclick="modify_style()">modify_style</button>
		<button onclick="toggle_class()">toggle_class</button>
		<button onclick="add_class('#style_div','red')">add_class</button>

4:验证表单:

//表单验证
var form = document.getElementsByTagName("form");

5:异步请求Ajax

6:reg正则匹配

//正则表达式
var phone = "17337358129";
//返回的是下标(类似与indexOf):search()查找
console.log("包含173的下标:" + phone.search("173"));
//^123:已123开头**i\对大小写不敏感\g,m等*
console.log("正则查找字符出现的下标:  "  + phone.search(/129/i))
//String中的replace,替换指定字符串
console.log(phone.replace("3","6"));
//还有好多表达:\d,查阅资料
console.log(phone.replace(/3/i,"8"));

七:定时器

setInterval

setTimeout

<body>
		<h1>00:00:00</h1>
		<br /><br />
		
		<button onclick="start()">开始</button>
		<button onclick="stop()">结束</button>
	</body>
	<script type="text/javascript">
		var h1 =document.querySelector("h1");
		function getNow(){
			var date = new Date();
			var hour = date.getHours();
			var minutes = date.getMinutes();
			var second = date.getSeconds();
			if (second<10) {
				second = "0" + hour;
			}
			
			var time = hour + ":" + minutes + ":" + second;
			h1.innerHTML = time;
			//解决setTimeout只动一次
			/*timeId2 = setTimeout(getNow,1000);*/
		}
		getNow();
		
		//setInterval方法
		/* var timeId = setInterval(getNow,1000);*/
		 
		 //setTimeout方式:只动一次
		/* var timeId2 = setTimeout(getNow,1000);*/
		var timeId;//作用域
		function start(){
			timeId = setInterval(getNow,1000);
		    //var timeId2 = setTimeout(getNow,1000);
		}
		function stop(){
			
			clearInterval(timeId);
			
			//clearTimeout(timeId2);
		}
		
		
	</script>

八:事件

onchange:值发生变化的事件

onclick:点击事件

onblur:失去焦点事件

onmouseover:鼠标悬浮事件

onmouseout:鼠标移出事件

onload:完成加载事件

onkeydown:键盘按下事件

//提交事件
form[0].onsubmit = function(){
	var usernameInput = document.querySelector("#username")
	var passwordInput = document.querySelector("#password")
	
	var username = usernameInput.value;
	var password = passwordInput.value;
	
}


 var usernameInput = document.querySelector("#username")
 //触发事件
 usernameInput.onblur = function(){
 	
 	
 }

jQuery应用总结

一:jQuery基础

1: jQuery是什么？

jQuery是一个JavaScript类库，对原生的JS进行了全方面的封装。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
本质上就是别人写好一段通用的JS代码。

2: jQuery有哪些功能？

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

3: 为什么要使用jQuery？

jQuery对原生JS API进行了封装，使用起来非常方便。可以极大的提高我们的开发效率。

4: 如何引入jQuery?

jQuery本质上就是一段普通的JavaScript代码，通常使用引入外部JS的方式来使用jQuery

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

5:基础语法

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有

元素

$(“p.test”).hide() - 隐藏所有 class=“test” 的

元素

$("#test").hide() - 隐藏所有 id=“test” 的元素

获取文本内容：调用jQuery对象的text()方法
获取属性值：调用jQuery对象的attr()方法
添加样式类：调用jQuery对象的addClass()方法
获取表单元素的值：调用jQuery对象的val()方法

二:选择器

语法：

- $(slector)
- $("#container")
- $(".container")
- $("img")
- $("input[type='password']")
- $("#container image")
//加载完网页之后
			$(document).ready(function() {
				$("#container>p").text("Hello,老唐!");
				//包裹
				$("p").wrap("<span>环绕</span>")
				//内部插入指定内容::jQuery中的选择器不支持子代选择器即(>p)
				$("#container p").first().append("<img src='https://www.baidu.com/img/bd_logo1.png?where=super'/>")
				//$("#container>p").html("<span>老唐</span>");
				//外部插入
				$("p").before("")
				$("p").after("")

selector就是选择器表达式，语法基本和CSS选择器一致。

三:HTML操作

1:DOM操作:

<!--DOM操作相关-->
		<div id="container">
			<p>Hello,jQuery</p>

			<div id="replace_container">
				<span>这是一个要替换的美女照片</span>
			</div>
		</div>
		<button idx="1">删除p标签(remove)</button>
		<button idx="2">清空p标签内容(empty)</button>
		<button idx="3">替换标签</button>
		<button idx="4">换个图片</button>

2:属性操作:

<script type="text/javascript">
			function modify_href(){
				//获取属性
				var href = $("#attr_a").attr("href");
				//修改属性值
				$("#attr_a").attr("href","http://www.lanou3g.com");
				//添加自定义属性
				$("#attr_a").attr("idx",666);
				//获取自定义的属性值
				var idx = $("#attr_a").attr("idx");
				console.log(idx);
				
			}
			
			function modify_text(){
				//修改超链接文字+添加一个按钮
				//获取属性
				var href = $("#attr_a").text();
				//修改属性
				$("#attr_a").text("fuck");
			}
			function modify_style(){
				//$("#style_div").css("font-size","100px");
				//一次修改多个
				$("#style_div").css({"font-size":"100px","font-family":"楷体"})
			}
			
			function toggle_class(){
				$("#style_div").toggleClass("hide");
			}
			function add_class(selector,className){
				$(selector).addClass(className);
			}
		</script>
	<!--属性操作相关--><!--//在新的标签页打开(_blank)-->
		<a id="attr_a" href="http://www.baidu.com" target="_blank">跳转</a>

3:内容操作:

<!--内容操作相关-->
		<button onclick="modify_text">修改超链接文字</button>

4:样式操作:

<!--样式操作相关-->
		<div id="style_div">测试修改样式</div>
		
		
		<button onclick="modify_style()">modify_style</button>
		<button onclick="toggle_class()">toggle_class</button>
		<button onclick="add_class('#style_div','red')">add_class</button>

四:使用jQuery添加事件

	<!--使用jQuery添加事件-->
	<!--click\blur\change\-->

五:jQuery的一些效果

1:显示/隐藏

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

2:淡入淡出

//语法：
//$(selector).fadeToggle(speed,callback);
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

3:滑动

//语法：
//$(selector).slideToggle(speed,callback);
$("#flip").click(function(){
  $("#panel").slideToggle();
});

4:动画

//语法
//$(selector).animate({params},speed,callback);
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});
//也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 =（width:'+=150px'）
//甚至可以把属性的动画值设置为（预定义的值） "show"、"hide" 或 "toggle"：

六:遍历

1:遍历jQuery对象

遍历数组直接使用jQuery的静态方法 $.each(arr, function{})
遍历多个DOM元素是用jQuery对象方法$(selector).each(function(){})

2:遍历数组

七:Ajax

Ajax 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

通过 jQuery Ajax 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

重点：get()和post()区别？

get()是form的method默认值，把提交的内容拼接到了action值的后面。

格式：action的值？name = value&name =value…
post()请求传递的内容是放在请求体里发送的。
get请求方式安全性较低
post请求方式安全性较高
get请求传递的内容长度有限
post请求传递的内容没有长度限制

EasyUI总结

一:简介

1:EasyUI是什么?

EasyUI是一套前端框架。它封装jQuery、Vue等前端JS框架，另外它还提供了一套完善的UI组件，比如窗体、表单、表格、树、进度条、手风琴菜单…

2:EasyUI的应用场景?

EasyUI是一套前端框架。它封装jQuery、Vue等前端JS框架，另外它还提供了一套完善的UI组件，比如窗体、表单、表格、树、进度条、手风琴菜单…

二:使用步骤

1:下载EasyUI

2:引入EasyUI相关的JS 、 CSS

3:需要有一个HTML标签

4:给标签添加相应的easy UI样式

5:调用EasyIUI相关JS方法来初始化、设置组件参数

三:主要组件

参见：

Easy UI官网中文版

Easy UI官网英文版

1:窗口相关

2:表格相关

3:树形组件

4:表单相关

表单验证

表单数据回显

表单常用组件(文本框、日期框、密码框)

LayUI总结

一：简介

1:LayUI是什么?

LayUI与EasyUI类似，都封装了jQuery和一套完整的组件样式。它是国产的一个前端框架，使用起来门槛更低，上手较快。

2：布局

类似Bootstrap的栅格布局，支持响应式。

二：使用步骤

第一步. 引入LayUI相关的JS、CSS

<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
        <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>

一共两个文件

第二步. 添加样式、或者引入JS模块

LayUI中的组件分为两种：

一种不要引入单独的模块，直接给原生的DOM元素添加class样式即可，比如按钮、小图标（印章）
另一种需要引入LayUI相关的模块，比如弹出层layer

三：组件分类

需要引入Lay UI相关模块才能使用的

织田家class样式就可以使用的

四：后台开发常用组件

参见：

LayUI国产前段框架

表格组件
tab标签页
面板
弹出层
树状组件
轮播图
导航菜单
表单相关组件
面包屑导航条

Check_Chen_PC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js-JQuery-总结

JavaScript总结一：JavaScript简介什么是JavaScript？JavaScript用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断。完整的javascript由语言基础，BOM和DOM组成。另外，document是javascript的内置对象，代表浏览器的文档部分、document.write(“Hello Javascript”); 向文档写入字符...
复制链接

扫一扫