脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JAVAWEB 中CSS和JS的基本用法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 1.css和htML的四种结合方式
(1)在每个html标签上面都有一个属性style，把css和html结合在一起
(2)使用html的一个标签实现
(3)在style标签里面 使用语句
@import url(css文件的路径);
-第一步:创建一个css文件
-第二部：引入css文件
Warning: faultly
在某些浏览器下不起作用。一般使用第四种方式。
(4)使用头标签link，来引入外部文件(css)
-第一步:创建一个css文件
-第二部：引入css文件
在头标签里头写。
CSS优先级:
由上到下，由外到内，优先级由低到高。(后加载的优先级高)
格式:
选择器名称{
属性名1:属性值;
属性名2:属性值;
属性名3:属性值;
}
2.css基本选择器
要对哪个标签里面的数据进行操作
要对哪个标签里面的数据进行操作
(1)标签选择器
*使用标签名作为选择器的名称
p{
background-color: blue;
color: whITe;
}
(2)class选择器
*每个html标签都有一个属性class
666
p.lion{
background-color: red;
}
如果是 .lion =>无论是什么标签只要class=”lion” 那么都是相同属性
(3)id选择器
*每个html标签上面有一个属性 id
-
p#yinxin{
background-color: gray;
}
p#yinxin{
background-color: gray;
}
#yinxin{
background-color: green;
}
id="yinxin"的所有标签 背景颜色都是green.
这三个选择器的优先级
class选择器优先级大于标签选择器
标签style属性 > id > class > 标签(选择器)
3.css的扩展选择器(了解)
(1)关联选择器
*
*设置p标签里面p标签的样式,嵌套标签里面的样式
p p{
background-color: green;
}
(2)组合选择器
*
111
222
*把p和p标签设置成相同的样式,把不同的标签设置成相同的样式
(3)伪元素选择器
*CSS里面提供一些定义好的样式，可以拿来使用
*比如 超链接
超链接状态:原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited
4.盒子模型(了解)
在进行布局前需要把数据封装到一块一块的区域内(p)
-1.边框 border
-2.内边距
-3.外边距
边框
border:统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
border: 2px solid blue; 大小 样式 颜色
内边距
文本内容距离p四条边的距离
padding:统一设置
上 padding-top
下 padding-bottom
左 padding-left
右 padding-right
基本语法: padding: length;
外边距
margin:统一设置
上 margin-top
下 margin-bottom
左 margin-left
右 margin-right
基本语法: margin: auto | length;
5.布局的漂浮(了解)
属性值
经测试不好用!
float:
left:文本流向对象的右边
right:文本流向对象的左边
6.布局的定位(了解)
position:
属性值
-absolute 将对象从文档流中拖出
可以是top、bottom等属性进行定位
-relative 对象不可重叠
不会把对象从文档流中拖出
可以使用top、bottom等属性进行定位
7.javascript简介
*javascript是基于对象和事件驱动的脚本语言，应用于客户端。
-基于对象:提供好了很多对象，可以直接拿来用
-事件驱动:html做网站静态，javascript动态效果
-客户端:专门指的是浏览器;
*javascript的特点
-1 交互性
信息的动态交互
-2 安全性
js不能访问本地磁盘的文件
-3 跨平台性
java里面的跨平台性-虚拟机
只有能够支持js的浏览器，都可以允许
*javascript和java的区别
没关系-跟雷锋和雷峰塔一样、、没关系
(1)js是基于对象，java是面向对象
(2)java是强类型语言，js是弱类型语言
js: VAR a = “123”; var b = 123;
(3)js只需解析即可运行,java要先编译成字节码再执行
*js的组成(三部分组成)
(1)ecmascript
-ECMA(组织):欧洲计算机协会
它制定js的语法,语句
(2)BOM
(3)DOM
-document object model:文档对象模型
2.js和html的结合方式
第一种
-使用一个标签
第二种
-使用script标签,引入一个外部的js文件
**创建一个js文件,写js代码
使用第二种方式的时候,就不要在标签里写其他代码(不会执行的);
8.js的原始声明和声明变量
*java的基本数据类型 byte short int long float double char boolean
*定义变量 都使用关键字 var
*js的原始类型(5个)
-string 字符串
var str = “abc”;
-number 数字类型
var m = 123;
-boolean true和false
var flag = true;
-null
var date = new Date();
表示获取对象的引用,null表示对象引用为空,所有对象的引用也是object
-undefined
定义一个变量,但没有赋值
var a;
9.js的语句
-java语句
-if
-switch
-for
-while / do while
-js语句
-if判断语句(和java相同)
-switch语句(所有类型都支持)
switch(a)
{
case 5:
break;
case 6:
break;
default:
}
-循环语句 for / while / do while
//while循环
var i =5;
while (i>1) {
alert(i);
i--;
}
// for循环
for(var i = 0; i < 3; i++)
alert(i);
*直接向页面输出的语句(可以把内容显示在页面上)
document.write("aaa");
document.write("
"); 可以向页面输出变量,固定值和html代码 document.write里面是双引号,如果设置标签的属性需要使用单引号
10.js的数组
java里面数组的定义 int []arr = {1,2,3};
JS数组的定义方式:
(1)var arr = [1,2,3];
var arr = [1,”4”,true];
(2)var arr = new Array(5); //定义一个数组,数组长度是5
arr[0] = “1”;
(3)使用内置对象Array
var arr = new Array(3,4,5);//定义一个数组,数组里面的元素是3,4,5
*数组里有一个属性 length:获取到数组的长度
11.js的函数
*java里面定义方法
public 返回类型 void / int 方法名(参数列表){
方法体;
返回值;
}
public int add(int a,int b)
{
int sum = a + b;
return sum;
}
**js定义函数
-函数参数列表不需要写var,直接写参数名称即可。
(1)使用关键字 function
function 方法名(参数列表){
方法体;
//返回值可有可无(根据实际需要)
}
(2)匿名函数
var add = function(参数列表){
方法体和返回值;
}
(3)使用js里面内置对象Function(很少用)
var 名称 = new Function("参数列表","方法体和返回值");
var add = new Function("x,y","var sum;sum=x+y;return sum;");
12.js的全局变量和局部变量
*全局变量,在script标签里面定义一个变量,这个变量在页面中js部分都可以使用
*局部变量,在方法内部定义一个变量,只能在方法内部使用
13.script放置的位置
建议*把script标签放到后面
需求:
在js里面需要获取到input里面的值,如果script标签放到head里面会出现问题
html解析是从上到下的,script标签放到的是head里面,直接在里面取input里面的值,因为页面还没解析到input那一行,肯定取不到;
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JAVAWEB 中CSS和JS的基本用法全部内容，希望文章能够帮你解决javascript代码实例教程-JAVAWEB 中CSS和JS的基本用法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。