前端基础-JavaScript

牛牛的Java学习之旅

已于 2022-05-14 15:47:13 修改

阅读量820

点赞数

分类专栏：前端基础文章标签： javascript 前端开发语言

于 2022-05-12 09:23:42 首次发布

本文链接：https://blog.csdn.net/llx522/article/details/124724130

版权

前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript(精通)

1、相关介绍

行为层：是一种脚本语言，不需要编译，将文本格式的字符代码发送给浏览器由浏览器解释运行。
JavaScript框架：
- jQuery:优点简化DOM操作，缺点是DOM操作太频繁，影响前端性能
- Angular:模块化开发
- React：减少DOM操作
- Vue：实现模块化开发、路由、状态管理等新特性
- Axios：前端通信框架
UI框架：
- Ant-Design：基于React的UI框架
- ElementUI、iview、ice：基于Vue的UI框架，饿了么出品
- Bootstrap：Twitter推出的开源工具包
- AmazeUI：跨屏前端框架
JavaScript的构建工具：
- Babel：JS编译工具
- WebPack：模块打包器，打包、压缩、合并及按序加载
微信小程序开发框架：WeUI
后端技术：
- NPM：项目综合管理工具，类似于Maven
- Express：NideJS框架
主流前端框架：
- Vue.js

2、快速入门

2.1、引入JavaScript

内部标签
外部引入:保证成对出现
不用定义type
注释是：//，与java一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    <script>-->
<!--        alert('hello,world');-->
<!--    </script>-->

    <!--外部引入-->
    <script src="js/lx.js"></script>
<!--    不用显示定义type，默认就是-->
    <script type="text/javascript"></script>
</head>
<body>

</body>
</html>

2.2、基本语法入门

<script>
  // 1. 定义变量 变量类型 变量名 = 变量值
  var num = 1;
  var score = 71;
  // alert(num);
  // 2. 条件控制
  if(score>60 && score<70) {
      alert("良")
  }else if (score>70 && score<80){
      alert("优");
  }else {
      alert("true");
  }

  /*
   console.log(score): 在浏览器的控制台打印变量，相当于System.out.println()
   css用elements元素审查
   js用Console控制台打印消息
   调试用source源代码debug
   cookie用application
   */
</script>

2.3、数据类型

变量不以数字命名即可
数值：不区分小数和整数

123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN  //not a number
Infinity //表示无限大

字符串：‘abc’ “abc”
布尔值：ture false
逻辑运算

&&  两个都为真才为真
    
||  一个为真就为真
    
!   取反

比较运算符（重要）

= 

==  等于（类型不一样，值一样，也会判断为ture）

=== 绝对等于（类型一样，值一样，结果为ture）

特殊：
- NaN === NaN:false; NaN与所有的数值都不相等包括自己
- 只能通过isNaN（NaN）来判断这个数是不是NaN
浮点数问题：
有精度问题，避免使用浮点数运算

console.log((1/3) === (1-2/3))

null和undefined
- null：空
- undefined：未定义
数组：
- java里是一系列相同类型的对象
- JavaScript里不需要相同类型：
```
var arr = [1,2,3,'hhh',null,true]
```
- 取数组下标如果越界了就会出现：
```
undefined
```
对象：
- 对象是大括号，数组是中括号，每个属性用逗号隔开，最后一个不用添加逗号

var person = {
        name:"liuxiang",
        age:3,
        tags:['js','java','...']
    }

2.4、严格检查模式

前提IDEA需要设置支持ES6语法
‘use strict’; 严格检查模式预防JavaScript的随意性导致产生的问题
必须写在JavaScript第一行
局部变量使用let定义

 <script>
    // 严格检查模式
    'use strict';
    //全局变量
     let i = 1;
  </script>

3、数据类型

3.1、字符串

正常字符串使用单引号或者双引号包裹
转义字符

\' : 一个'字符
\n:换行
\t
\u4e2d:Unicode字符
\x41: Ascll字符

多行转义符

//多行字符串 :  ` `;tab上面的键
var msg=
    `hello
liu
你好
123
`

模板字符串

${变量名}

let name = "刘想";
var msg= `你好，${name} `
 console.log(msg);

字符串长度

 console.log(msg.length);

6.字符串可变性：不可变

在这里插入图片描述

大小写转换

let student = "student";
console.log(student.toUpperCase());//是方法不是属性

字符对应数组坐标及数组坐标对应字符

console.log(student.charAt(4));
console.log(student.indexOf('e'));

subString(from num1 to num2)

console.log(student.substring(2,4));

3.2、数组

Array可以包含任意数据类型

数组可以改变赋值

 <script>
    'use strict';
    let arr = [1,2,3,5,7];
    console.log(arr);
    arr[0] = 0;
    console.log(arr);

  </script>

数组长度可变

arr.length = 10;
console.log(arr);
arr.length = 2;//长度变短就丢失数据
console.log(arr);

方法

let arr = [1,2,3,5,7,"1","2"];
console.log(arr.indexOf(2));//获取指定元素在数组中的位置
console.log(arr.indexOf("2"));
//slice() 截取Array的一部分返回一个新数组,类似于sbuString
console.log(arr.slice(1,4));
//push,pop
arr.push('a','b');//尾部加入元素
console.log(arr);
arr.pop();//弹出尾部一个元素
//unshift(),shift()
arr.unshift(5);//头部加入元素5
arr.shift();//头部抛出一个元素
//排序sort()
console.log( arr.sort());
//反转：reverse()
console.log( arr.reverse());
//在尾部拼接数组并返回新数组concat([])
console.log( arr.concat([1,2,3]));
//连接符
console.log( arr.join('-'));
//多维数组
let arr1 = [[1,2],[2,3]];//从00开始
console.log(arr1);
arr1[0][1];//值为1

3.3、对象

若干个键值对
{…}表示对象，键值对描述属性，多个属性之间用逗号隔开，最后一个属性不加逗号。
所有的键都是字符串，值都是任意对象

let 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值,
}

'use strict';
let person = {
  name:"liuxiang",
  age: 23,
  email:"97122377@qq.com",
  score:90
};

对象赋值

person.age = 24;

使用不存在的属性不会报错，出现undefined
动态的删减属性

delete person.name
true

动态的添加属性并赋值

person.id = "kmoji"
'kmoji'
person
{age: 24, email: '97122377@qq.com', score: 90, id: 'kmoji'}

判断属性值是否在这个对象中

'age' in person
true
'toString' in person //继承父类的方法
true

判断一个属性是否对象自身拥有

person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false

3.4、流程控制

if判断

循环

for()

for (let i = 0; i < 100; i++) {
        console.log(i);
    }

while()
forEach()

let num = [12,25,56,32,3];
num.forEach(function (value) {
    console.log(value);
})

for…in：获得下标

//for( var index in Object){}:索引
    for (let numKey in num) {
        if (num.hasOwnProperty(numKey)){
            console.log("存在");
        }
        console.log(num[numKey]);
    }

3.5、Map 和 Set

Map常用方法：

let map = new Map([["tom",100],["liu",90],["rose",80]]);
//统计学生的成绩和名字
let name = map.get("tom");//通过key获得value
console.log(name);
map.set("kk",50);//新增键值对
console.log(map);
map.delete("tom");//删除键值对
console.log(map);

Set：存储无序的不可重复的数据
常用方法：

let set = new Set([3,1,1,1,1]);//set可以去重
set.add(22);
set.delete(3);
console.log(set);
console.log(set.has(1));//判断集合中是否有相应元素

3.6、iteritor

for…of:获得元素
遍历set

let set = new Set([3,1,1,1,1]);
for (const number of set) {
    console.log(number);
}

遍历map

let map = new Map([["tom",100],["liu",90],["rose",80]])
for (const nameElement of map) {
        console.log(nameElement);
    }

4、函数及面向对象

4.1、函数定义及参数获取

定义方式一：
执行return结束，没有执行return，函数执行完也会返回结果undefined

function abs(x){
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

定义方式二：

var abs = function(x){
     if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

function(x){}是匿名函数，可以把结果赋给abs调用。
输入abs()：会出现NaN，可以手动抛出异常

function abs(x){
  //手动定义异常
  if (typeof x!=="number"){
    throw 'Not a Number';
  }
  if(x >= 0){
    return x;
  }else{
    return -x;
  }
}

arguments:代表传递进来的所有参数，是一个数组。

function abs(x){
  console.log("x=>"+x);//只输出第一个参数
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    //获取多余元素
    if(arguments.length > 2){
        for(let i = 2; i<arguments.length,i++){
            console.los(arguments[i]);
        }
    }
  if(x >= 0){
    return x;
  }else{
    return -x;
  }
}

...rest:获取除了已定义的参数外的所有参数

 function aaa(a,b,...rest){
        console.log("a=>"+a);
        console.log("b=>"+b);
        console.log(rest);
    }

测试结果：

在这里插入图片描述

4.2、变量的作用域

var定义变量是有作用域的
在函数体中声明，则在函数体外不能使用（想实现用闭包）

'use strict';
  function lx(){
    var x = 1;
    x = x + 1;
  }
  x = x + 2;//Uncaught ReferenceError: x is not defined

内部函数可以访问外部函数成员，反之不行

  function lx1(){
      var x = 'a';
  function lx(){
    y = x + 1;
    console.log(y);
  }
  var z = y + 1;//Uncaught ReferenceError: y is not defined
 }
    lx1();

在JavaScript中函数查找变量从自身函数开始由"内"到"外"查找，假设外部存在同名的函数变量，则内部函数会屏蔽外部函数的变量

  function lx1(){
     var x = 'a';
 function lx(){
   var x = 1;
   console.log('inner'+x);//outera
 }
 console.log('outer'+x);//inner1
 lx();
}
   lx1();

提升变量的作用域
结果xundefined 只是提升了y的声明不会提升y的赋值。
所以一开始全部定义所有的变量，后续用直接赋值

function lx(){
    var x = "x" + y;
    console.log(x);
    var y = 'y';
}
lx();

全局变量：默认自动绑定在window对象下

'use strict';
var x = 1;
function lx(){
    console.log(x);
    function lx1(){
        console.log(x);
    }
    lx1();
}
lx();

alert()这个函数本身就是一个window变量;

var old_alert = window.alert;
window.alert = function (){
};
window.alert(123);
//恢复
window.alert = old_alert;
window.alert(456);

javaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到就会向外查找，如果在全局作用域都没有找到就会报错RefrenceError
规范：自己定义一个全局变量空间，降低全局命名冲突的问题：

//定义唯一变量
var liuApp = {};
//定义全局变量
liuApp.name = 'liuxiang';
liuApp.add = function (a,b){
    return a + b;
}

局部作用域let
常量const：只读变量

4.3、方法

方法就是把函数放到对象的里面，对象只有两个东西：属性和方法

var liuxiang = {
  name:'刘想',
  birth:1997,
  age:function (){
    let now = new Date().getFullYear();
    return now-this.birth;
  }
}
console.log(liuxiang.age());
//属性
liuxiang.name
//方法
liuxiang.age()

this指的是当前调用此方法的人

function getAge() {
  let now = new Date().getFullYear();
  return now - this.birth;
}
  var liuxiang = {
    name: '刘想',
    birth: 1997,
    age:getAge
}
console.log(liuxiang.age());
getAge();//NaN 此时是window调用，无birth属性

apply在JavaScript中可以控制this的指向：所有的函数均有

getAge.apply(liuxiang,[]);//this指向了liuxiang对象

5、内部对象

标准对象

typeof 123
'number'
typeof 'haha'
'string'
typeof [12,23]
'object'
typeof true
'boolean'
typeof Map
'function'
typeof NaN
'number'
typeof undefined
'undefined'

5.1、Date

基本使用

 let date = new Date();
   console.log(date);//Fri Apr 08 2022 22:15:49 GMT+0800 (中国标准时间)
   date.getFullYear();//年
   date.getMonth();//月 0-11
   date.getDate();//日
   date.getDay();//星期几
   date.getHours();//时
   date.getMinutes();//分
   date.getSeconds();//秒
   date.getTime();//时间戳 1970 1.1 0：00：00开始
   date.toLocaleDateString();//'2022/4/8' 转为本地时间

5.2、JSON

早期所有数据传输习惯以XML文件传输，JSON是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言
易于人阅读和编写，同时也易于机器解析和生成，并有效的提升网络传输效率。
在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON来表示：
格式：
- 对象用{}
- 数组用[]
- 所有的键值对都用key:value
JSON和字符串的转化：

let user = {
  name: 'liuxiang',
  age:23,
  sex:'男'
}
//对象转化为JSON字符串
let jsUser = JSON.stringify(user);//{name: 'liuxiang', age: 23, sex: '男'}
console.log(jsUser);//{"name":"liuxiang","age":23,"sex":"男"}

//JSON字符串转化(parse)解析为字符串
let obj = JSON.parse(jsUser);
console.log(obj);

JSON和JS对象的区别：

var obj = {a:'hello',b:'abc'};
var json = '{"a":'hello',"b":'abc'}';

5.3、Ajax

原生的js写法：xhr异步请求
jQuery封装好的方法 $(“#name”).ajax(“”)
axios 请求

6、面向对象编程

JavaScript、Java、c#…面向对象有区别！

类：模板
对象：具体的实例

在JavaScript中思想：

原型：

let user = {
  name: 'liuxiang',
  age:23,
  sex:'男',
  run:function (){
    console.log(this.name+"  run..");
  }
};

let xiaoming = {
  name: "xiaoming"
};
//原型对象就是父类
xiaoming._proto_ = user;

function Student(name) {
  this.name = name;
}
//给student新增方法
student.prototype.hello = function (){
  alert('Hello')
}

class继承

//ES6后
  //定义一个学生的类
  class Student{

    constructor(name) {
      this.name = name;
    }
    hello(){
      alert('Hello');
    }
  }

  //继承
  class xiaoStudent extends Student{
    constructor(name,grade) {
      super(name);
      this.grade = grade;
    }
    Grade(){
      alert("hahaha5年级");
    }
  }
   var xiaoming = new Student("xiaoming");
   xiaoming.hello();
   var xiaocong = new xiaoStudent("xiaocong",5);
   xiaocong.Grade();

原型链：
_ proto _:每个构造函数都有一个原型对象，Object还有原型，最终都指向Object原型

7、操作BOM(重点)

BOM：浏览器对象模型
javaScript和浏览器的关系？
- 为了JavaScript在浏览器中运行
window对象
window代表浏览器窗口
- window.outHeight
- window.outWidth
- window.innerWidth
- window.innerHeight
- window.alert()
Navigator：封装了浏览器信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36 Edg/99.0.1150.55'
navigator.platform
'Win32'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36 Edg/99.0.1150.55'

screen：屏幕大小

screen.width
1536
screen.height
864

location：代表当前页面的URL信息（重要）

host: 'localhost:63342',//主机
href: 'http://localhost:63342/JavaScript'//当前指向的位置
protocol: "http:" //协议
reload: ƒ reload() //方法  刷新网页
location.assign() //设置新的地址

document：代表当前页面，HTML、DOM文档树

document.title //
document.getElementById()
document.cookie //获得客户端的信息

服务器端可以设置cookie：httpOnly
history：代表浏览器的历史记录

history.back()//后退
history.forward()//前进

8、操作DOM对象(重点)

浏览器网页就是一个DOM树形结构。
- 更新：更新Dom节点
- 遍历DOM节点
- 删除DOM节点
- 添加DOM节点
获得DOM节点

<div id="father">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p1</p>
</div>

<script>
   let h1 = document.getElementsByTagName("h1");
   let p1 = document.getElementById('p1');
   let p2 = document.getElementsByClassName('p2');
   let father = document.getElementById('father');
   var childrens = father.children;//获取父节点下所有的子节点
   // father.firstChild
   // father.lastChild
</script>

更新节点

var id1 = document.getElementById('id1');
id1.innerText = '456';//修改文本值
id1.innerHTML = '<strong> 123 </strong>';//HTML可以解析文本

id1.style.color = 'red' //属性用字符串包裹
'red'
id1.style.fontSize = '100px' // - 用驼峰命名代替
'100px'
id1.style.padding = '20px'
'20px'

删除节点：先获取父节点再通过子节点删除自己

<div id="father">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p1</p>
</div>

<script>
   let self = document.getElementById('p1');
   let father = self.parentElement; //通过子节点获得父节点
    //方式一
   father.removeChild(self);//通过父节点移除指定子节点
    //方式二 :删除是一个动态的过程:删除下一个的时候往前进一
   father.removeChild(father.children[0]);
   father.removeChild(father.children[1]);
   father.removeChild(father.children[2])
</script>

插入节点
获得的DOM节点是空的通过innerHTML增加一个元素，如果非空就覆盖

<p id="js">javaScript</p>
<div id="list">
  <p id="ee">javaEE</p>
  <p id="me">javaME</p>
  <p id="se">javaSE</p>
</div>

<script>
      //将已有的节点插入到某个节点后
  var js = document.getElementById('js');
  var list = document.getElementById('list');
  list.appendChild(js);//追加子元素
</script>

在这里插入图片描述

创建一个标签插入

//通过js创建一个新的节点
var newP = document.createElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = 'liuxiang';
list.appendChild(newP);//插入

//创建一个标签节点,万能模板创建所有标签
let myScript = document.createElement('script');
myScript.setAttribute('type','text/javaScript');
list.appendChild(myScript);//插入节点

在这里插入图片描述

//创建一个style标签
let myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background: yellow;}';
document.getElementsByTagName('head')[0].appendChild(myStyle);

insert

//insertBefore(NewNode,TargetNode):将新节点插入到目标节点处
var me = document.getElementById('me');
list.insertBefore(js,me);

9、操作表单(验证)

文本框text
下拉框< select>
单选框radio
多选框checkbox
隐藏框hidden
密码框password

<form action="post">
  <p>
    <span>用户名:</span> <input type="text" id="username"/>
  </p>
  <p>
<!-- 选框的值写死就是value值-->
    <span>性别:</span>
    <input type="radio" value="boy" name="sex" id="man"/>男
    <input type="radio" value="girl" name="sex" id="woman"/>女
  </p>

</form>

<script>
  let username = document.getElementById('username');
  username.value;//得到输入框的值
  username.value = '123';//修改输入框的值

  let man_id = document.getElementById('man');
  let woman_id = document.getElementById('woman');
  man_id.checked;//检查是否选中，选择为true
  man_id.value;//获得当前的值

</script>

MD5算法加密：
表单绑定提交事件 οnsubmit=“function()”
按钮绑定事件οnclick=“”，通过函数来操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--MD5算法-->
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>

<!--表单绑定提交事件 οnsubmit=""-->
<form action="https://www.baidu.com/" method="post" onsubmit=" return aaa()">
  <p>
    <span>用户名:</span> <input type="text" id="username" name="username"/>
  </p>
  <p>
    <span>密码:</span> <input type="password" id="password" />
  </p>

  <input type="hidden" id="md5-password" name="password">

<!--绑定事件οnclick=""，通过函数来操作-->
  <button type="submit">提交</button>
</form>

<script>
   function aaa(){
     alert(1);
     let username = document.getElementById('username');
     let password = document.getElementById('password');
     let md5pwd = document.getElementById('md5-password');
     console.log(username.value);
     console.log(password.value);

    md5pwd.value = md5(password.value);
    //可以校验判断表单内容，true就是通过提交，false：阻止提交
    return true;
   }
</script>
</body>
</html>

10、jQuery

jQuery库存放大量的JavaScript函数

获取：

CDN引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

</body>
</html>

库引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <script src="lib/jquery-3.6.0.js"></script>

</head>
<body>

<!--

公式: $(selector).action()

-->


</body>
</html>

公式：$(selector).action()

<!--
公式: $(selector).action()
-->

<a href="" id="test-jquery">点我</a>

<script>
    document.getElementById('id');
    //选择器就是css的选择器
    $('#test-jquery').click(function () {
        alert('hello');
    })
</script>

10.1、选择器

用API帮助文档

<script>
  //原生js：选择器少
  document.getElementById();
  document.getElementsByTagName();
  document.getElementsByClassName();
  //jQuery
  $('p').click();//标签选择器
  $('#id1').click();//id选择器
  $('.class').click();//类选择器

</script>

10.2、事件

鼠标事件：

$('.class1').mousedown();//按下
$('.class1').mousemove();//移动

<!--导入jQuery-->
  <script src="lib/jquery-3.6.0.js"></script>
  <style>
    #divMove{
      width: 500px;
      height: 500px;
      background: yellow;
      border: 1px solid red;
    }
  </style>
</head>
<body>

<!--要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>

<div id="divMove">
  移动鼠标
</div>

<script>
   //网页元素加载完后响应事件
   // $(document).ready(function () {
   // })
   //简写：
   $(function () {
     $('#divMove').mousemove(function (e) {
       $('#mouseMove').text('x:'+e.pageX+ 'y:'+e.pageY);
     });
   })
</script>
</body>

10.3、操作DOM元素

节点文本操作

<ul id="test-ul">
  <li class="js">javascript</li>
  <li name="python">Python</li>

</ul>

<script>

  $('#test-ul li[name = python]').text();//无参就是获得值，有参就是设置值
  $('#test-ul').html();//无参就是获得值，有参就是设置值
</script>

css操作

$('.js').css("color","red");//操作css

元素的隐藏和显示：本质是display：none

j$('#test-ul li[name = python]').show();
$('#test-ul li[name = python]').hide();

;//id选择器
$(‘.class’).click();//类选择器

```

10.2、事件

鼠标事件：

$('.class1').mousedown();//按下
$('.class1').mousemove();//移动

<!--导入jQuery-->
  <script src="lib/jquery-3.6.0.js"></script>
  <style>
    #divMove{
      width: 500px;
      height: 500px;
      background: yellow;
      border: 1px solid red;
    }
  </style>
</head>
<body>

<!--要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>

<div id="divMove">
  移动鼠标
</div>

<script>
   //网页元素加载完后响应事件
   // $(document).ready(function () {
   // })
   //简写：
   $(function () {
     $('#divMove').mousemove(function (e) {
       $('#mouseMove').text('x:'+e.pageX+ 'y:'+e.pageY);
     });
   })
</script>
</body>

10.3、操作DOM元素

节点文本操作

<ul id="test-ul">
  <li class="js">javascript</li>
  <li name="python">Python</li>

</ul>

<script>

  $('#test-ul li[name = python]').text();//无参就是获得值，有参就是设置值
  $('#test-ul').html();//无参就是获得值，有参就是设置值
</script>

css操作

$('.js').css("color","red");//操作css

元素的隐藏和显示：本质是display：none

j$('#test-ul li[name = python]').show();
$('#test-ul li[name = python]').hide();

ctrl+alt+l:自动对齐

牛牛的Java学习之旅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础-JavaScript

前端非常重要的一部分，JavaScript！本文包括基础的学习和常用的开发学习网站！
复制链接

扫一扫

专栏目录