使用JQuery快速高效制作网页交互特效基础知识和复习

蔚落 2023-07-23 07:58 1阅读 0赞

第一章 JavaScript 基础  
JavaScript是一种脚本语言、语法和Java类似  
1、JavaScript的基本结构如下：

2、JavaScript核心语法  
1)变量的声明和赋值 var 合法的变量名；

2)数据类型  
语法：  
typeof(变量或值）：  
undefined(未定义类型）  
null（空类型）  
number（数值类型）  
String（字符串类型）  
boolean（布尔类型）  
object(引用类型）

3）数组  
语法：  
var 数组名称=new Array(size);  
常用属性和方法1）length 2)join（分隔符）

4）运算符号  
==等于，一般比较 eg:“1”==true返回true  
===恒等，严格比较 eg:“1”===true返回fales

5)逻辑你控制语句  
1)if结构  
if(表达式)\{  
JavaScript 语句；  
\}  
else\{  
JavaScript 语句；  
\}

2）switch结构  
switch(表达式）\{  
case 值1：  
JavaScript 语句；  
break;  
case 值2：  
JavaScript 语句；  
break;  
default:  
JavaScript 语句；  
break;  
\}

3)循环结构  
for(初始化;条件；增量或减量）\{  
JavaScript 语句；  
\}

while(条件）\{  
JavaScript 语句；  
\}

do\{  
JavaScript 语句；  
\}while(条件）；

4）for-in循环  
for(变量 in 对象）\{  
JavaScript 语句；  
\}

5）常用的输入/输出  
警告对话框(alert)  
提示对话框（prompt)

3、JavaScript常用语法-----函数  
1）常用系统函数  
parseInt（）函数可解析一个字符串，并返回一个整数 语法：parseInt(“字符串”)  
parseFloat（）函数可解析一个字符串，并返回一个浮点数 语法：parseFloat(“字符串”)  
isNaN()函数用于检查其参数是否是非数字 语法：isNaN(x)

2)自定义函数  
1、定义函数  
语法：  
function 函数名（参数1，参数2……）\{  
JavaScript 语句；  
\[return 返回值\]  
\}  
2、调用函数  
事件名=“函数名（）”； eg：οnclick=“函数名（）”

第二章 JavaScript 操作 BoM对象  
1、Windows对象  
常用属性：history,location,screen 语法： window.属性名=“属性值”  
常用方法：prompt(),alert(),confirm;close();open();setTimeout();setInterval();语法：window.方法名()

2、history对象与location对象  
1)history对象方法: back();forward();go()  
2)location对象属性：host;hostname;href;  
3)location对象方法：reload();replace();

3、document对象  
1）document对象常用属性：referrer 本文地址;URL 语法：document.referrer;document.URL  
2）document对象常用方法：getElementById();getElementsByName();getElementsByTagName();write();

4、JavaScript内置对象  
Date；Array;String;Math;  
1）Date对象常用方法 语法：var 日期实例=new Date(参数）  
getDate();getDay();getHours();getMinutes();getSeconds();getMonth();getFullYear();getTime();  
2)Math对象方法 ceil();floor();round();random();  
var iNm=Math.floor(Math.random()\*100+1);

5、定时函数  
1)常用定时函数  
setTimeout() 语法：setTimeout(“调用的函数名称”，等待的毫秒数）  
setInterval() 语法：setInterval(“调用的函数名称”，周期性调用函数之间间隔的毫秒数）

第三章 JavaScript 操作 DOM对象  
JavaScript 操作DOM对象通常分为三类： DOM Core（核心），HTML-DOM和CSS-DOM  
1)节点属性：  
parentNode;childNodes;firstChild;lastChild;nextSibling;previousSibling;

2)节点信息  
nodeName(节点名称）；nodeValue（节点值）；nodeType（节点类型）  
节点类型：element元素；attr属性；text文本；comments注释；document文档

3）操作节点的属性  
getAttribute(“属性名”)；setAttribute(“属性名”,“属性值”)；

4）创建和插入节点  
createElement(tagName)  
A.appendChild(B);  
insertBefore(A,B);  
cloneNode(deep);

5)删除和替换节点  
removeChild(node);replaceChild(newNode,oldNode);

6)操作节点样式  
1、style属性 语法：HTML 元素.style.样式属性=‘值’；  
2、常见事件  
onclick:当用户单击某个对象是调用事件  
onmouseover:鼠标移到某元素之上  
onmouseout:鼠标从某元素移开  
onmousedown:鼠标按钮被按下  
3、className属性 语法： HTML 元素.className=“样式名称”  
4、获取元素的样式  
语法：HTML 元素.style.样式属性；  
HTML 元素.currentStyle.样式属性；（IE浏览器使用）  
5、获取元素位置  
currentStyle或getComputedStyle()  
6、元素属性应用  
offsetLeft;offsetTop;offsetHeight;offsetWidth;offsetWidth;offsetParent  
scrollTop;scrollLeft;  
clientWidth;clientHeight;

第四章 JavaScript对象及初识面向对象  
1、创建对象  
1)自定义对象 语法： var 对象名称=new Object();  
2)内置对象 String（字符串）对象；Date（日期）对象；Array（数组）对象；Boolean（逻辑）对象  
Math（算数）对象；RegExp对象；  
2、构造函数  
function Person(name,sex,age)\{  
this.name=name;  
this.sex=sex;  
this.age=age;  
this.show=function()\{  
alert(this.name+“我爱你”);  
\}  
\}  
function Person()\{\}

var my=new Person(“李钟硕”,“男”,29);  
my.show();  
3、原型对象  
属性：prototype

1：基于Object方式来创建对象  
var my = new Object();  
1.1：设置属性  
my.name = “凯凯”;  
my.sex = “男”;  
my.age = 19;  
1.2：设置方法  
my.show = function ()\{  
alert(this.name + “帅”);  
\}  
1.3：调用方法  
my.show();

2：基于字面量方式来创建对象  
var my = \{  
name:“longlong”,  
sex:“女”,  
age:19,  
show: function ()\{  
alert(this.name + “帅”);  
\}  
\}  
my.show();

3:创建构造函数  
function Person(name,sex,age)\{  
this.name = name;  
this.sex = sex;  
this.age = age;  
this.show = function ()\{  
alert(this.name + “帅”);  
\}  
\}  
//实例化  
var my = new Person(“凯凯”,“男”,19);  
my.show();  
3:使用原型对象(prototype)来赋值  
function Person()\{\}  
Person.prototype.name = “凯凯”;  
Person.prototype.sex = “男”;  
Person.prototype.age = 19;  
Person.prototype.sho = function ()\{  
alert(this.name + “帅”);  
\};  
var person = n ew Person();  
person.show();

JSP规划  
1：JSP(组成成分，九大内置对象)  
2：Servlet(基本用法)  
Servlet的生命周期  
初始化参数和上下文(会用)  
3：结合Servlet和JSP连接数据库做一个注册登陆。(作业)  
4：EL表达式、JSTL(标签库—遍历的标签)–穿插一个项目(第四章项目，每个同学都要操作)  
5：Ajax–原生、JQuery–封装(一次正课讲完,作业为单表的增删改查)  
6：分页处理(选做)(一次正课讲完,作业为单表的增删改查加分页)  
7：上传和下载功能(选做)  
8：连接池

第五章 初识JQuery  
1:使用JQuery的步骤：  
1：引用JQuery文件(建议：放入JS文件夹中)  
2：在页面中引入jQuery  
例如：

2:JQuery对象和document对象相互转换  
1：document----> JQuery  
$(document) ----> JQuery

2: JQuery — > document  
JQuery.get(0) ----> document  
或者  
JQuery\[0\] ----> document

3：JQuery对象的方法：  
show(); --显示  
hide(); --隐藏  
css(); --设置样式  
click();–鼠标单击事件  
addClass(); --添加样式名  
mouseover();–鼠标移入事件  
mouseout();–鼠标移出事件  
$(function()\{  
$("\#hh").click(function()\{  
// $("\#myDiv").css(“color”,“pink”);//添加一个样式  
$("\#myDiv").css(\{“color”:“pink”,“font-size”:“100px”\});//添加多个样式  
\});  
\});

1:使用JQuery的步骤：  
1：引用JQuery文件(建议：放入JS文件夹中)  
2：在页面中引入jQuery  
例如：

2:JQuery对象和document对象相互转换  
1：document----> JQuery  
$(document) ----> JQuery 对象

2: JQuery — > document  
JQuery.get(0) ----> document  
或者  
JQuery对象 ($)\[0\] ----> document  
document------>JQuery 对象  
$(Dom对象)

第六章 JQuery基本器  
基本选择器  
id(\#)  
class(.)  
标签  
\*  
并集

层次选择器  
后代:空格  
子代：>  
相邻(指后面的)：+  
同辈(指后面的):~

属性选择器  
\[属性名\]  
\[属性名=值\]  
\[属性名！=值\]  
\[属性名^=值\]–从头开始匹配  
\[属性名$=值\]–从尾开始匹配  
\[属性名\*=值\]–模糊匹配

基本过滤选择器  
:first  
:last  
:odd()–奇数  
:even()–偶数  
:eq(index)  
:lt(index)–小于  
:gt(index)–大于  
:header–匹配所有标题标签

:focus--选取当前获取焦点的元素
    
    :animated

–选择所有动画

可见性过滤选择器  
:visible()–选取所有可见的元素  
:hidden()–选取所有隐藏的元素

第七章 jQuery的事件与动画  
鼠标事件：  
点击事件：click();  
移入事件：mouseover();  
移出事件：mouseout();

复合事件：  
hover() 将鼠标的移入移出事件结合起来  
例如：$("\#myDiv").hover(fun1,fun2);  
fun1—鼠标移入时显示的效果  
fun2—鼠标移出时显示的效果  
toggle()  
点击周期切换事件  
有参：toggle(fun1,fun2…)  
无参：toggle();  
例如：  
$("\#myB").click(function()\{  
$("\#myDiv").toggle();  
\});  
toggleClass(“样式名称”); //点击切换样式  
动画：  
显示和隐藏–show()/hide();  
淡入和淡出–  
$("\#myDiv").fadeIn(5000);  
$("\#myDiv").fadeOut(5000);  
上拉和下拉–  
$(this).slideUp(1000);  
$(this).slideDown(1000);  
自定义动画  
animate();

第八章使用jQuery操作DOM  
获取内容：  
获取html内容：选择器.html();  
设置html内容：选择器.html(“html元素”);

获取文本内容：选择器.text();  
设置文本内容：选择器.text(“文本元素”);

获取元素的value值：选择器.val();  
设置元素的value值：选择器.val(“值”);

第九章 表单效验  
1、使用H5的方式来实现表单验证  
required------必填区  
placeholder----提示区  
pattern--------正则表达式  
例如：

2、使用String

Js复习  
1、js的框架代码

2、js常用的数据类型（例举5个）  
undefined(空类型）  
number  
String  
boolean  
object

3、String类的常用方法（例举3个）  
indexOf(str); 查找字符串中str首次出现的位置  
substring(index1,index2);截取index1到index2之间字符串，从零开始，包括index1不包括index2  
split(str); 根据str分割为字符串数组

4、对得到数组的长度和向数组追加一个元素的方法  
length 数组长度；  
push()向数组末尾添加一个或多个元素，并返回新的长度

5、和=的区别  
==：判断的是两边的值是否一致  
===：判断的是两边的值和两边的类型是否一致

6、js常用的事件（举例5个）  
onload 加载事件  
onclick 单击事件  
onmouseover 鼠标移动到某个元素上  
onchange 域的内容被改变  
onkeydown 某个键盘按键被按下

7、windows常用方法（举例7个）  
prompt() 显示输入框，返回输入值或默认值  
alert() 显示警告框，无返回值  
confirm() 显示确认框，确认返回true，取消返回false  
close() 关闭浏览器  
open() 打开浏览器  
setTimeout(执行的函数，时间) 在指定时间后执行函数  
setInterval(执行的函数，时间) 在指定时间循环调用函数

8、history对象常用的3个方法  
back() 加载前一个URL  
forword() 加载后一个URL  
go(-1) 加载前一个URL，相当于back()  
go(1) 加载后一个URL，相对于forword()

9、location对象常用的3个属性，以及加载当前文档的方法  
location.host//端口号  
location.hostname//主机名  
location.href//返回完整的URL  
location.reload()//重新加载当前文档

10、Document对象获取当前文档URL和获取返回载入当前文档URL的两个方法  
Document.URL//加载当前文档  
Document.referrer//返回载入前一个文档

11、Document对象获取网页元素的三个方法  
Document.getElementById() 根据id获取指定元素  
Document.getElementByName() 根据name属性值获取元素数组  
Document.getElementByTagName() 根据标签名获取元素数组

12、innerHTML和innerText的区别  
innerHTML 是把字符串当成HTML标签  
innerText 是把字符串当成普通的文本

13、Date内置对象获取年月日时分秒的六个方法  
getFullYear()  
getMonth() 获取月份，0~11  
getDate() 获取日份，1~31  
getHous() 获取小时数  
getMinutes() 获取分钟数  
getSeconds() 获取秒数

14、Math的天花板、地板、四舍五入、随机数的函数  
ceil() 天花板函数  
floor() 地板函数  
round() 四舍五入  
random() 随机数

15、写出两个定时函数，并说明其区别  
setTimeout() 在指定时间后执行函数，用于延迟某些功能或方法的执行  
setInterval() 以指定时间为周期执行函数，一般用于刷新表单

16、根据层次关系访问节点常用的属性  
parentNode 返回父节点  
childNodes 返回子节点集合  
firstChild 返回节点的第一个子节点  
lastChild 返回节点的最后一个子节点  
nextSibling 返回下一个节点  
previousSibling返回上一个节点

firstElementChild 返回节点的第一个子节点  
lastElementChild 返回节点的最后一个子节点  
nextElementSibling 返回节点的下一个节点  
previousElementSibling返回节点的上一个节点

17、获取节点的名称、值、类型，并举例元素类型节点和文本类型节点的区别  
nodeName(节点名称) 元素节点的节点名称是标签名，文本节点的节点名称永远是\#text

nodeValue(节点值) 元素节点的nodeValue是不可用的，文本节点的节点值是文本

nodeType(节点类型) 元素节点的nodeType为1，文本节点的nodeType为3

18、设置节点属性和获取节点属性的方法  
setAtrribute(“属性名”,“属性值”); 设置属性  
getAtrribute(“属性名”); 获取属性

19、创建节点和克隆节点的方法  
createElement(tagNme) 创建节点  
cloneNode(ele) 复制某个指定的节点

20、删除节点的方法  
removeChild(node) 删除指定的节点

21、动态为某个添加CSS样式的语法（两种）  
HTML元素.style.样式属性=“值”;  
HTML元素.className=“样式名称”;

22、举例js常用几个内置对象（举例5个）  
String （字符串对象）  
Date （日期对象）  
Array （数组对象）  
Boolean （数组对象）  
Math （逻辑对象）

23、请使用以下方法创建一个拥有姓名、年级的对象：

A、基于Object镀锡的方式创建对象

var obj=new Object();  
obj.name=“郑华瑞”;  
obj.grade-“S2”;  
obj.show=function()\{  
alert(obj.name+"-"+obj.grade);  
\}

B、使用字面赋值方式创建对象

var obj=\{  
name:“郑华瑞”,  
grade:“S2”,  
show:function()\{  
alert(obj.name+"-"+obj.grade);  
\}  
\}

C、使用构造函数创建对象

function Student(name,grade)\{  
this.name=name;  
this.grade=grade;  
this.show=function()\{  
alert(obj.name+"-"+obj.grade);  
\}  
\}  
var stu=new Student(“瑞瑞”,“S2”);

D、创建原型对象

function Student()\{\}  
Student.prototype.name=“瑞瑞”;  
Student.prototype.grade=“S2”;  
Student.prototype.show=function()\{  
alert(obj.name+"-"+obj.grade);  
\}  
var stu=new Student();

24、说明constructior和instanceof是什么？且比对其区别

constructior是检测所引用的类型是什么类型 ，instanceof是判断一个对象属于什么类型。

例如：function Student()\{\}  
var stu=new Student();  
alert(stu.constructor===Object); //false  
alert(stu instanceof Object); //true  
因为所有的类继承Object类，student也不例外，所以它属于Object，但它的引用并不指向Object

25、借用构造函数实现继承的两个方法

apply(this，参数数组）；  
call（this，参数1，参数2）；

26、组合继承的优点？  
仅使用原型链继承：重写子类原型 等于 父类的一个实例 （父类实例属性就会变成子类的原型属性）  
缺点：1、如果父类包含引用类型的属性，子类所有实例会共享属性  
2、它也不能向父类构造函数传参。  
仅使用借用构造函数继承：父类在子类构造函数中调用apply()和call（）方法  
缺点：1、子类每次创建实例，都会调用父类构造函数，并会创建自己在父类构造中方法，那么每个实例都会有自己的方法，这样占用内存大，尤其是方法多的时候。  
2、方法都作为自己的方法，如果需求改变，所有的实例不能及时更新方法，只有之后的实例才能调用新的方法。  
祝贺继承使用原型链实现对原型属性和方法的继承，而通过借用构造函数时间对实例属性的继承。  
这样，既通过在原型上定义方法实现了对方法的复用，又能保证每个实例都有它自己的属性。