基本用法

border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈

生成圆形

<!--让 border-radius 的值为正方形宽度的一半即可-->

div {

width: 200px;

height: 200px;

border: 2px solid green;

border-radius: 100px;

/* 或者用 50% 表示宽度的一半 */

border-radius: 50%;

}

生成圆角矩形

<!--让 border-radius 的值为矩形高度的一半即可-->

div {

width: 200px;

height: 100px;

border: 2px solid green;

border-radius: 50px;

}

展开写法

border-radius 是一个复合写法. 实际上可以针对四个角分别设置

border-radius:2em;

等价于

border-top-left-radius:2em;

border-top-right-radius:2em;

border-bottom-right-radius:2em;

border-bottom-left-radius:2em;

border-radius: 10px 20px 30px 40px;

等价于

border-top-left-radius:10px;

border-top-right-radius:20px;

border-bottom-right-radius:30px;

border-bottom-left-radius:40px;

（4）元素的显示方式

【1】块级元素

常见的元素：h1 - h6、p、div、ul、ol、li …

特点:

独占一行高度, 宽度, 内外边距, 行高都可以控制.宽度默认是父级元素宽度的 100% (和父元素一样宽)是一个容器(盒子), 里面可以放行内和块级元素.

<style>

.demo1 .parent {

width: 500px;

height: 500px;

background-color: green;

}

.demo1 .child {

/* 不写 width, 默认和父元素一样宽 */

/* 不写 height, 默认为 0 (看不到了) */

height: 200px;

background-color: red;

}

</style>

<div class="demo1">code>

<div class="parent">code>

<div class="child">code>

child1

</div>

<div class="child">code>

child2

</div>

</div>

</div>

注意:

文字类的元素内不能使用块级元素p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div

【2】行内元素/内联元素

常见的元素：a、strong、b、em、i、del、s、ins、u、span …

特点:

不独占一行, 一行可以显示多个设置高度, 宽度, 行高无效左右外边距有效(上下无效). 内边距有效.默认宽度就是本身的内容行内元素只能容纳文本和其他行内元素, 不能放块级元素

注意:

a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做)a 标签里可以-放块级元素, 但是更建议先把 a 转换成块级元素

【3】行内元素和块级元素的区别

（1）块级元素独占一行, 行内元素不独占一行

（2）块级元素可以设置宽高, 行内元素不能设置宽高.

（3）块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置

【4】改变显示模式

使用 display 属性可以修改元素的显示模式，可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素

<code>var name = 'zhangsan';

var age = 20;

var a = 10; // 数字

a = "hehe"; // 字符串

Java是静态强类型语⾔, 在变量声明时, 需要明确定义变量的类型. 如果不强制转换, 类型不会发生变化

变量名命名规则

（1）组成字符可以是任何字⺟、数字、下划线（_）或美元符号（$）

（2）数字不能开头

（3）建议使用驼峰命名

2. 数据类型

虽然js是弱数据类型的语⾔，但是js中也存在数据类型，js中的数据类型分为 原始类型和引用类型

3. 运算符

JavaScript 中的运算符和 Java ⽤法基本相同

【3】JS对象

在 JS 中, 字符串, 数值, 数组, 函数都是对象

每个对象中包含若干的属性和方法

• 属性: 事物的特征

• 方法: 事物的行为

1. 数组

注意: JS 的数组不要求元素是相同类型

创建数组

使用new 关键字创建

// Array 的 A 要⼤写

var arr = new Array();

使用字面量方式创建 [常用]

var arr = [];

var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为“元素”

数组操作

读: 使用下标的方式访问数组元素(从 0 开始)

增: 通过下标新增, 或者使用 push 进行追加元素

改: 通过下标修改

删: 使用 splice 方法删除元素

注意：

（1）如果下标超出范围读取元素, 则结果为 undefined

（2）不要给数组名直接赋值, 此时数组中的所有元素都没了，相当于本来 arr 是⼀个数组, 重新赋值后变成字符串了

2. 函数

语法格式

// 创建函数/函数声明/函数定义

function 函数名(形参列表) {

          函数体

           return 返回值;

}

// 函数调⽤

函数名(实参列表) // 不考虑返回值

返回值 = 函数名(实参列表) // 考虑返回值

函数的定义和调⽤的先后顺序没有要求. (这⼀点和变量不同, 变量必须先定义再使⽤)

关于参数个数

实参和形参之间的个数可以不匹配. 但是实际开发⼀般要求形参和实参个数要匹配

如果实参个数比形参个数多, 则多出的参数不参与函数运算

sum(10, 20, 30); // 30

如果实参个数⽐形参个数少, 则此时多出来的形参值为 undefined

sum(10); // NaN, 相当于 num2 为 undefined

函数表达式

var add = function() {

var sum = 0;

for (var i = 0; i < arguments.length; i++) {

sum += arguments[i];

}

return sum;

}

console.log(add(10, 20)); // 30

console.log(add(1, 2, 3, 4)); // 10

console.log(typeof add); // function

3. 对象

创建对象

使用字面量 创建对象 [常用] ----- 使⽤ { } 创建对象

//属性和⽅法使⽤键值对的形式来组织

//键值对之间使⽤ , 分割. 最后⼀个属性后⾯的 , 可有可⽆

//键和值之间使⽤ : 分割

//⽅法的值是⼀个匿名函数

var a = { }; // 创建了⼀个空的对象

var student = {

name: '小红',

height: 175,

weight: 170,

sayHello: function() {

console.log("hello");

}

};

使用 new Object 创建对象

var student = new Object(); // 和创建数组类似

student.name = "小红";

student.height = 175;

student['weight'] = 170;

student.sayHello = function () {

console.log("hello");

}

console.log(student.name);

console.log(student['weight']);

student.sayHello();

使用 构造函数 创建对象

//构造函数的函数名⾸字⺟⼀般是⼤写的

//构造函数不需要 return

function 构造函数名(形参) {

this.属性 = 值;

this.⽅法 = function...

}

var obj = new 构造函数名(实参);

使用对象的属性和方法

// 1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的"

console.log(student.name);

// 2. 使⽤ [ ] 访问属性, 此时属性需要加上引号

console.log(student['height']);

// 3. 调⽤⽅法, 别忘记加上 ()

student.sayHello();

【4】JQuery

虽然原生的JavaScript提供的API可以操作页面，但是代码十分复杂，所以我们使用jQuery。

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架，它封装了JavaScript常用的功能代码, 提供了简洁而强大的选择器和DOM操作方法

1. 引入依赖

使用JQuery需要先引⼊对应的库

在使用jQuery CDN时，只需要在HTML⽂档中加入如下代码

< script src=“https://code.jquery.com/jquery-3.7.1.min.js”>

这个URL是CDN(内容分发网络)服务提供商为jQuery库提供的⼀个统一资源定位符，也可以使⽤其他公司提供的CDN地址

2. JQuery 语法

jQuery 语法是选取 HTML 元素后对其操作

基础语法

$(selector).action()

$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.Selector 选择器, ⽤来"查询"和"查找" HTML 元素action 操作, 执行对元素的操作

JQuery 的代码通常都写在 document ready 函数中.

document：整个文档对象, ⼀个页面就是⼀个文档对象, 使用document表示

这是为了防止文档在完全加载（就绪）之前运行jQuery 代码，即在文档加载完成后才可以对 页面进行操作。如果在文档没有完全加载之前就运⾏函数，操作可能失败

$(document).ready(function(){

// jQuery functions go here

});

3. JQuery 选择器

4. JQuery 事件

概念

JS 要构建动态页面, 就需要感知到用户的行为，

用户对于页面的⼀些操作(点击, 选择, 修改等) 操作都会在浏览器中产生⼀个个事件, 被 JS 获取到, 从而进行更复杂的交互操作

事件由三部分组成

事件源: 哪个元素触发的事件类型: 是点击, 选中, 还是修改?事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数

常见的事件

5. 操作元素

获取/设置元素内容

有参数时, 就进⾏元素的值设置, 没有参数时, 就进行元素内容的获取

获取/设置元素属性

JQuery attr() 方法用于获取属性值

获取/返回css属性

css() 方法设置或返回被选元素的⼀个或多个样式属性

添加元素

添加 HTML 内容

append() : 在被选元素的结尾插⼊内容prepend() : 在被选元素的开头插⼊内容after() : 在被选元素之后插⼊内容before() : 在被选元素之前插⼊内容

删除元素

删除元素和内容，⼀般使用以下两个 jQuery 方法：

remove() : 删除被选元素（及其子元素）empty() : 删除被选元素的子元素