jsday07补充二(checkbox 全选 dom中首字母大小写转化 dom实例思路 )

最新推荐文章于 2022-06-09 19:07:40 发布

wenchi2018

最新推荐文章于 2022-06-09 19:07:40 发布

阅读量307

点赞数

分类专栏： js

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
//1、获取被选中的checkbox 通过checked属性的状态
//2、获取被选中的checkbox 的value的金额
//3、求和
//4、定义span区域存取总金额
function getSum()
{
    var items = byName("item");
    //alert(items.length);
    var sum =0;
    for( var x =0;x<items.length;x++)
    {
        if(items[x].checked)
            sum+=parseInt(items[x].value);  
    }   
    var spanNode = byId("sum");
    var str = sum+"元";
    spanNode.innerHTML=str.fontsize(7);//方法传入一个参数
}
function checkAll(index)
{
    var allNode = byName("all")[index];
    var items = byName("item"); 
    for( var x =0;x<items.length;x++)
    {
        items[x].checked=allNode.checked;

    }       
}
</script>

</head>

<body>
<input  type="checkbox" name="all" value="全选" onclick="checkAll(0)"/>全选<br/>
<input type="checkbox" name="item" value="100" />电脑100<br/>
<input type="checkbox" name="item" value="100"  />电脑100<br/>
<input type="checkbox" name="item" value="100" />电脑100<br/>
<input type="checkbox" name="item" value="100" />电脑100<br/>
<input type="checkbox" name="item" value="100"/>电脑100<br/>
<input  type="checkbox" name="all" value="全选" onclick="checkAll(1)"/>全选<br/>
<input type="button" value="总金额" onclick="getSum()"/>

<span id="sum">
</span>
</body>

doctool

// JavaScript Document
var doc = document;
function byId(id)
{
    return doc.getElementById(id);
}
function byTag(tag)
{
    return doc.getElementsByTagName(tag);
}
function byName(name)
{
    return doc.getElementsByName(name);
}

大小写转换

<style type="text/css">
#cssid{
    height:40px;
    width:400px;
    background-color:#0F0;
}
#textid{
    background-color:#F00;
    width:300px;
}
</style>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function change()
{
    var selNode = byId("selid");
    var value = selNode.options[selNode.selectedIndex].value;
    //alert(value);
    var divNode1 = byId("cssid");
    var divNode2 = byId("textid");
    divNode1.style.textTransform=value;
    divNode2.innerText="text  : "+value+";";
}
</script>
</head>

<body>
<div id="cssid">
    good good day ,hehe haha up!

</div>
<select id ="selid" onchange="change()">
    <option value="none">--text-transform--</option>
    <option value="capitalize">首字母大写</option>
    <option value="uppercase">所有字母大写</option>
    <option value="lowercase">所有字母小写</option>
 </select>
 <p></p>
 <div id="textid">
    text:none;
 </div>
</body>

<!--
DOM编程
1、定义界面 
    通过html的标签将数据进行封装
2、定义一些静态的样式
    通过css
3、需要动态的完成和用户的交互
    a 先明确事件源
    b 明确事件 将事件注册到事件源上
    c 通过js的函数对事件进行处理
    d 在处理过程中需要明确被处理的区域
table 标签的实例
1、在页面通过按钮创建一个表格
思路
    1、创建一个table节点 document.createElement("table");
    2、通过table节点的insertRow()方法创建表格的行对象 并添加到rows集合中
    3、通过行对象的insertCell()方法创建单元格对象 并添加到 cells集合中
    4、给单元格中添加数据
        a、创建一个节点如文本节点 document.createTextNode("文本内容"),通过单元格对象appendChild方法将文本节点添加到单元格的尾部。
        b、可以通过单元格的innerHTML 添加单元格中的元素   tdNode.innerHTML ="<img src='1.jpg' alt='图片说明信息'/>";
    5、建立表格节点 添加到DOM树中 也就是页面的指定位置上.
2、如何删除表格中的行或者列
思路
    1、获取表格对象 通过表格对象中的deleteRow方法将指定的行索引传入deleteRow方法中
    2、删除列 表格没有直接删除列的方法要通过删除每一行中指定的单元格来完成删除列的动作
        获取所有的行对象 并进行遍历 通过行对象的deleteCell方法将指定单元格删除

3、对表格中的数据进行排序
思路
    1、获取表格中的所有行对象
    2、定义临时存储将需要进行排序的行对象存入到数组中
    3、对数组进行排序 通过比较每一个行对象中指定单元格中的数据 如果是整数 需要通过parseInt转换 否则是字符串的字典顺序
    4、将排序后的数组通过遍历将每一个行对象 重新添加回表格即可 通过tbody节点的appendChild方法
    5、其实排序就是将每一个行对象的引用取出
4、表格的行颜色间隔显示 并在鼠标指定的行上高亮显示
思路
    1、获取所有的行对象 将需要间隔颜色显示的行对象进行动态的className属性的指定 那么前提是 先定义好类选择器 
    2、为了完成高粱 需要用到两个事件 onmouseover(鼠标进入) onmouseout(鼠标移出)
    3、为了方便可以在遍历行对象时 将每一个行对象都进行两个事件属性的指定 并通过匿名函数完成该事件的处理
    4、高亮的原理就是将鼠标进入时的指定颜色改变 改变前先记录原来行 行对象的样式
        这样在鼠标离开时 可以将原样式还原
    5、该样式需要在页面加载完成后直接显示 所以使用的是window.onload 事件完成
5、完成一个与css手册中一样的实例
    通过下拉菜单的选择显示指定样式属性的使用效果

<style type="text/css">
#div1{
    background-color:#F96;
    height:200px;
    width:400px;
}
#div2{
    background-color:#3C6;
    width:400px;
}
</style>

<script type="text/javascript">
<!--因为是全局的所以要进行函数的封装 不然会报空 因为 head 优先执行-->
var selNode = document.getElementById("selid");
alert(selNode);
</script>
</head>

<body>
<!--
DOM编程
1、定义界面 
    通过html的标签将数据进行封装
2、定义一些静态的样式
    通过css
3、需要动态的完成和用户的交互
    a 先明确事件源
    b 明确事件 将事件注册到事件源上
    c 通过js的函数对事件进行处理
    d 在处理过程中需要明确被处理的区域
-->
<div id="div1"  style="text-transform:capitalize"><!--因为有这个样式所以才能通过传相应的值进行改变-->
Good ddd aa ee,sss r!
</div>
<select id="selid" onchange="seldemo()">
    <option value="none">--none--</option>
    <option value="uppercase">大写</option>
    <option value="lowercase">小写</option>
</select>
<p></p>
<div id="div2">
text-transform : none;
</div>

</body>