图片 1

输入输出流,滑动和animate以及如何停止动画

html 如下:

  又是一天过去了,今天复习了slideDown、slideUp、slideToggle以及animate和stop的用法。

     这篇不是为了系统介绍Java的输入输出流机制的,仅为个人笔记

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Move and Copy Lab Page - jQuery in Action, 3rd edition</title>
      <link rel="stylesheet" href="../css/main.css"/>
      <style>
         #source-pane img
         {
            margin-bottom: 1em;
         }

         .target
         {
            border: 1px solid maroon;
            background-color: #ffffcc;
            margin-bottom: 1em;
         }

         #controls div
         {
            margin-bottom: 0.5em;
         }

         button
         {
            margin-top: 10px;
         }

         #button-restore
         {
            display: none;
         }

         .done input[type=checkbox],
         .done #button-execute
         {
            display: none;
         }

         #button-restore
         {
            display: inline;
         }
      </style>
   </head>

   <body>

      <h1 class="header">jQuery Move and Copy Lab Page</h1>

      <div id="source-pane" class="box-small">
         <h2>Sources</h2>
         <div>
            <input type="checkbox" name="sources"/><br />
            <img src="images/source1.png" alt="source 1" />
         </div>

         <div>
            <input type="checkbox" name="sources"/><br />
            <img src="images/source2.png" alt="source 2" />
         </div>

         <div>
            <input type="checkbox" name="sources"/><br />
            <img src="images/source3.png" alt="source 3" />
         </div>
      </div>

      <div class="box-small">
         <h2>Target Areas</h2>

         <div>
            <div id="target-pane">
               <div id="target1" class="target">
                  <label><input type="checkbox" name="targets"/> Target 1</label>
               </div>

               <div id="target2" class="target">
                  <label><input type="checkbox" name="targets"/> Target 2</label>
               </div>

               <div id="target3" class="target">
                  <label><input type="checkbox" name="targets"/> Target 3</label>
               </div>

               <div>
                  Operation:<br />
                  <label><input type="radio" name="operations" value="append" checked="checked"/> append</label>
                  <label><input type="radio" name="operations" value="prepend"/> prepend</label>
                  <label><input type="radio" name="operations" value="before"/> before</label>
                  <label><input type="radio" name="operations" value="after"/> after</label>
               </div>
               <div>
                  Clone?:<br />
                  <label><input type="radio" name="clone" value="no" checked="checked"/> no</label>
                  <label><input type="radio" name="clone" value="yes"/> yes</label>
               </div>
            </div>

            <div>
               <button id="button-execute">Execute</button>
               <button id="button-restore">Restore</button>
               <button id="button-toggle">Toggle</button>
            </div>
         </div>
      </div>

      <div class="footer">
         <p>
            jQuery Selectors Lab Page - jQuery in Action, 3rd edition<br/>
            Code by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa
         </p>
      </div>

      <script src="../js/jquery-3.2.1.js"></script>
      <script src="js/changeStyle.js"></script>
   </body>
</html>

  

   
 作为Java小菜,每次上网搜别人的Java读写文件的程序参考,总觉得一头雾水,为什么要声明这么多类,规则是什么,全然分からない,所以带着疑问稍微了解了一下;

 

<!DOCTYPE html>
<html>
<head>
    <title>滑动和动画</title>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript">
        // slideDown(speed,callback);用于向下滑动元素。
        // $(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideDown(2000);
        //     })
        // })
        // slideUp(speed,callback);用于向上滑动元素;
        // $(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideUp();
        //     })
        // })
        // slideToggle(speed,callback);切换元素可见状态。
        // $().ready(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideToggle(3000);
        //     })
        // })



        // animate({params},speed,callback)
        // 必需的params参数定义形成动画的CSS属性
        // 接下来我们吧div元素向右移动300px
        // 默认情况下所有的HTML元素有一个静态的位置,且是不可移动的,
        // 如果需要改变,我们需要将元素的positin属性设置为relative,fixed和
        // absolute.
        // $(function(){
        //     $('button').click(function(){
        //         $('div').animate({left:'300px'},4000);
        //     })
        // })
        // 我们可以继续使用animate()来操作多个属性
        // animate()几乎可以操作所有的css属性,必需使用camel(峰驼法)格式书写类似于paddingLeft相关的属性。
        // 同时,色彩颜色并不包含在核心JQuery库中,如果需要生成颜色动画,需
        // 要下载颜色动画插件
        // $(document).ready(function(){
        //     $('button').click(function(){
        //         $('div').animate({
        //             left:'300',
        //             opacity:'0.2',
        //             width:'100',
        //             height:'400'
        //         });
        //     });
        // });

        // animate({params},speed.callback);也可以定义相对值(该值
        // 相对于元素的当前值),需要在值的前面就加上
        // +=或-=
        // $(function(){
        //     $('button').click(function(){
        //         $('div').animate({
        //             left:'20px',
        //             width:'+=20',
        //             height:'+=20'
        //         })
        //     })
        // })

        // animate()使用预定义的值
        // 比如下面的例子高度可以设置成'show','hide','toggle'.
        // $(function(){
        //     $('button').click(function(){
        //         $('div').animate({
        //             height:'toggle'
        //         });
        //     });
        // });

        // 默认情况下,JQuery提供针对动画队列功能
        // 意味这你在彼此编写多个anmiate()调用,JQuery会
        // 创建包含这些方法调用的‘内部’队列,然后逐一运行这些animate调用

        // 例子1
        // $(document).ready(function(){
        //     $('button').click(function(){
        //         var div=$('div');
        //         div.animate({top:'400',opacity:'0.5'});
        //         div.animate({left:'400',opacity:'0.2'});
        //         div.animate({top:'40',opacity:'0.5'});
        //         div.animate({left:'40',opacity:'1'});
        //     });
        // })
        // 例子二:先把div移动,然后放大中间字体
        $().ready(function(){
            $('button').click(function(){
                $('div').animate({
                    top:'50',
                    left:'100',
                    width:'500',
                    height:'300',
                    opacity:'0.3'
                },3000);
                $('div').animate({
                    fontSize:'100'
                },5000);
            });
        })
    </script>
    <style type="text/css">
        #flip,#panel{
            padding: 5px;
            text-align:center;
            background-color: yellow;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <!-- <div id="flip">点我滑动</div>
    <div id="panel" style="display: block;height: 300px;line-height: 300px;">Hellow World!!</div> -->
    <button>开始动画</button>
    <div style="position: absolute;width: 200px;height: 200px;background-color: red;">这就是爱爱爱爱!!</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>stop()方法</title>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#flip').click(function(){
                $('#panel').animate({
                    height:'show'
                },2000);
                $('#panel').animate({
                    fontSize:'30'
                },2000);

            })
        });
        $(function(){
            $('#stop').click(function(){
                $('#panel').stop(false,false);
            })
        });
        // stop(),用于停止动画效果,在它们完成之前
        // stop()方法适用于所有JQuery效果函数,包括滑动,淡入淡出和自定义动画
        // stop(stopAll,goToEnd)
        // stopAll参数规定是否立即清除当前动画,默认是false
        // 即仅停止活动的动画,准许任何排入队列的动画向后执行
        // (改为true,则该函数所有动画暂停,不管是true还是false,第一个动画已经暂停,控制的是后面队列的函数)
        // goToEnd参数规定是否立即完成当前动画,默认false
    </script>
    <style type="text/css">
        div{
            padding: 5px;
            text-align:center;
            background-color: gray;
            border: 1px solid black;
        }
        #panel{
            padding: 50px;
        }
    </style>
</head>
<body>
    <button id="stop">停止滑动</button>
    <div id="flip">点我向下滑动面板</div>
    <div id="panel" style="display: none;">Hellow World!</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>案例</title>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript">
        // slideDown用法
        // $(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideDown('slow',function(){
        //             $('#panel').css('opacity','0.3');
        //         });                
        //     })
        // })
        // slideUp用法
        // $(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideUp('slow');
        //     })
        // })

        // slideToggle用法
        // $(function(){
        //     $('#flip').click(function(){
        //         $('#panel').slideToggle('slow');
        //     })
        // })

        // 停止动画中stop用法

        $(function(){
            $('#start').click(function(){
                $('div').animate({
                    left:'100px'
                },4000);
                $('div').animate({fontSize:'60px'},4000);
            })

            $('#stop').click(function(){
                $('div').stop();
            })
            $('#stop2').click(function(){
                $('div').stop(true);
            })
            $('#stop3').click(function(){
                $('div').stop(true,true);
            })
        })
    </script>
    <style type="text/css">
        div{
            padding: 5px;
            text-align: center;
            background-color: blue;
            border: 1px solid black;
        }
        #panel{
            padding: 50px;
        }
    </style>
</head>
<body>

    <!-- <div id="flip">点我</div>
    <div id="panel" style="display: block;">Hellow World!!</div> -->

    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="stop2">停止所有</button>
    <button id="stop3">停止动画,但完成动作</button>
    <div style="position: absolute;width: 200px;height: 100px;background-color: red;">World!</div>
</body>
</html>

   
 Java中存在两种输入输出模式的类,面向字节(InputStream&OutputStream)和面向字符(Reader&Writer),另外还有一个处理文件和文件夹的类(File);

 

 

   
 Java的输入输出流类采用装饰者模式,由以上5个类衍生出许许多多其他类,这里放一张网上搜到的图,大家感受下

修改元素的样式

图片 1

/*
样式名的值是以空格分割多个值de字符串形式出现,而不是以 COM 属性数组的形式,这给处理带来了复杂性。
HTML5 引入了一个好的解决办法,通过称为 classList (样式列表)的 API 实现。
*/


/*
原生 js 使用 classList 增加样式(兼容新的浏览器,IE 10以上,包括 IE 10。
*/
var elements = document.getElementsByClassName('box-small');

for(var i = 0; i < elements.length; i++){
    elements[i].classList.add('target');
}

/*
addClass(names)
为集合中的元素添加指定的样式名,兼容从 IE6 开始的浏览器

name(String|Function):空格分割的多个样式名字符串;如果是函数,调用函数的上下文是当前元素(this),
参数是元素索引和元素当前样式值(所有用到的样式名,用空格分割)
*/
$('img').addClass(function(index, styleValue){
    console.log(this);
    console.log(styleValue);  //元素当前样式值(所有用到的样式名,用空格分割)
    return 'target';   //返回值作为样式名
});

$('.box-small').addClass(function(index, styleValue){
    console.log(this);
    console.log(styleValue);
    return 'target';
});

/*
removeClass(names)
从 jQuery 集合中删除每个元素指定的样式;如果是函数,调用函数的上下文是当前元素(this),参数是元素索引和要删除的
样式名(可以是以空格分割的样式名),返回值是要删除的样式名

names(String|Function)
*/
$('#target-pane > div').removeClass('target');

console.log('删除 .box-small 中的样式:')
$('.box-small').removeClass(function(index, styleName){
    console.log($(this));
    console.log(styleName);
    return 'box-small target';
});

/*
toggleClass([names][, switch])
为没有样式的元素指定添加指定的样式名,或者删除已经存在的样式

names(String|Function)
switch(Boolean)
如果设置 switch 参数,当 switch 为 true 时,那么样式通常会添加样式到没有此样式的元素上,如果为false,从元素中删除该样式
如果无参调用,集合中所有样式都会删除或恢复
如果只设置 switch 参数,集合中每个元素的样式名将根据 switch 的值保留会删除
如果提供了函数,则返回值为样式名,参数接受两个值:元素索引和元素样式的值
*/
var switchValue = true;

$('#target-pane').addClass('target');
console.log('id 为 target-pane 的 div 是否包含 target 样式:' + $('#target-pane').hasClass('target'));

$('#button-toggle').click(function(){   

    $('img').toggleClass('target');
    switchValue = !switchValue;
    console.log(switchValue);
   $('#target-pane').toggleClass('target', switchValue);

    /*
    hasClass(name)
    确定集合中的元素是否包含指定的样式
    */
    console.log('id 为 target-pane 的 div 是否包含 target 样式:' + $('#target-pane').hasClass('target'));
});

/*
直接在元素上添加样式代码(DOM 元素的 style 属性),可以覆盖预定的样式(设置了 !important 的除外)
*/

/*
css(name, value):CSS 属性的名称。接受两种 CSS 和 DOM 的属性(如 background-color 与 backgroundColor),一般使用第一种
css(properties)
为每个元素的 CSS 样式设置指定的 value

name(String)
value(String|Number|Function):如果是数字,转换为字符串在末尾加上“px”;如果是函数,接受两个参数:元素索引和当前值,返回值
为 CSS的新值
*/

/*
给按钮增加 20px 宽度(如果设置长度和宽度没有指定单位,那么默认就是 px)
*/
$('#button-toggle').css('width', '+=20');

$('p').css({
    margin: '1em',
    color: '#1933FF',
    opacity: 0.8
});

$('button').css({
    margin: '1em',
    color: '#1933FF',
    opacity: function(index, currentValue){
        return 1 - ((index % 10 + 3) / 10);
    }

});

/*
css(name)
根据指定的 name 查询集合中首个元素的 CSS 属性的计算值

name(String|Array)
返回值为字符串或属性-值对
*/
var styles = $('#source-pane').css(['border', 'background-color']);
for(var property in styles){
    console.log(property + ': ' + styles[property]);
}


/*
对于经常访问的一些小的 css 集合,jQuery 提供了便捷的方法来访问它们并返回值为常见的数据类型
*/

/*
width(value)
height(value)
设置集合中每个匹配元素的宽度和高度

value(Number|String|Function):
 */

 /*
width()
height()
查询 jQuery 对象的第一个元素的宽度和高度,单位为像素
 */
var tmpWidth = $('#source-pane').width();
console.log('#source-pane 的宽度为:' + tmpWidth);


/*
offset()
返回集合中第一个元素相对于文档的坐标,该对象(非 jQuery 对象)包含 left 和 top 属性,以像素为单位 
*/
console.log($('#button-toggle').offset());

/*
offset(coordinates)
设置集合中所有元素相对于文档的当前坐标,以像素为单位 

coordinates(Object|Function):包含 left 和 top 的对象
*/
setTimeout(function(){
    $('#button-toggle').offset({
        left: 0,
        top: 0
    })
}, 1000);

/*
position()
返回匹配集合元素中第一个元素的相对于父元素的位置(像素)
 */
console.log($('#button-toggle').position());

 /*
 注:offset() 和 position 只能用在可见元素上
 */

/*
scrollLeft()
scrollLeft(value)
scrollTop()
scrollTop(value)
*/
$('#button-restore').click(function(){
    console.log('document 滚动条的水平位置为:' + $(document).scrollLeft());
    console.log('document 滚动条的垂直位置为:' + $(document).scrollTop());

    //重回文档顶部
    setTimeout(function(){
        $(document).scrollTop(0);
    }, 1000);
});

     
 Java支持很多类型的输入源和输出端,但这里不打算展开讲,我只想聊聊文件的读取和输出。众所周知,计算机访问外部设备非常耗时,而访问缓冲区则很快。因此为了提高读写文件的效率,除了程序与流节点之间必要的读写机制外,还需要增加缓冲机制。

 

 具体例子如下:

 

图片 2图片 3

设置元素内容

package com.practise.test;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStreamReader;
import java.io.BufferedReader;
import java.io.OutputStreamWriter;
import java.io.BufferedWriter;
//所有以 Stream 结尾的类都是面向字节如 FileInputStream/FileOutputStream
//以 Reader/Writer 结尾的类是面向字符
//以 File 开头的类是面向外存
//以 Buffered 开头的类是面向缓冲区
public class ReadAndWrite 
{
    public static void main (String[] args)
    {
        String path = "D:\\Coding\\Java\\TestJava\\testdata\\";
        try {
            File inFile = new File(path + "in.txt");
            File outFile = new File(path + "out.txt");
            InputStreamReader inSr = new InputStreamReader( new FileInputStream(inFile));
            BufferedReader inBr = new BufferedReader(inSr);

            OutputStreamWriter outSw = new OutputStreamWriter( new FileOutputStream(outFile));
            BufferedWriter outBw = new BufferedWriter(outSw); 

            String line = "";
            while ((line = inBr.readLine()) != null)
            {
                outBw.write(line + "\r\n");
            }
            outBw.close();
            outSw.close();
            inBr.close();
            inSr.close();            
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }        
    }
}

 

View Code

/*

 

样式名的值是以空格分割多个值de字符串形式出现,而不是以
COM 属性数组的形式,这给处理带来了复杂性。

HTML5 引入了一个好的解决办法,通过称为
classList (样式列表)的 API 实现。

*/

 

/*

原生 js 使用 classList
增加样式(兼容新的浏览器,IE 10以上,包括 IE 10。

*/

var elements = document.getElementsByClassName(‘box-small’);

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

elements[i].classList.add(‘target’);

}

/*

addClass(names)

为集合中的元素添加指定的样式名,兼容从 IE6
开始的浏览器

name(String|Function):空格分割的多个样式名字符串;如果是函数,调用函数的上下文是当前元素(this),

参数是元素索引和元素当前样式值(所有用到的样式名,用空格分割)

*/

$(‘img’).addClass(function(index, styleValue){

console.log(this);

console.log(styleValue); //元素当前样式值(所有用到的样式名,用空格分割)

return ‘target’; //返回值作为样式名

});

$(‘.box-small’).addClass(function(index, styleValue){

console.log(this);

console.log(styleValue);

return ‘target’;

});

/*

removeClass(names)

从 jQuery
集合中删除每个元素指定的样式;如果是函数,调用函数的上下文是当前元素(this),参数是元素索引和要删除的

样式名(可以是以空格分割的样式名),返回值是要删除的样式名

names(String|Function)

*/

$(‘#target-pane > div’).removeClass(‘target’);

console.log(‘删除
.box-small 中的样式:’)

$(‘.box-small’).removeClass(function(index, styleName){

console.log($(this));

console.log(styleName);

return ‘box-small target’;

});

/*

toggleClass([names][, switch])

为没有样式的元素指定添加指定的样式名,或者删除已经存在的样式

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图