学习javascript第二天:
由于平时单位上的人情世故比较重,第二天的学习有点拖后了,以后要改掉这个习惯,哪怕在忙也要挤出时间学习 ,哪怕是两个小时,也是一小步,这一点必须改,下面我们就直接进入主题
一.传参函数的案例
这个案例是通过元素内属性中函数传过来的一个实参 到函数体中进行处理的一个动作 其实传的参数就是一个占位符(变量) 通过实参传到形参中进行处理后再传到实参中 在以后的函数使用过程中也会经常用到这类的函数 其形式是这样的 在元素中还是 函数名(实参名) 在函数体中是 function 函数名(形参){函数体}这样的形式 这个是在要修改的属性不固定的时候用 当然以后为了方便我们也不用给函数取名字 这种函数叫做匿名函数 样式为 变量名或事件名 = function (形参){函数体}
代码示例:
function 名字()
{
...
}
oBtn.onclick=名字
oBtn.onclick=function ()
{
....
};
二.操作属性的第二种方式
为什么说是第二种方式呢,前面我们学习的操作属性的样式大部分是在body中使用javascript的一些代码 在内部运用事件 但是在以后工作的时候我们大部分制作出来的案例是 样式框架(html)/样式(css)/事件(js)分离的 这里我们学习了js和html,css分离 怎么分离呢 首先我们要明白一个基础性的问题 在元素内的事件起始页是一个属性 既然是属性我们就可以将其调用并改变内部的值 这就体现了js的灵活性 当然这个找对象的方式也有两种 第一种就是通过元素的id名来找 第二种可以通过元素名来找 通过id来找我们前面已经学习过 通过元素名找 就是首先通过document.getElementsByTagName('元素名'); 这个所匹配的是一个数组 所以需要访问其中的某一个可以通过数组的下标来访问 下标是从0开始一个一个递增的 在这里我们同时也学习到了调用数组长度的内部函数 代表数组的变量名 .length 通过这个函数也为我们以后学习条件和循环语句打下扎实基础.
三.字符串和变量的区别
在我们使用js 的过程中 经常忘记加单引号或者多加了单引号 这样就会导致我们的程序不能应用我们前面说了js 是一个很小气的语言 他区分字母的大小写 多一个符号或者少一个符号就会导致程序不能运行 所以这就要求我们要细心的编写 说到字符串下面就要扯到两个概念了
字面量(也叫常亮) : 看到是什么就是什么 就像数字123 字符串'abc'
变量 var a=? 这里要注意变量的作用域 有全局变量和局部变量 是通过作用域来区分的
四.style与className
首先我们要清楚两个基本概念:
通过style改变的样式:元素.style.属性=属性值是修改行间样式
之后通过classname修改的不会有效果 所以以后要修改一个属性值 就通过一种方法修改 要用style就用style修改 要用className修改就用className修改
因为优先级的关系行间样式将覆盖其他样式 行间样式>id>class>元素>*
五.提取事件
这个也是跟我们的属性一样提取 但需要注意的是 由于他不是样式 所以在找它的时候不用style了 直接 变量名.onclick=函数名 就行了 还有需要注意的是 你要是将几者进行分离了之后你的js肯定是放在head中 或者外联样式表中 不管怎样你要添加一个 事件函数 就是我们的window.onload=function (){}将你需要写的代码括起来 这个的目的是在页面加载后在加载我们的脚本语言
六.获取一组元素
通过元素获得对象组 getElementsByTagName('属性名')
数组的使用 var Tname=document.getElementsByTagName('属性名') Tname[下标]
七.循环语句
在前面我们学习了if语句 其实if语句就是一个判断语句 如果条件成立执行下例语句块
我们这里学习的循环也是一样的 假如这个条件一直成立就一直执行 直到不成立为止 这就要注意避免死循环的发生 循环语句最精妙的就是自增自减的使用才使得我们的循环语句得以使用
自增 i++ 自减 i-- 一般的循环语句的主要条件都至少有三个 分别是 值得初始化 条件 自增减 这三个组成一个美妙的循环语句
首先我们来认识while循环语句 赋初值 while(条件){实现效果 自增减}
代码示例:
if(条件)
{
语句
}
while(条件)
{
语句
}
while(饿)
{
吃
}
然后来认识for循环语句 for循环语句是使用最广泛的 它是将这三个重要的元素都放在括号内 就像for(赋初值;条件;自增减){语句块;}
最后我们学习了一个案例 就是全选 多选 反选按纽的实现 这个就要综合以上所学知识来实现
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选反选全选案例 </title>
<script>
/*
这个案例很有意思的,其实也就是点击按纽改变样式而已 只是在这个按纽点击之后是批量 或者部分该样式的
这里有几点很重要的知识 ,他们分别是:1，就是for循环了 你要达到某些目的你说用了for循环会是你的效率变得更高
for循环主要注意他的格式 括号中的条件适宜分号分开的 第一个我们通常放的是 初始值 第二个我们放的是 条件值 最后一个放的是自增或者自减
代码示例:
for循环
for(初始化;条件;自增)
{
语句
}
true/false 布尔值
内部可以多层嵌套来到达某种效果
还有就是 我们样式,框架 ,事件分开 一定要知道在吗拿到内部的事件 其实事件跟我们平常的属性是一样的 知识在拿事件的时候 我们前面不用再跟style了 这个可以通过id拿属性名拿都可以
还有就是我们在使用js的函数的过程重函数名可以省略 这种函数叫做匿名函数 使用匿名函数的时候一定要注意的是 使用之后要紧跟函数
还有一个我们通过document.getElementsByTagName('')找标签对象的时候 一定要知道他区的是一组数组 数组就包含很多的每一个都哟与独立的下标 下表是从开始的 是一个集合就一定有数量 要获取内部的数量 就有相应的函数
将这个数组的个数 也就是我们通常说的个数进行调用出来 然后进行处理 这也使得我们的for循环语句更有意义了 这个内部的函数是:数组名.length 通常我们将这个长度赋值给一个变量来进行处理
还有我在做这个案例的时候碰到了一个小麻烦就是 以前用的if语句中的条件一定不要使用但等号 因为单等号是进行赋值用的 而双等号才是进行比较用的 还有就是 true和false这两个布尔值的运用也比较的广泛 以后会经常用到 一定要改掉这个习惯 习惯我们的计算机语言
还是这些东西尽量用window.onload包起来这样可用性才会更好
*/
window.onload = function(){
var qx=document.getElementById('qx');
var bx=document.getElementById('bx');
var fx=document.getElementById('fx');
qx.onclick = function(){
var leng = document.getElementsByTagName('input').length;
var inp = document.getElementsByTagName('input');
for(i=0;i<=leng;i++){
inp[i].checked='checked';
}
}
bx.onclick = function(){
var leng = document.getElementsByTagName('input').length;
var inp = document.getElementsByTagName('input');
for(i=0;i<=leng;i++){
inp[i].checked=false;
}
}
fx.onclick = function(){
var leng = document.getElementsByTagName('input').length;
var inp = document.getElementsByTagName('input');
for(i=0;i<=leng;i++){
if(inp[i].checked == false){
inp[i].checked = true;
}else{
inp[i].checked = false;
}
}
}
}
</script>
</head>
<body>
<button id="qx">全选</button>
<button id="bx">不选</button>
<button id="fx">反选</button><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
<input type="checkbox"><br/>
</body>
</html>