【期末复习】js+dom+jq

最新推荐文章于 2023-06-06 18:28:30 发布

curiostyhclzm

最新推荐文章于 2023-06-06 18:28:30 发布

阅读量237

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/m0_50994219/article/details/117555426

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、JavaScript

基本语法

在<script> HTML元素中放置JavaScript代码
正确位置是在<body>和<head>部分均可

数据的定义

var x = 30;
var a,b;
alter(typeof x); //输出 x的类型 ---- “number”
x = "hello";
alter(typeof x); //输出 x的类型 ---- “string”

函数

预定义函数

parseInt(string,[index]);//解析字符串，从中返回一个整数
pareseFloat();//解析字符串，返回浮点数
isNaN(val);//返回是否是数字 , val 是参数
eval(string);//将字符串作为脚本代码执行

对话框函数

alter();//显示一个提醒对话框，包含一个OK按钮
confirm();//显示一个确认对话框，包含一个OK按钮和1个Cancel
prompt();//显示一个输入对话框，提示用户输入

自定义函数

命名函数

function f(x){ //x是参数
	//code here
}

匿名函数

function(x){ //x是参数
	//code here
}
//样例
var f = function(user){
	alter(user);
}
f("x");
var test = f;
test("x");
//以上调用完全一致

对象函数的定义

var f = new Function([,,,,,],code);

自调用函数

var u = "x";
(function(x){
	alter(x);
})(u);

运算符

可以参考c和java，包括注释的方式单行：// 多行：/*......*/

with语句

with(document){
	write("<table border = '1'>");
	write("<tr>");
	write("</tr>");
	//。。。。。。。。。
}

JavaScript对象

Array

定义

new Array();new Array(size);new Array(1,2,3,4,5[.....]);

属性

constructor :返回对创建对象的构造函数的应用
length: 返回数组的长度
prototype: 为对象添加属性和方法

数组对象的常用方法

是用方法：数组名.方法名

concat()//用于连接两个或者多个数组
join()//用于吧数组中的所有元素放入一个字符串，并用指定的分隔符隔开
push()//在数组的末尾添加一个或多个元素
pop()//删除并返回最后一个元素
shift()//删除并返回第一个元素
reverse()//在原有的基础上，颠倒数组
slice()//返回指定的元素
sort()//排序
splice()//添加或者删除一个元素，返回被删除元素
unshift()//在开头添加一个或者多个，返回新的数组长度

String字符串对象

定义

' 和 "均可生成字符串

var x = "aadsad";var y = 'dasdsdas';

new 方式

var x = new String("adsasda");//类型为String对象
var y = String("asdsadsad"); //类型为string类型

string和String的区别：

String 是string的包装类
string是一种基本的数据类型，没有提供substring()等方法
string没有提供prototype原型对象，而String对象有。
使用typeof()函数查看类型时，string返回string，String对象返回Object，String返回function
使用== 比较时，string判断值是否相等，而String对象则判断是否同一对象进行引用
生命周期不同，new创建的对象一直存在，而string类型自动生成的会在代码执行后自动销毁

Date日期对象

定义

new Date();
new Date(num); //num是1970年1月1日凌晨到目标时间的毫秒数
new Date(y,m,d);
new Date(y,m,d,h,m,s);
new Date(m/d/y h:m:s);
new Date(m d,y);new 
Date(m d,y h:m:s);

Math数学对象

同java

自定义对象（JSON方式）

方式：原始方式，构造函数方式，原型方式，混合方式，JSON方式

直接上样例：

var goods = {	name: "男士衬衣",	type:"男装",	price:200,	color:"白色",	showInfo:function(){		alert(this.name+this.type+this.price+this.color);	},	showcolor:function(){		alert(this.color);	}}//方法调用goods.showInfo();goods.showcolor();

二、BOM与DOM

window 对象

在JavaScript中，window对象是全局对象，所有表达式都在当前的环境中进行计算，在使用窗口属性和方法时，允许以全局变量或系统函数的方式来使用，例如window.document可以简写成为document的形式

window对象的常用方法

open(url,name,features,replace)/*打开一个新的窗口,均为可选参数，replace为true创建新的历史记录，否则替换旧的历史记录*/
close()//关闭当前界面
setTimeout(code,time)/*计时器，在指定时间间隔后调用函数或计算表达式，仅运行一次*/
clearTimeout(id_of_timeout)//清空指定计时器的计时
setInterval(code,time)/*都是必须参数没经过time的时间，调用一次表达式，time（以毫秒计时）*/
focus()//给予焦点
blur()//失群焦点

location对象

location对象是window对象的子对象，用于提供当前窗口或者指定框架的URL地址。

示例：改变页面url 的方法：

location.href = "http://www.baidu.com";location = "http://www.baidu.com";

location对象的方法

assign(url)：加载一个新的文档
reload(force)：重新加载当前文档。参数缺省时默认为false，false时候，从缓存区中装载文档，true时，从服务器端口重新加载文档
replace(url)：使用一个新的文档取代当前文档，且不会再history对象中生成新的记录

history对象

history对象用于保存用户在浏览网页时候访问URL的地址，history对象中的length属性表示访问历史记录的数量，JavaScript不允许通过history对象获取已经访问过的URL。

history对象的方法

history.go(-1);//后退
history.back();//后退
history.go(1);//前进
history.forward();//前进

navigator对象

navigator对象包含浏览器相关信息包括浏览器名称版本号等

document对象

整体上分为两个大类：

对文档流的操作
对文档元素的操作

write()和writeln()方法

基本相同，区别是writeln()会在每次输出后额外加一个换行符

getElementById()方法

返回指定的ID元素。在当前界面有多个ID相同的元素时候，只返回第一个符合条件的元素

getElementsByName()方法

用于返回指定name属性的元素的集合。

getElementsByTagName()

返回指定标签名元素的集合，当参数为*时候返回所有的标签元素

getElementsByClassName()

返回指定class属性的元素集合

querySelector()

返回指定的CSS选择器的元素

querySelectorAll

返回集合

Form对象

是document对象的子对象，通过form对象可以实现表单验证等效果。

语法：

document.表单名称.属性
document.表单名称.方法(参数)
document.forms[索引].属性
document.forms[索引].方法(参数)

方法名：

submit() 表单数据提交到web服务器
reset() 对表单的元素进行重置

Table对象

DOM节点

三、JQuery

引入JQuery库

<script type="text/javascript" src="js/jquery.1.x.js"></script>

在引入Jquery库之后，通过$()函数获取界面中的元素即$("mydiv") 等价于jQuery("mydiv")

一、DOM对象和jQuery对象

示例，将DOM对象装成jQuery对象然后调用jquery对象的方法

var domObject = document.getElementById("mydiv");
var jqueryObject = $(domObject);

二、jQuery选择器

四大类选择器：

基本选择器
层次选择器
过滤选择器
表单选择器

1.基本选择器

基本选择器最常用的选择器 ，通过元素的id,className或者tagName来查找页面中的元素

ID是元素的唯一标识，不能重复，所以ID选择器返回单个jQuery对象；而calss属性用于设定元素的样式，允许多个元素使用同一样式，所以calss选择器返回一个jQuery对象类型的数组。

$("#id_div").css("color","blue");//根据ID属性进行匹配 返回单个jQuery对象
$(".classDiv").css("background-color","#000000");//根据class属性进行匹配 返回对象数组
$("span").css("font_size","20px");//根据元素标签名属性进行匹配 返回对象数组
$("*").css();//当前界面所有元素
$("#id_div,.classDiv").css();//多种匹配，","隔开

2层次选择器

通过各国DOM对象的层次关系来获取特定的元素，如 同辈元素 ，后代元素 ，子元素 和相邻元素 等。用法与基本选择器类似，返回均为jQuery对象数组。、

后代选择器

格式：父元素指定元素 （空格隔开）

选择父元素的所有指定元素（包括第一代，第二代等等）。
```
$("父元素 指定元素")
```
子代选择器

格式：父元素 > 指定元素 （>隔开）

选择父元素的所有第一代的指定元素。
```
$("父元素 > 指定元素")
```
相邻选择器

格式：元素 + 指定元素 （+隔开）

选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则取不到，相互之间必须是挨着的）。
```
$("元素 + 指定元素")
```
同辈选择器 ，

格式：元素 ~ 指定元素 （~隔开）

选择元素下面的所有指定元素。
```
$("父元素 ~ 指定元素")
```

3过滤选择器

可以满足大部分页面元素的选取需求

简单过滤选择器

$(table tr:first)//first样例 选取第一个元素
:last//选取最后一个元素
:even //索引值为偶数的元素，从0开始计数
:odd //索引值为奇数的元素，从0开始计数
:foucs//选取获取焦点的元素
:root//获取文档的根元素
:animated//选取正在执行动画效果的元素
:eq(索引值)//选取索引等于index的元素
:gt(索引值)//选取索引大于index的元素
:lt(索引值)//选取索引小于index的元素
:not(selector)//选取selector以外的元素

内容过滤选择器

:contains(text)//选取包含te xt内容的元素
:has(selector)//选取含有selector所匹配的元素
:empty//选取不包含文本或者子元素的空元素
:parent//选取含有子元素或文本的元素

可见性过滤选择器

:hidden//选取所有不可见元素 或者type为hidden的元素
:visible//选取所有可见的元素

属性过滤选择器

以"[" 开始以"]" 结束

[属性名]//选取包含指定属性的元素
[属性名 = 属性值]//选取属性等于某个特定值的元素
[属性名 != 属性值]//选取属性不等于某个特定值的元素
[属性名 ^= 属性值]//属性以某个值开始的元素
[属性名 $= 属性值]//属性以某个值结尾的元素
[属性名 *= 属性值]//包含
[attribute1][ attribute2][ attribute3]//复合属性

子元素过滤选择器

见书p421

表单对象属性过滤选择器

:enabled//属性为可用的元素
:disabled//不可用的元素
:checked//被选中的元素（单选按钮，复选框）
:selectd//被选中的元素（下列列表）

4表单选择器

表单选择器可能够让用户更加方便的处理表单数据，通过表单选择器可以快速定位到某类表单的对象。

详见书上p424。

jQuery基本操作

以下操作只能在jQuery中操作

一、属性操作

attr()和prop()

区别：

如果是固有属性，attr()和prop()方法均可获取
如果是自定义属性，只有attr()可以获取
如果返回的是Boolean类型的属性：

若设置了属性，attr()返回具体的值，prop()返回true

若设置了属性，attr()返回undefinded，prop()返回false

$("img").attr("src") 
$("#myImg").attr("src")
$("#myImg").attr("src","xxx/xxx.png")//设置myimg的src属性
$("#myImg").attr({src:"xxx/xxx.png",title:"dsadsas"});
$("#myImg").attr("title",function(){return this.src });

获取属性

attr(属性名)

prop(属性名)

$("#checkbox").attr("checked");//checked  undefinded
$("#checkbox").prop("checked");//true false

设置属性
移除属性

removeAttr(属性名)

removeProp(属性名)

二、样式的操作

通过class属性指定的HTML标签的样式名方法为：attr("class") addClass()删除：removeClass()

方法：

除去以上

toggleClass()

$("#checkbox").toggleClass(className)
$("#checkbox").toggleClass(className,true/false)//true时样式允许切换

css()

$("#checkbox").css(属性名)
$("#checkbox").css(属性名,属性值)
$("#checkbox").css(样式)
$("#checkbox").css(属性名,function(元素索引位置,修改之前的属性值))

三、内容操作

html()

html()//获取元素内容，包含HTML标签（非表单元素）
html("内容")//设置元素内容，包含HTML标签（非表单元素）

text()

text()//获取元素纯文本内容，包含HTML标签（非表单元素）
text("内容")//设置元素纯文本内容，包含HTML标签（非表单元素）

val()

val()//获取元素的值，（表单元素）
val("内容")//设置元素的值，（表单元素）

jQuery事件

一、ready加载事件

预加载事件，当页面的dom结构加载完毕之后执行，类似于js中load事件，可以写多个

语法：

$(document).ready(function(){})
简写:
$(function(){})
$().ready(function(){})

二、jQuery绑定事件

为被选元素添加一个或多个事件处理程序，并且规定事件发生时运行的函数。

语法：

$(selector).bind(字符串的事件类型你要绑定的事件 [,  传递的参数和格式-名:值,名2:值2] , function(){})

绑定单个事件

bind()绑定

$("元素").bind("事件类型",function(){})

直接绑定
```
$("元素").事件名(function(){})
```

绑定多个事件

bind绑定

同时为多个事件绑定同一个函数

指定元素.bind("事件类型1 事件类型2 事件类型3..",function(){});

为元素绑定多个事件，并设置相应的函数

指定元素.bind("事件类型",function(){
				
}).bind("事件类型",function(){
	
};

或者

指定元素.bind({
	"事件类型":function(){},
	"事件类型":function(){}
});

直接绑定

指定元素.事件名(function(){}).事件名(function(){});

三、解除事件的绑定

jQuery中提供了unbind()和undelegate()方法，分别用于解除bind()和delegate()方法所绑定的事件

其他还有off()方法，用于解除on(),bind(),delegate()方法所绑定的事件，用法同on() 。

四、事件对象

书p450

JQuery文档处理

语法

$(htmlcode)

插入节点

//内部插入
append()//在尾部插入
appendTo()//
prepend()
prependTo()
//外部插入
after()
before()
insertAfter()
insertBefore()

复制节点

clone()

括号里面内容可选，表示是否同时复制的元素附加数据和绑定事件

$("#mydiv").clone(false)
$("#mydiv").clone(true)
$("#mydiv").clone(false,false)
$("#mydiv").clone(true,false)
$("#mydiv").clone(true,true)

删除节点

包裹节点

遍历节点

祖先遍历

parent()

返回匹配元素的直接父元素
parentd()

返回匹配元素的所有祖先元素
patentsUntil()

返回两个给定元素之间的所有祖先元素

后代遍历

children()

返回元素的直接子元素
find()

返回元素的后代元素
contents()

返回元素的后代元素

同胞遍历

siblings()

返回匹配元素的同胞元素（不包含匹配元素）、
next()

返回元素紧邻的同胞元素
nextAll()

返回所有紧随的同胞元素
nextUntil()

返回两个给定元素之间所有的同胞元素

节点过滤

filter()

返回符合筛选条件的规则的元素集合
not()

返回除规则之外的其他元素

jQuery动画效果

书p490

数组和对象操作

each()

实现对数组的遍历
extend()

通过一个或者多个对象来扩展目标对象
merge()

两个数组合并
unique()

移出重复的元素

curiostyhclzm

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录