前端基础小结

最新推荐文章于 2023-04-03 16:56:56 发布

不会打字314

最新推荐文章于 2023-04-03 16:56:56 发布

阅读量279

点赞数

分类专栏：前端文章标签： html js css checkbox

本文链接：https://blog.csdn.net/shaoming314/article/details/109140740

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

前端基础小结(最基础的)

前端学习路线图片
https://gitee.com/shao_ming314/note/blob/master/%E5%9B%BE%E7%89%87/%E5%89%8D%E7%AB%AF.jpg


全选全不选
  1.纯js实现
  2.jQusery实现
  
二级联动
  1.纯js实现
  2.纯jQuery实现
  
  
表单标签
form.html纯手写一边

推荐查找网站w3c和菜鸟教程
w3school网址:
https://www.w3school.com.cn/
菜鸟教程:
https://www.runoob.com/
推荐的csdn学习的网址:
https://blog.csdn.net/qq_45948983/article/details/105316986
我感觉作者的相关js学习的这篇文章写的还是很好的,没事可以手敲遍demo


let , const , var三者声明变量的区别

js冒泡排序
参考网址:
https://blog.csdn.net/qzt1204/article/details/80503159?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

前言:为了学习方便,我是用的idea工具是hbuilder

1.前端学习路线和网站推荐

学习路线

参考网址

https://gitee.com/shao_ming314/note/blob/master/%E5%9B%BE%E7%89%87/%E5%89%8D%E7%AB%AF.jpg

学习网站

推荐查找网站w3c和菜鸟教程
w3school网址:
https://www.w3school.com.cn/
菜鸟教程:
https://www.runoob.com/
推荐的csdn学习的网址:
https://blog.csdn.net/qq_45948983/article/details/105316986
我感觉作者的相关js学习的这篇文章写的还是很好的,没事可以手敲遍demo

2.自己学习说明

1.因为自己学的就是java后端,所以对前端了解也只是皮毛,但是一些基础的前端知识还是需要掌握的

2.好久之前就想整理以下前端自己了解的知识,但是一直没有时间整理,这次正好抽出时间整理

3.我主要把前端分为:基础三件套+框架部分,这篇主要介绍最最基础的前端知识

4.主要掌握的就是form标签,css基础的写法样式,js的语法练习

5.没事回头可以参考这篇文章回忆一些前端最基础的知识

6.可以直接手敲,跟着回忆,在敲的过程中去联想别的知识

3.js实现全选和全不选

3.1纯js实现全选和全不选功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>请选择你的爱好:</h1>
		<input type="checkbox" name="" id="cex" />全选/全不选
		<div id="box">
			<input type="checkbox" name=""/>足球
			<input type="checkbox" name=""/>篮球
			<input type="checkbox" name=""/>游泳
			<input type="checkbox" name=""/>唱歌
		</div>
		<button id="btn1">全选</button>
		<button id="btn2">全不选</button>
		<button id="btn3">反选</button>
		<script>
			var a = document.getElementById('cex');
			var b = document.getElementsByTagName('input');
			//全选
			document.getElementById('btn1').onclick=
			function(){
				for(var i = 0 ; i < b.length ; i ++){
					b[i].checked=true;
				}
			}
			//全不选
			document.getElementById('btn2').onclick=
	        function(){
				for(var i = 0 ; i < b.length ; i++){
					b[i].checked=false;
				}
			}
			//如果未选中,取消全选
			function select(){
				var count = 0;
				for(var i = 1 ; i < b.length ; i ++){
					if(b[i].checked){
						count++;
					}
						
				}
				if(count==b.length-1){
					a.checked=true;
				}else{
					a.checked=false;
				}
			}
			//如果未选中,取消全选
			for(var j = 1 ; j < b.length ; j ++){
				b[j].onclick=function(){
					select();
				}
			}
			//反选
			document.getElementById('btn3').onclick=
			function(){
				for(var i = 1 ; i < b.length ; i++){
					var value = b[i];
					if(value.checked){
						value.checked=false;
					}else{
						value.checked=true;
					}
				}
				select();
			}
		</script>
	</body>
</html>

说明:

此代码也是回忆练习前端最经典的demo,可以没事多敲几遍

3.2jQuery实现全选和全不选功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 使用cdn方式引入jQuery -->
		<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
	<script type="text/javascript">
			$(function(){
				var $items=$("[name=item]:checkbox");
				//全选
				$("[name=checkAll]").click(function(){
					//属性值为布尔型的,例如checked,disabled,建议用prop方法,其他的用attr方法
					$items.prop("checked",true);
					$("[name=All]").prop("checked",true);
				});
				//全不选
				$("[name=checkNo]").click(function(){
					$items.prop("checked",false);
					$("[name=All]").prop("checked",false);
				});
				//反选
				$("[name=checkFan]").click(function(){
					$items.each(function(){
						this.checked=!this.checked;
					});
				});
				//[全选/全不选]复选框
				$("[name=All]").click(function(){
					$items.prop("checked",this.checked);
				});
				//当每个复选框都被勾选,使[全选/全不选]复选框勾选,如果有一个复选框未被勾选,则[全选/全不选]复选框也不勾选
				$items.click(function(){
					var a=true;
					$items.each(function(){
						if (!$(this).prop("checked")) {
							a=false;
						}
					});
					$("[name=All]").prop("checked",a);
				});
			})
		</script>
	</head>
	<body>
		<form>
			<input type="checkbox" name="item" />one
			<input type="checkbox" name="item" />two
			<input type="checkbox" name="item" />three
			<input type="checkbox" name="item" />four
			<br>
			<input type="button" name="checkAll" value="全选" />
			<input type="button" name="checkFan" value="反选" />
			<input type="button" name="checkNo" value="全不选" />
			<input type="checkbox" name="All" />全选/全不选
		</form>
	</body>
</html>

说明:

这个小练习是使用cdn的方式引入jQuery
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

4.表单form相关标签的使用

<hr><!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style> /* 这里可以书写css样式 */
		table{ 
			border:2px solid red;
			/* 设置表格的边框和单元格的边框合并 */
			border-collapse: collapse;
			/* 设置当前元素的左右外边距自适应，即设置
				当前元素水平方向居中 */
			margin-left:auto;
			margin-right:auto;
			/* 设置背景颜色 */
			background: lightgrey;
		}
		td,th{
			border:2px solid red;
			/* 设置单元格的边框和内容之间的距离 */
			padding:5px;
		}
		h1{
			/* 让当前元素的内容居中显示 */
			text-align: center;
			
		}
	</style>
</head>
<body>
	<h1>欢迎注册</h1>
	<form action="#">
		<table>
			<tr><!-- 用户名 -->
				<td>用户名:</td>
				<td><!-- 普通文本输入框 -->
					<input type="text"  name="username" 
						placeholder="请输入用户名..."/>
				</td>
			</tr>
			<tr><!-- 密码 -->
				<td>密码:</td>
				<td><!-- 密码输入框 -->
					<input type="password"  name="pwd"/>
				</td>
			</tr>
			<tr><!-- 性别 -->
				<td>性别:</td>		
				<td><!-- 单选框 -->
					<input type="radio"  name="gender"  
						value="male"  checked="checked"/>男
					<input type="radio"  name="gender"  
						value="female"/>女
				</td>		
			</tr>
			<tr><!-- 爱好 -->
				<td>爱好:</td>		
				<td><!-- 复选框/多选框 -->
					<input type="checkbox"  name="like"  
						value="basketball"  checked="checked"/>篮球
					<input type="checkbox"  name="like"  value="football"/>足球
					<input type="checkbox"  name="like"  value="volleyball"/>排球
				</td>		
			</tr>
			<tr><!-- 城市 -->
				<td>城市:</td>
				<td>
					<select name="city">
						<option value="bj">北京</option>
						<option>上海</option>
						<option selected="selected">广州</option>
						<option>深圳</option>
					</select>
				</td>
			</tr>
			<tr><!-- 自我描述 -->
				<td>自我描述:</td>
				<td>
					<textarea rows="5" cols="30"  name="description"
						placeholder="请输入描述信息..."></textarea>
				</td>
			</tr>
			<tr><!-- 提交按钮 -->
				<td colspan="2"  style="text-align:center;">
					<input type="submit"  value="提交"/>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

说明:

对于后端开发人员来说,html中重中之重的就是form相关的标签

必须可以不查资料熟练的写出来

5.js和java中的二分法和冒泡排序

5.1 冒泡排序

java实现冒泡排序

public class 冒泡排序 {
public static void main(String[] args) {
	int[] array = new int[] {9,1,4,2,4,6,2,6,2};
	for(int i = 0 ; i < array.length-1 ; i++) {
		for(int j = i+1 ; j < array.length ; j++) {
			if(array[i]>array[j]) {
				int temp = array[i];
				array[i] = array[j];
				array[j] = temp;
			}
		}
	}
	System.out.println(Arrays.toString(array));
}
}

js实现冒泡排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		function getMaoPao(arr){
		   for(var i=0;i<arr.length-1;i++){
		       for(var k=i+1;k<arr.length;k++){
		           if(arr[i]>arr[k]){
		              var temp =arr[i];
		                arr[i]=arr[k];
		                arr[k]=temp;
		          }
		      }
		   }
		   return arr
		}
		console.log(getMaoPao([1,0,2,3,100,55,44,66,11]))
		</script>
	</body>
</html>

5.2 二分法

java实现二分法

参考网址:

https://blog.csdn.net/lee514/article/details/82977044?biz_id=102&utm_term=java%E5%AE%9E%E7%8E%B0%E4%BA%8C%E5%88%86%E6%B3%95&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0-82977044&spm=1018.2118.3001.4187

/**
 * 测试二分法查找
 * 二分法适用于已经排好序的数组
 * @author Administrator
 *
 */
public class TestBinarySearch {
	public static void main(String[] args) {
		int[] arr= {30,20,50,10,80,9,7,12,100,40,8};
		Arrays.sort(arr);
		System.out.println(Arrays.toString(arr));
		System.out.println(myBinarySearch(arr,40));
		}
	
	public static int myBinarySearch(int[] arr,int value) {
		int low=0;
		int high=arr.length-1;
		while(low<=high) {
			int mid=(low+high)/2;
			if(value==arr[mid]) {
				return mid;
				}
			if(value>arr[mid]) {
				low=mid+1;	
			}
			if(value<arr[mid]) {
				high=mid-1;
			}
			
		}
		return -1;//没有找到返回-1
	}
	
}

js实现二分法

参考网址:

https://blog.csdn.net/weixin_44271279/article/details/101545276?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160295217519724848338835%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=160295217519724848338835&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-2-101545276.first_rank_ecpm_v3_pc_rank_v2&utm_term=js%E4%BA%8C%E5%88%86%E6%B3%95&spm=1018.2118.3001.4187

let arr = [1,2,3,4,5,6,7,8];
		    function binarySearch(arr,item) {
		        let  min = 0;
		        let  max = arr.length - 1;
		        while (min <= max) {
		            let mid = Math.ceil((min + max) / 2); 
		            let findVal = arr[mid];
		            if (findVal == item) {
		                return findVal;
		            }
		            if (findVal > item) {
		                max = mid - 1;
		            }
		            if (findVal < item) {
		                min = mid + 1;
		            }
		        }
		        return '没有找到';
		    }
		 
		    //测试 3
		    console.log("2" + binarySearch(arr,2)); 
		
		    //测试 找不到
		    console.log("456" + binarySearch(arr,456))

6.let , const , var三者区别

参考网址:

https://blog.csdn.net/unionz/article/details/80032048?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160295276519195240461489%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160295276519195240461489&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_v2~rank_v28-1-80032048.first_rank_ecpm_v3_pc_rank_v2&utm_term=let+%2C+const+%2C+var%E4%B8%89%E8%80%85%E5%8C%BA%E5%88%AB&spm=1018.2118.3001.4187

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改

示例:


<script type="text/javascript">
    // 块作用域
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错
        var aa;
        let bb;
        // const cc; // 报错
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); // 1
    // console.log(b); // 报错
    // console.log(c); // 报错
 
    // 函数作用域
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  
        console.log(f); // 7 
 
    })();
    // console.log(d); // 报错
    // console.log(e); // 报错
    // console.log(f); // 报错
</script>

不会打字314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端基础小结

前端基础小结(最基础的)前端学习路线图片https://gitee.com/shao_ming314/note/blob/master/%E5%9B%BE%E7%89%87/%E5%89%8D%E7%AB%AF.jpg全选全不选 1.纯js实现 2.jQusery实现二级联动 1.纯js实现 2.纯jQuery实现表单标签form.html纯手写一边推荐查找网站w3c和菜鸟教程w3school网址:https://www.w3school.com.c
复制链接

扫一扫

专栏目录