前端-JavaScript、JQuery;简单笔记

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a592381841/article/details/85057906

 

标题:JavaScript

建议:

A:在一个html中,如果没有通过js文件导入javascript,建议将javascript的内容放置在</body>后面

B:由于浏览器的兼容性问题

                            1创建兼容性jshtml

                            2分别设计符合特定浏览器的页面!

                            通过判断浏览器类型决定访问什么文件。

 

0、总纲

1、Java基本语法

 

1-1:变量

注意:关键字 变量名,数字,函数名,或其他标识符中间的空格,制表符会被忽略,除非空格是字符串或者其他变量的一部分

定义:语法 var str=”abs”;(原始类型)

var s=new Date();(复合类型)

作用域:全局变量与局部变量同名的时候,局部变量生效;

1-1-1:类型

typeof()查看当前变量的数据类型

Stirnglength只关注字符个数,不关心是汉字还是字母  sstr=”三是是是Sstr.length=4

 

1-1-2:js直接量

直接量是指:程序里直接显示出来的数值,可充当变量

(number Boolean 字符串)

1-1-3运算符

1-1-3-1:String的算术运算符

字符串相加:连接字符串;

字符串其他算数运算:若字符串是数字则进行算数运算,若字符串。。是非数字则返回Nan;

(字符串会被尝试转化为数字(+法除外))

1-1-3-2:Boolean相关运算符

true为1;falas为0

1-1-3-3:比较运算符

==  var a=”5”  a==5是true

===  var a=”5”  a===5使false     ===当值和类型都相等时,为true 

注:document.write(“....”);

   Document.write(”   ’sdf  ”);

1-1-3-4:优先级

算术运算符

逻辑运算符

关系运算符

赋值运算符

字符串运算符

1-1-4:表达式

直接量,变量,运算符与其他表达式的组合

 

 

2、对象

js对象(JavaScript 本地对象和内置对象 )

Browser 对象(BOM)

HTML DOM 对象

创建对象可通过new 构造函数名来创建

对象中有属性函数

 

2-1:js对象有自定义对象和js提供的对象

(本笔记写出常用的方法和属性!具体请查看手册)

js提供的对象(number,boolean,array,String,date,math,regexp)

js全局对象来提供全局属性和函数

2-1-1:Array

2-1-1-1:方法

创建数组的方法:

var mycars=
new Array()
        mycars[0]="Saab"
        mycars[1]="Volvo"
        mycars[2]="BMW"
var mycars=new Array(3)

        mycars[0]="Saab"
        mycars[1]="Volvo"
        mycars[2]="BMW"
      var mycars=
new Array("Saab","Volvo","BMW")

 

2-1-1-2:多维数组(例子为一个二维数组)
Var s=new Array(
		New Array();New Array();		)

Concat()连接数组
join()根据指定字符分割数组
push()向数组中加入一个或多个元素,返回新的长度
        若push(数组名)则把整个数组当作一个字符串加进去
Pop()删除最后一个元素,并返回最后一个元素
reverse()颠倒数组的顺序
 

 

2-1-1-3:属性

length

 

2-1-2:String

2-1-2-1:方法

bold()  粗体

Fontcolor()  设置颜色

Fontsize()   设置大小

Link(url)    将字符串显示为链接。

Sub()      将字符串显示为下标

Sup()      将字符串显示为上标

Concat()    连接字符串

charAt(s)取下标为s的字符(若字符不存在·则返回空字符串)    

split()    把字符串分割成字符串数组

indexOf()   返回该字符在字符串中的位置

replace()   替换字符串

subString()   取字符串中两个索引值之间的字符

subStr()   从起始索引号取出字符串中的指定数目的字符

2-1-2-2:属性

Length

2-1-3:Date

2-1-3-1:方法

构造方法:var s=new Date();

tolocaleString() 把date转换为本地习惯格式化的字符串

getFullyear()返回当前年

getmonth()当前月

getday()返回一周中的该天星期(0-6)0为周日

getdate()返回该月的哪一天(1-31)

gethours()当前小时

getminutes()当前分钟

getseconds()当前秒

gettime()当前时间距离1970/01/01/00:00:00的毫秒数(作用使用毫秒数处理缓存处理)

2-1-4:math

2-1-4-1:方法

ceils()上舍入   10.4   11

floor()下舍入   10.4   10

round()四舍五入  10.4  1

random()得到0-1之间的随机数

pow(x,y)  x的y次方

各种数学运算函数。。。。。

2-1-4-2:属性

PI    //圆周率

2-1-5:全局对象

全局方法

使用方法:方法名()

Eval(str)   执行js代码  str是字符串

encideURI() 对字符进行编码

encideURIcomponent()对字符进行编码

decideURI()对字符进行解码

decideURIComponent()对字符进行解码

Escape()    对字符串进行编码。之后可通过unescape()进行解码

isNaN 检查是否是数字如果是,返回false 如果不是,返回true

parseInt()字符串转换为整数

parsefloat()字符串转换为浮点型

 

2-2:自定义对象

构造器函数(函数名首字母大写,且方法体中可用this)

可通过对象名.prototype.属性名=属性值  来扩展属性

2-3:Browser 对象(BOM)

使用方法都是 对象名.方法名

2-3-1:Navigator(浏览器信息)

2-3-2:Screen(客户端显示屏幕信息)

2-3-3:location(请求url地址信息)

   属性

Href   是个可读可写的属性

       Location.href.可获取请求到的地址

       可以设置url地址

2-3-4:history(请求url地址的历史记录)

 方法

back()  访问到上一个页面

forward()访问到下一个页面

go(number/url) 访问到指定页面

2-3-5:window(窗口对象,顶层对象)

所有的bom对象都是在window之下的

方法

Alert()显示带有一段消息和一个确认按钮的警告框。

Confirm(“message”)  显示带有一段消息以及确认按钮和取消按钮的对话框。

Prompt(“提示语”,”默认值”)  显示可提示用户输入的对话框。

Open(url,name,featrues,replace)

       打开新的浏览器窗口

                   url 新窗口的地址

                   name 一般为空

                   featrue 声明新窗口特征(例如“width=200px,height=100px”)

Close()   关闭窗口(兼容性差)

 

 

2-3-6:做定时器

setinterval(“函数或代码串”,毫秒数)按指定周期调用表达式或函数

settimeout(“函数或代码串”,毫秒数)指定毫秒数后调用表达式或函数

两者均返回一个id值

clearinterval(s)

cleartimeout(s)

以上两个函数清除定时器  s为定时器设置时返回的id值

(通过setinterval+更换图片!可实现图片轮放

                            可使用图片缓冲技术

                                     A new一个image对象

                                     B image中的src赋值

                                     Csrc赋给img标签中的src属性

 

 

2-4:HTML DOM 对象

Document object model

可用dom提供的对象里面的方法和属性对标记型语言进行操作

使用

A:把所有的html里的标签属性和文本内容都封装起来

B:要对标记型语言进行操作前,必须先通过画图分析

  分析

       根据html的层次结构,在内存里开辟出一个树形的结构

Document是整个文档(window下的属性)

element可能是标签对象,属性对象,文本对象

(node节点对象:该对象是这些对象的父对象,若在对象中找不到的方法则到node里寻找)

2-4-1:document对象

writes()

getelementbyid()

getelementbytagname()  返回集合

getelementbyname()    返回集合

2-4-2:element

方法

操作树

获取节点

getelementbyid()

getelementbytagname() 

getelementbyname()

插入节点

insertBefore(new,old)new为新插入节点,old是指将新节点插在old节点的前面

appendchild()//有点类似剪切的,添加后,该子节点原来位置已经没有子节点。

删除节点

removeChild   ///通过父节点调用

替换节点   

replaceChild///通过父节点调用

新建节点

Createlement() 新建节点

createTextNode创建文本字符串

通过appendChild将文本字符串放在节点下面

复制节点

Clonenode(boolean) true为复制 false反之

将要进行复制的节点标签.Clonenode(true);

获取父节点.appendchild(已经被复制的节点)

2-4-3:js操作cookies

cookies是通过http传递的因此cookie不能包含分号等特殊符号,对cookies的属性赋值时需要进行编码esxcape(),读取时用unescape()解码

document的属性cookies

属性

name

name(必须的)name是可以自定义的

例如

Document.cookies=”username=tom”;  表示创建一个名字为username值为tom的cookies

多个的时候可以

Document.cookies=escape(“username=tom;city=sdfs;zio=sdfsf”);

创建三个coolkies

 

Expries

定义cookies过期的时间

一般使用格林尼治时间的文本字符串

expries=“new Date()”;

 

 

 

 

path

定义作用范围

path=“地址”

path=/   //表示所有网页都可以访问

domain

实现服务器共享

domain==服务器地址

secure  (可忽略)

使cookie只能在安全的internet上使用

secure=true/secure=false

cookies存储信息

由于cookies有个数和大小的限制

可通过

名称1=值1&名称2=值2&名称3=值3

这种组合实现多个信息存入同一个cookies

Ddocument.cookies=escape(“user=jjj&age=45&sex=male&city=mes”);

这样将使用者为jjj年龄为45,性别男,城市mes存储在同一个cookies

 

cookies读取信息

通过unescape()进行解码再读取

2-5:innerHTML属性

作用获取文本内容

向标签里面设置内容(可以是html代码)

例如

Vvar ssp=document.getelementbyid”d“

Ssp.innerHTML=”<h1>sdfsdf</h1>”

3、js函数

定义  调用

定义

Function 方法名(参数列表)

{

         方法体

         返回值//可有可无

}

匿名函数

Function(参数列表)

{

         方法体

         返回值

}

动态函数

V、ar aadd=new Function(“参数,”方法和返回值”)

模拟重载

1js函数不存在重载

2:但是可以通过agruments数组实现模拟重载

argumentsjs函数中一个特殊的对象,该对象是以数组的形式保存调用函数时传入的所有参数

例如

Function aadd()

{

         If(argument.length==2)

                   Return arguments[0]+arguments[1];

Else if(argument.length==3)

Return arguments[0]+arguments[1]+ arguments[2];

 

}

4、js语句

for

switch支持所有类型

if

while

do    whille

for(属性名 in对象组)  遍历

continue

break

5、js事件

常用

Onclick  鼠标点击

Onchange改变内容(selected同用)

Onblur得到焦点

Onfocus失去焦点

 

jQuery

js有许多优秀的脚本库,如prototype   Ext   Mootools   jquery!

学习jquery,必须熟悉html css js Dom xml ajax原理

搭载jquery环境

使用方法

<script src=”jquery的文件地址”>*******jquery代码*********</script>

 

$

这个符号是jquery的简写形式

Jquery对象(jquery包装集)

将Dom对象转化为jquery对象后,可以使用jquery类库提供的各种函数。可以把jquery理解为一个“类”,并封装大量的方法,而且可动态加载插件扩展这个类

 

Jquery对象其实是js的数组

方法

属性

jQuery:当前的jquery的版本号

length  数组对象的元素个数

contex一般情况下都是指向htmldocument对象

selector 传递进来的选择器内容。如 #yourid   .yourclass

 

猜你喜欢

转载自blog.csdn.net/a592381841/article/details/85057906