html，css3，javascript，jquery

最新推荐文章于 2024-09-10 06:15:30 发布

程序员小超

最新推荐文章于 2024-09-10 06:15:30 发布

阅读量327

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/weixin_51972420/article/details/121520767

版权

HTML CSS JavaScript DOM jQuery

关键词由CSDN通过智能技术生成

网页文件大体由以上几个主要部分组成：

<html> </html> 意思是其包括的范围内是html超文本。
<head> </head> head元素是所有头部元素的容器。它用来放一些定义文档的信息。
<meta charset=’utf-8’> meta单标签元素也要写到head元素里,用来指定网页的字符集.
<title> </title> title 元素要写到head元素里，它用来指定文档的标题.
<body></body> body元素是网页的主体.它是浏览器中网页显示的区域.
<script></script> scrtipt元素.是网页中嵌入的脚本语言.例如可以是javaScript,asp 等.
<style></style> style元素，它定义了网页的样式。

HTML是一种用来描述网页该如何在浏览器中显示的语言。它被称做超文本标记语言。本质上讲它算不上一种编程语言，它只是用一些特定的标签来描述网页如何在浏览器中显示。

CSS样式概念

早期的HTML页面为了做出漂亮的界面，就为HTML增加了很多属性，这样做的结果就是页面代码变得十分臃肿，而且不利于维护。为了解决这样的问题，早期的计算机工程师们发明了css样式，它是cascading style sheets 的简称，也叫做层叠样式表，是一种用来表现html、xml等文件样式的计算机语言。

从CSS设计的目的上可以看出，它是用来对网页中的元素和网页的整效果进行美化的。我们可以把它理解为网页元素的衣服。网页中的元素被不同的CSS修饰就相当于穿上了不同的衣服，从而体现出不同风格和视觉效果。

JavaScript让网页有了和它的使用者进行沟通的能力

javaScript语言不是JAVA语言。它是一种脚本语言，可以被直接嵌入到网页HTML文件。可以被浏览器调用执行。它不需进行编译，是一种解释性语言。最初诞生时只能在浏览器端执行，如今即可以在浏览器端执行，又可以在服务器端执行。

JavaScript基本语法

数字（Number）字面量可以是整数或是小数，也可以是科学计数。

例如： 3.14 1024 123e5

字符串(String)字面量string即可以用单引号，也可以用双引号

例如： “世界你好” ‘世界你好’

表达式字面量用于计算：

例如： 5+6 8*10

数组（Array）字面量定义一个数组

例如：[10,20,30,50]

对象(Object)字面量定义一个对象

例如：{firsName:”张”，lastName:”三”，age:50,sex:”男”}

函数(function)字面量定义一个函数

function myFunction(a,b) { return a+b }

JavaScript输出数组，函数，自定义对象的使用

window.alert(“要显示的内容”); 弹出警告框

document.write(“输出的内容”); 将内容写到HTML文档中

console.log(“内容”) 写入到浏览器控制台中

innerHTML=”内容”; HTML元素获取内容或是插入内容

document.getElementById(id).innerHTML=”改了”; 修改内容

var str=document.getElementByID(id).innerHTML; 获取内容

getElementByID(id) 按id获取元素

getElementByName(name) 按名称获取元素

getElementByTagName(classname)按标签获取元素

getElementByClassName(classname)按类名获取元素

数组

定义及初始化方式一

var animal=new Array();

animal[0]=”老虎”;

animal[1]=”狮子”;

animal[2]=”狗熊”;

定义及初始化方式二

var animal=new Array(“老虎”,”狮子”,”狗熊”);

定义及初始化方式三

var animal=[“老虎”,”狮子”,”狗熊”];

常用方法：

length() 返回元素数量

indexOf(“狮子”) 返回元素的索引位置

2.函数

语法格式

function 函数名（[参数1，参数2,......]）

{

程序代码

[return 返回值]

}

注意，与java不同的是参数用写参数类型

例子：

function f1(a,b)

{

c=a+b;

alter(c);

}

或是

<button οnclick=”f1(3,5)”>点击调用函数f1</button>

3.自定义对象

var animal=”老虎”; 这里animal是一个变量

var animal={name:”老虎”,length:”2米”} 这是一个对象

对象有多个值，以键值对的形式出现。

对象的使用:

document.write (animal.name);

document.write(animal[“name”]);

给对象添加方法：

var animal={

name:”老虎”，

lens:”2米”，

shuoming:function()

{

return this.name+”体长：”+this.len;

}

alter( animal.shuoming); //方法调用

常用对象

string 对象 number对象 date对象 math对象常用其中的方法

文档对象DOM 和浏览器对象BOM

Dom 可以根据id，class，元素名，名称获取元素并且修改，可以添加事件比如单击，双击

BOM 获取浏览器的一些信息

Jquery

2006年1月，jQuery的第一个版本面世，它对JavaScript进行了封装，是一个快速、简洁的JavaScript框架。使用它可以极大的简化javaScript程序的开发。

常用用户事件：

dbclick() //双击事件

mouseenter() //鼠标进入事件

mouseleave() //鼠标离开事件

mousedown() //鼠标按下事件

mouseup() //鼠标松开事件

hover() //鼠标悬停事件

jquery动画特效

淡入淡出：

fadeIn(参数)方法,可以实现网页元素从无到显示的淡入淡出效果。参数为淡入淡出的速度。

  $(“#div1”).fadeIn(); //不写参数,为默认速度。   
  $(“#div1”).fadeIn(“slow”); //为低速
  $(“#div1”).fadeIn(3000);  //指定毫秒数

fadeOut(参数)方法，可以实现网页元素从显示到无的淡入淡出效果。参数为淡入淡出速度。

 $(“#div1”).fadeIn(); //不写参数,为默认速度。   
 $(“#div1”).fadeIn(“slow”); //为低速
 $(“#div1”).fadeIn(3000);  //指定毫秒数

fadeTo(参数1，参数2)方法，可以使网页淡入淡出到一定的程度。参数1:速度，参数2:变淡成度

当参数2的值变为1的时候，元素的色彩恢复正常。

$(“#div1”).fadeTo(“slow”,0.15);
$(“#div2”).fadeTo(“slow”,0.4);
$(“#div3”).fadeTo(“slow”,0.7);
$(“#div4”).fadeTo(“slow”,0.9);

滑动：

slideDown(参数1，参数2); 参数1，为滑动特效的显示时间，参数2为完成效果后要执行的函数名。

slideUp(参数1，参数2);参数1，为滑动特效的显示时间，参数2为完成效果后要执行的函数名。

slideToggle(); 无参数切换

动画：

开启动画：animate(参数1，参数2); 参数1可以配置元素位置，大小的变化。参数2为动画时间。

例如：

       元素.animate({left:'500px'});

       元素.animate({

                       left:'250px',

                       height:'150px',

width:'150px',

opacity:'0.5'

                }，500);

    opacity指定的是透明度

       我们需要先将元素的 position 属性设置为 relative, fixed, 或 absolute 才能使用动画方法。

       动画演示：

         终止动画：stop()方法可以终止元素正在进行的动画效果。

         $(“#div1”).stop; //当方法执行时，那在div1上正在进行的动画效果将会终止。

对CSS操作

JQuery也封装了真对CSS样式的操作方法。参过这些方面，我们可以完成对网页元素的CSS操作。主要的方法有

添加样式 addClass(“样式类选择器”)
删除样式 removeClass();
对被选元素的样式进行切换操作
取出被选元素的样式属性。

在JavaScript中，DOM是通过document对象来进行的。Jquery，对document操作进行了封装。

通过对DOM的操作，我们可以方便的对网页内容进行修改。

text() 获取元素的文本内容(下图中红线部分)，或对文本内容进行设置

$("#sp1").text()

2html() 获取元素的HTML内容（下图中红框部分），或对元素的HTML内容进行设置

$("#div1").html()

3val() 设置或返回表单字段的值

$("#Edit1").val()

4attr() 获取属性值标签的任意属性的值。指定属性名即可。

$("#a1").attr("属性名")

添加元素

prepend() - 在被选元素的开头插入内容（仍然在该元素的内部）

append() - 在被选元素的结尾插入内容（仍然在该元素的内部）。

before() - 在被选元素之前插入内容（在该元素的外部）

after() - 在被选元素之后插入内容（在该元素的外部）。

删除元素

remove() - 删除被选元素（及其子元素）
empty() - 清空被选元素中的子元素（只删除子元素，被选元素依然存在）

程序员小超

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html，css3，javascript，jquery

网页文件大体由以上几个主要部分组成：<html> </html> 意思是其包括的范围内是html超文本。 <head> </head> head元素是所有头部元素的容器。它用来放一些定义文档的信息。 <meta charset=’utf-8’> meta单标签元素也要写到head元素里,用来指定网页的字符集. <title> </title> title 元素要写到head元素里，它用来指定文档的标...
复制链接

扫一扫