前端基础小结(最基础的)
前端学习路线图片
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实现二分法
参考网址:
/**
* 测试二分法查找
* 二分法适用于已经排好序的数组
* @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实现二分法
参考网址:
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三者区别
参考网址:
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>