黑马程序员之javascript基础学习

最新推荐文章于 2022-07-24 10:10:33 发布

IT新手

最新推荐文章于 2022-07-24 10:10:33 发布

阅读量634

点赞数

本文链接：https://blog.csdn.net/ll596408349/article/details/20838343

版权

------- android培训、java培训、期待与您交流！ ----------

Javascript:
是Netscape公司语言，基于对象和时间驱动。
和Java不同之处：

1，所属公司不一样，java是sun公司，现在是Orcale公司；
2，js是基于对象，java是面向对象；
3，js是有浏览器解释并执行，java是有jvm解释并执行的；
4，js是弱类型的语言，java是强类型；
5，js是非严谨的，java是严谨的；
javascript运行在客户端。

javascript的基本语法：

1，变量：通过var关键字定义变量，该变量可以赋予不同类型的常量；
2，语句：if，switch，while，do while，for

使用逻辑运算符进行布尔表达式连接时，需要用短路与和短路或&& ||；

因为在js中，非0即TRUE，0为FALSE，非null为TRUE，null为FALSE；

js特有的语句：

with（）可以确定对象所使用的范围，在范围内可以直接指定对象的属性和行为，而不用对象点的形式调用，简化的对象的操作

for（变量 in 对象）：可以对对象的属性和行为进行遍历；

3，数组：var demo=[]；

对于js数组的特点：该数组的长度是可变的，相对于java中的集合；

数组中存放的数据类型可以不同；

定义格式：var arr = [1,2,3]；var arr= newArray（）；

用for遍历

4，函数

1，一般函数：function 函数名（参数）{}提高代码的服用将代码封装成函数

两个明确：1，明确功能实现后的结果；2，明确该功能在实现过程中是否有位置内容参与运算；

2，动态函数：使用Function对象；

var show = new Function（“x“，”y“，执行语句）；

可以将参数和方法体作为参数进行传递；

3，匿名函数：function（）{}

用于事件处理

var method=show（）；将函数运算后的值赋值给method

var method=show；将show指向对象的地址赋值给method

javascript需要被浏览器所解释执行，就必须将代码和html相结合。

结合方式：

1，通过script标签将js代码存入其中，并指定type属性，方便浏览器启动指定的解析引擎；
2，也可通过script标签使用src属性链接一个指定的js文件进来。

HTML：

DOM(document object model)文档对象模型

其实就是将一些标记型的文档以及文档中的内容当成对象。

这样在对象中定义其属性和行为，可以方便操作这些对象。

html,xhtml,xml：这些都是标记型文档。
DHTML:是多个技术综合体，叫做动态html

html：负责将数据进行标签的封装；

CSS：负责标签的样式；

dom负责将标签以及标签中的内容封装成对象；

javascript：负责通过程序设计方式操作这些对象；

标签之间存在层次关系：

html

head

title

base

meta

link

style

body

table

tbody

tr

td

th

div

form

a

通过这个标签层次，可以形象的看做是一个树形结构，那么我们也称标记型文档加载进内存的是一颗DOM树；
这些标签以及标签内的数据都是这棵树上的节点。

DOM对已标记型文档的解析有一个弊端就是当文档过大时，相对消耗资源。
对于大型文档可以使用SAX这种方式解析。
节点类型：（nodeType)
标签节点：类型：1
属性节点：类型：2
文本型节点：类型：3
注释节点：类型：8
document：类型9
节点关系：
父节点：parentNode
子节点：childNodes直接子节点
兄弟节点：

上一个：previousSibling

下一个：nextSibling

获取可以通过节点的层次关系完成。
也可以通过document对象完成：

getElementById:通过id属性值获取对应的节点对象，如果有多个id值相同，获取到的是第一个id对象，尽量保证id唯一性。

getElementsByName：通过标签的name属性值获取对象，返回的是一个对象数组。

<html>
<head>
<style type="text/css">
table{

border: blue 1px solid;

width:60%;

}
table td,table th{

border: blue 1px solid;

}
table th{

background-color:red;

}
.one{

background-color:#00FF00;

}
.two{
background-color:#009900;
}
.over{

background-color:blue;

}
</style>
<script type="text/javascript">
var name = null;
function trcolor(){

var mails = document.getElementsByName("mail");

for( var i=0;i<mails.length;i++){

var tr = mails[i].parentNode.parentNode;

if(i%2==1){

tr.className = "two";

}

else{

tr.className ="one";

}

tr.onmouseover = function(){

name = this.className;

this.className = "over";

}

tr.onmouseout = function(){

this.className = name;

}

}

}
function selectAll(node){

//alert(node.checked);

var mails = document.getElementsByName("mail");

for(var i=0;i<mails.length;i++){

mails[i].checked = node.checked;

}

}
function selectAction(index){

var mails = document.getElementsByName("mail");

for(var i=0;i<mails.length;i++){

if( index > 1 ){

mails[i].checked = !mails[i].checked;

}

else{

mails[i].checked = index;s

}

}
function delMails(){

var mails = document.getElementsByName("mail");

var seltrs = new Array();

var index = 0;

for(var i=0;i<mails.length;i++){

if( mails[i].checked ){

seltrs[index++] = mails[i].parentNode.parentNode;

}

}

//alert(seltrs.length);

for( var i=0;i<seltrs.length;i++){

var tbdNode = seltrs[i].parentNode;

tbdNode.removeChild(seltrs[i]);

}

}
window.οnlοad=function(){

trcolor();

}
</script>
</head>
<body>
<table>

<tr>

<th><input type="checkbox" name="all" οnclick="selectAll(this)">全选</input></th>

<th>姓名</th>

<th>邮件列表</th>

<tr/>

<tr>

<td><input type="checkbox" name="mail"/></td>

<td>zhansan1</td>

<td>邮件名</td>

</tr>

<tr>

<td><input type="checkbox" name="mail"/></td>

<td>zhansan2</td>

<td>邮件名</td>

</tr>

<tr>

<td><input type="checkbox" name="mail"/></td>

<td>zhansan3</td>

<td>邮件名</td>

</tr>

<tr>

<td><input type="checkbox" name="mail"/></td>

<td>zhansan4</td>

<td>邮件名</td>

</tr>

<tr>

<td><input type="checkbox" name="mail"/></td>

<td>zhansan5</td>

<td>邮件名</td>

</tr>

<tr>

<td><input type="checkbox" name="mail"/></td>

<td>zhansan6</td>

<td>邮件名</td>

</tr>

<tr>

<td><input type="checkbox" name="mail"/></td>

<td>zhansan7</td>

<td>邮件名</td>

</tr>

<tr>

<td><input type="checkbox" name="mail"/></td>

<td>zhansan8</td>

<td>邮件名</td>

</tr>

<tr>

<td><input type="checkbox" name="mail"/></td>

<td>zhansan9</td>

<td>邮件名</td>

</tr>

<tr>

<th><input type="checkbox" name="all" οnclick="selectAll(this)" >全选</input></th>

<th colspan="2">

<input type="button" value="全选" οnclick="selectAction(1)" />

<input type="button" value="反选" οnclick="selectAction(2)" />

<input type="button" value="取消全选" οnclick="selectAction(0)" />

<input type="button" value="删除选中邮件" οnclick="delMails()" />

</th>

<tr/>

------- android培训、java培训、期待与您交流！ ----------

IT新手

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
黑马程序员之javascript基础学习

ASP.Net+Android+IOS开发.Net培训、期待与您交流！Javascript:是Netscape公司语言，基于对象和时间驱动。和Java不同之处：1，所属公司不一样，java是sun公司，现在是Orcale公司；2，js是基于对象，java是面向对象；3，js是有浏览器解释并执行，java是有jvm解释并执行的；4，js是弱类型的语言，java是强类型
复制链接

扫一扫