fufu学前端之H5+Javascript

偏执的太偏执、 2022-12-25 07:58 160阅读 0赞

## 简单标签介绍 ##

**（本人）主要是学后端开发的，学这个也只是为了目前的项目需求，所以简单的写了点，想学前端技术的兄弟请去看其他大牛的帖子**

--------------------

*  div：独占一行  
    \- 常用属性：  
    3. align：left，center，right（位置）  
    4. style：样式属性，常用的有width-宽，height-高，border-边框，background-背景色，color-字体样式，-font-字体样式，
 *  span：长度为span内容的长度，
 *  a：超链接标签  
    \-常用属性：  
    1. href：用来指定需要跳转的页面  
    2. traget：指定跳转页面的打开方式，可以与frame标签通过name属性联动
 *  table：表格标签  
    \- 常用属性：  
    1. width-宽  
    2. height-高  
    3. cellspace-设置单元格间距

## 运算符简单介绍 ##

js，脚本语言，弱类型语言

在js中，null，undfeind，“”，NAN都为false

*  与运算-&&  
    三种情况：  
    1. 当表达式都为真的时候，返回最后一个表达式的值  
    2. 当表达式都为假的时候，返回第一个为假的值  
    3. 其他情况：一真一假返回假
 *  或运算-| |  
    三种情况：  
    1. 当表达式都为假的时候，返回最后一个表达式的值  
    2. 当只有一个表达式为真的时候，返回第一个为真的值  
    3. 当两个都为真的时候，返回第一个为真的值
 *  和=的区别
    
    1.  ==表示相同比较：只要表面上看起来是一样的，那么他们就可以相等  
        比如：123 = “123”;
    2.  ===表示完全比较：只有类型相同的数据才能比较，否则都默认为false

## 数组的基本介绍 ##

*  数组的基本概念：js里的数组类似于java里的集合，可以自动扩容，并且可以存放任意类型的数据类型，数组里的元素值在未赋值的情况下默认为undfinder
 *  数组的定义：var arr\[ \] = \{12,“123”,“金木研”,true\};  
    var arr\[ \] = var\[10\];

## 函数的基本介绍 ##

*  函数定义的方式：  
    1. function fun1()\{ \}  
    2. var fun2 = function()\{ \}
 *  函数的传参：  
    **不需要指定类型：**  
    function fun1(a,b)\{  
    \}
 *  带返回值的函数：  
    **不需要返回值类型，直接return即可**  
    var fun = function()\{  
    return “fufu真帅”;  
    \}
 *  js的函数不允许重载，否则会覆盖之前的方法

## 隐形参数 ##

*  概念：当我们往一个无参函数里添加参数，js并不会报错，因为js的所有函数默认有一个隐形参数arguments，它类似于java里的可变长参数Object…，其本质是一个参数数组，我们输入的参数都会存在这里  
    如下：

var fun = function(){ 
                   //隐形参数
                   alert(arguments.length);
                   for (let argument of arguments) { 
                       alert(argument);
                   }
                   alert("fufu真帅");
               }
               fun(19,"男");

## 对象 ##

*  基本概念：和java里的对象类似，对象拥有属性，方法等
 *  对象的定义：  
    1. 通过对象实例设置

var obj = new Object();
    		obj.name = "金木研";
    		obj.age = 18;
    		obj.function = fun(){ 
    	}

1.  使用｛｝定定义：

var obj = { 
    	name:"金木研",
    	age:18,
    	fun:function(){ 
    	alert("fufu真帅");
    	}
    }

## js事件 ##

*  常用事件  
    \- onload：加载完成事件，页面加载完之后，常用于做js代码初始化操作  
    \- onclick：单次点击事件，常用于按钮的点击操作  
    \- onblur：失去焦点事件，常用于输入框失去焦点后验证其输入内容是否合法  
    \- onchange：内容发生改变事件，常用于下拉框或输入框内容发生改变后的操作  
    \- onsubmit：表单提交事件，常用于表单提交前，验证所有表单是否合法

## js注意事项 ##

如果没有写加载事件，html里的标签是从上往下，执行到了才会创建该对象的标签，如果还没有执行到，这时候去获取该标签的对象，会显示undfind（emmm，今天因为这个差点没被搞疯了）；

## jquery常用方法 ##

html（）：类似js的innerHTML  
text（）：类似js的innerText  
val():获取值

prop（）：（获取属性值）一般只用于获取下拉框，单选、多选按钮选中情况；  
attr（）：获取属性值，除下拉框，单选、多选按钮外，用于其他标签获取属性值；

*  **选择器：**
 *  id选择器：$("\#id");
 *  element选择器：$(“element”);

**筛选、过滤选择器：**

*  $(":button\[name=‘btn’\]")：筛选name=btn的所有的button元素

**DOM增删改：**

*  appendTo（）：将内容追加到标签里成为最后一个子元素
 *  prependTo（）：将内容追加到标签里成为第一个子元素
 *  append():将内容追加到标签里成为最后一个子元素
 *  prepend():将内容追加到标签里成为第一个子元素
 *  insertBefore（）：在标签的前面加一个同级的元素
 *  before():在标签的前面加一个同级的元素
 *  after():在标签的后面加一个同级的元素
 *  remove()：删除当前元素
 *  empty()：删除元素里的内容

今天

这里的两个方法的作用都是相同的，只是写法有点微微的区别  
**一个选择器在前面，一个选择器在后面**

$("<h1>fufu真帅</h1>").appendTo("div");
    $("div").append("<h1>fufu世界第一</h1>");