ios -html-JS

作者: DeerRun | 来源:发表于2017-06-15 08:54 被阅读23次

JS简介-基本数据类型

1.1 JS中的常见语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
    <!--引进js标签地址-->
    <script type="text/javascript">
        <!--警报视图-->
        alert('hello word');
        alert('shijie');
        //打印
        console.log('tiaoshishuchu');
    </script>
</head>
<body>
</body>
</html>

所有变量的返回类型都是var
number类型
string类型
boolean类型
object类型

 //基本数据类型
        var age=18; //number
        var money=100.9; //number
        var name='jack'; //string
            name2='marry'; //string
        var number=undefined; //undefined
        var result=true; //boolean

        //输出基本数据
        console.log(age, money, name, number, result);
        //输出基本数据类型
        console.log(typeof age, typeof money, typeof name, typeof number, typeof result);

基本数据类型

1.2 变量的拼接

变量的拼接都是从左往右
任何类型的变量和string类型的变量拼接,都会被转换为string类型

//基本数据类型运算
        //规律：运算从左往右，任何类型的变量与string拼接都会被强制转化为string类型
        //例子1：
        var newName= name+'_'+name2;
        console.log(newName);

        //例子2：
        var str1=10+10+'10';
        var str2='10'+10+10;
        var str3=10+'10'+10;

        console.log(str1, str2, str3);

变量拼接

1.3 数组

遍历数组

//数组，内容可以为任何变量或对象
        var  array=[10, name, result,['哈哈', '喝喝']];

        //遍历数组
        for(var index= 0; index<array.length; index++) {
            console.log(index, array[index]);
        }

遍历数组

增加/删除元素

//删除数组元素
        array.pop();

删除数组元素

 //添加数组元素
        array.push('ljc');

        for (var i in array) {
            console.log(i, array[i]);
        }

添加数组元素

取出最小值和最大值

 //js常用类库 math
        var nums=[10, 20, 40];
        var maxNum=Math.max(10,200,30);

        var  newMax=Math.max.apply(this, nums);

        console.log(maxNum, newMax);

取出最小值和最大值

1.4 JS中的函数

普通函数的类型:函数的调用: 函数名();
函数中的内置数组(arguments):用于存放外部传入的参数
匿名函数:格式---匿名函数的调用:变量名();

        js函数结构
        function 函数名() {
            函数体
        }

例子

function sum(num1, num2) {
            return num1 + num2;
        }
        var rel=sum(10,20);
        console.log(rel);

        function sum2(nums1) {
            var rel=0;
            for (var i in nums1){
                rel+=nums1[i];
            }
            return rel;
        }
        var newRel=sum2([10, 20, 30, 40, 50]);
        console.log(newRel);

函数

//匿名函数
        var res=function (nums1) {
            var rel=0;
            for (var i in nums1){
                rel+=nums1[i];
            }
            return rel;
        }
        var newRel1=res([10, 20, 30, 40, 50]);
        console.log(newRel1);

匿名函数

JS语法-对象语法

2.1 产生单个对象

格式:var dog = {};
设置对象的属性
设置对象的方法
调用对象的属性和方法
this:this所在函数在哪个对象中,this就代表该对象

//创建对象
        var  dog={
            //属性
            name :'jack',
            age : 18,
            height:1.60,
            dogFriend:['wangcai', 'lili'],

            // 方法
            run: function () {
                console.log(this.name + ' run');
            },

            //带参数方法
            eat : function (something) {
                console.log(this.name +' eat' + something);
            }
        };//object

        //获取函数属性
        console.log(typeof  dog.name);
        //调用函数方法
        dog.run();
        dog.eat(' 骨头');

创建对象

2.2 产生多个对象

构造函数
产生新对象:new

//普通函数--> 构造函数（对象）
        var Dog=function () {
            this.name = null;
            this.age = null;
            this.height = null;
            console.log('一般函数');
            // 方法
            this.run=function () {
                console.log(this.name + ' run');
            };

            //带参数方法
            this.eat= function (something) {
                console.log(this.name +' eat' + something);
            }
        };
        //普通调用
        Dog();

        //生成构造对象
        var  dog1=new Dog();
        dog1.name='11111';
        dog1.height=2222;
        dog1.age=3333;


        var  dog2=new Dog();
        dog2.name='aaaa';
        dog2.height=444;
        dog2.age=555;

        console.log(dog1, dog2);

        dog1.eat('iiiii');
        dog2.eat('ttttt');

构造对象

2.3 JS语法的灵活性

JS语法-内置对象window

功能1:获取所有全局变量和属性
所有的全局变量都是window的属性
所有的全局函数都是window的函数
功能2:动态跳转
window.location.href = 'http://baidu.com';

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 第一大作用:
         // 1.1 所有全局的变量都是window的属性
         // 1.2 所有的全局函数都是window的方法

         // 全局的变量
         var age = 17;
         console.log(window.age);

        // 全局的函数
         function Dog() {
             var name = '张三';
             console.log(name);
         }

         Dog();
         window.Dog();

//         window.alert('哈哈');
//         window.console.log('全局的');

        function Person() {
            console.log(this);
        }

        Person(); // window
        new Person(); // Person

        // 第二大作用
        // 1.动态的跳转
        alert(0);
        window.location.href = 'http://www.520it.com';
        window.location.href = 'XMG2://openCamera?user=zhangsan'

    </script>
</head>
<body>
</body>
</html>

JS语法-内置对象document

功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // document内置对象的作用:
        // 1. 可以动态获取网页中所有的标签(节点)
        // 2. 可以对获取到的标签进行CRUD

        document.write('你好,世界!');
        document.write('<input type="file">');
        document.write('![](http://www.520it.com/userfiles/1/images/cms/site/2015/09/index_06.jpg)')
    </script>
</head>
<body>

</body>
</html>

1.可以动态的获取网页中的任意一个节点(标签)
2.可以对获取到的节点进行DOM操作(CRUD)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function changeImg() {
//            alert(0);
          // 1.获取网页中的图像标签
           var img = document.getElementsByClassName('icon')[0];
//           console.log(img);
          // 2.改变src属性
            img.src = 'image/img_02.jpg'
        }
    </script>
</head>
<body>
    ![](image/img_01.jpg)
    <p></p>
    <button onclick="changeImg();">更改图片</button>
</body>
</html>

DOM操作01-常用事件:
当前页面加载完毕:window.onload
鼠标进入标签:onmouseover
鼠标在标签上移动:onmousemove
鼠标离开标签:onmouseout
鼠标在标签上按下:onmousedown
鼠标在标签上抬起:onmouseup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    ![](ic_default@2x.png)
    <p id="p1" >图片名字：ic_default@2x.png</p>
    <button  id="btn" > 切换图片 </button>

    <script>
        window.onload = function () {
            console.log('当前页面加载完毕');
        };
        var image = document.getElementsByClassName('image')[0];
        var p2 = document.getElementById('p1');
        var name = document.getElementById('p1').innerHTML;
        var btn = document.getElementById('btn');

        image.onmouseover = function () {
            console.log('鼠标进入标签');
        };
        image.onmousemove= function () {
            console.log('鼠标在标签上移动');
        };
        image.onmouseout = function () {
            console.log('鼠标离开标签');
        };
        image.onmousedown = function () {
            console.log('鼠标在标签上按下');
        };
        btn.onclick = function () {
            console.log(name);
            if (name == '图片名字：ic_default@2x.png'){
                image.src ='ic_home_class@2x.png';
                name = '图片名字：ic_home_class@2x.png';
            } else {
                image.src = 'ic_default@2x.png';
                name = '图片名字：ic_default@2x.png';
            }
            p2.innerText=name;
        }
    </script>
</body>
</html>

DOM操作02-显示和隐藏元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   ![](image/img_01.jpg)
   <p id="word">这里风景很美</p>
   <p></p>
   <button>隐藏</button>


   <script>
       // 1.1 拿到所有要操作的标签
       var icon = document.getElementsByClassName('icon')[0];
       var p = document.getElementById('word');
       var btn = document.getElementsByTagName('button')[0];

//       console.log(btn);

       // 1.2 监听按钮的点击
       btn.onclick = function () {
           // 隐藏 css属性 style display
         if (btn.innerText == '隐藏'){
             p.style.display = 'none';
             icon.style.display = 'none';
             btn.innerText = '显示';
         }else{
             p.style.display = 'block';
             icon.style.display = 'inline-block';
             btn.innerText = '隐藏';
         }

       }

   </script>
</body>
</html>

DOM操作03-上下切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下切换图片</title>
</head>
<body>
    ![](image/icon_01.png)
    <br>
    <button>上一张</button>
    <button>下一张</button>

    <script>
        <!--最大图片-->
        var maxIndex = 9;
        <!--最小图片-->
        var minIndex = 1;
        var currentIndex = minIndex;
//      获取标签
        var image = document.getElementsByTagName('img')[0];
        var pre = document.getElementsByTagName('button')[0];
        var next = document.getElementsByTagName('button')[1];
//      上一张
        pre.onclick = function () {
            if (currentIndex == minIndex) {
                currentIndex = maxIndex;
            } else {
                currentIndex--;
            }

            image.src='image/icon_0'+currentIndex+'.png';
            console.log(image.src);

        }

//        下一张
        next.onclick = function () {
            if (currentIndex == maxIndex) {
                currentIndex = minIndex;
            } else  {
                currentIndex++;
            }
            image.src='image/icon_0'+currentIndex+'.png';
            console.log(image.src);
        }
    </script>
</body>
</html>

DOM操作04-倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
    <style>
        body {
            text-align: center;
            margin-top: 100px;
            background-color: black;
        }
        img {
            display: none;
        }
        p{
            display: none;
            font-size: 70px;
            color: red;
        }
        div {
            font-size: 80px;
            color: white;
        }

    </style>

</head>
<body>

    ![](image/flower.gif)
    <p id="word">二狗最美,最爱媛娃</p>
    <div id="number">3</div>

    <script>

        var image=document.getElementById('image');
        var word=document.getElementById('word');
        var number=document.getElementById('number');

        var timer = setInterval(function () {
            number.innerText -= 1;
            if (number.innerText == 0) {
                //取消定时器
                clearInterval(this.timer);

                //在JS中调用标签属性应该加上'style'
                number.style.display = 'none';
                image.style.display = 'block';
                word.style.display = 'inline-block';
            }
        }, 1000);

    </script>
</body>
</html>

DOM操作05-节点操作
增(C)
删(D)
改(U)
查(R)

js

/**
 * Created by ljh on 2017/6/9.
 */
document.write('meihao');

//增
var mainView = document.getElementById('main');
var image = document.createElement('img');
image.src='image/img_01.jpg';
mainView.appendChild(image);

//删
// image.remove();

//查
console.log( mainView.childNodes);

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>

    <div id="main"> mainView </div>
    //引进外部JS
    <script src="js/index.js"></script>
</body>
</html>

增删改除

JS综合demo-选项卡切换

作用:用最小的空间放最多的内容
难点
相对定位
标签及对应内容之间的切换
标题和内容的显示和隐藏
JS核心代码

/**
 * Created by xiaomage on 16/5/9.
 */

function $(id) {
    // 类型的比较
    return typeof id === 'string' ? document.getElementById(id): id;
}
// 当网页加载完毕是调用
window.onload = function () {
   // 拿到所有的li标签和对应的内容
    var lis = $('tab-header').getElementsByTagName('li');
    var contents = $('tab-content').getElementsByClassName('dom');
    // console.log(lis, contents);
  // 验证
    if(lis.length !== contents.length) return;
    // 遍历
    for(var i=0; i<lis.length; i++){
        // 取出每一个li标签
        var li = lis[i];
        // console.log(li);
        li.id = i;
        
        // 监听鼠标在li上面的移动
        li.onmousemove = function () {
            for(var j=0; j<lis.length; j++){
                //让所有的li标签都不被选中
                lis[j].className = '';
                contents[j].style.display = 'none';
            }
            // 设置当前对象的className
            this.className = 'selected';
            contents[this.id].style.display = 'block';
        }
    }
}

CSS核心代码

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    margin:0;
    padding: 0;
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
    color: black;
}

body{
    margin: 100px;
}


#tab{
  border:1px solid #dddddd;
  width: 498px;
  height: 120px;

  /*裁剪超出部分*/
  overflow: hidden;
}

#tab-header{
    height: 38px;
    line-height: 38px;
    background-color: #F7F7F7;
    text-align: center;

    position: relative;
}

#tab-header ul{
    width: 501px;

    position: absolute;
    left:-1px;
}

#tab-header ul li{
    float: left;
    /*background-color: red;*/
    width: 98px;

    /*内填充*/
    padding: 0 1px;

    /*下线*/
    border-bottom: 1px solid #dddddd;
}

#tab-header ul li.selected{
    background-color: white;
    /*下线*/
    border-bottom: 0;

    /*内填充*/
    padding: 0;

    /*设置左右线条*/
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}

#tab-content .dom{
    display: none;
}


#tab-content .dom a{
    /*background-color: red;*/
    width: 220px;
    /*左浮动*/
    float: left;
    margin:8px;
}

html 核心代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入外部的样式-->
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <div id="tab">
         <!--头部-->
         <div id="tab-header">
             <ul>
                 <li class="selected">公告</li>
                 <li>规则</li>
                 <li>论坛</li>
                 <li>安全</li>
                 <li>公益</li>
             </ul>
         </div>
         <!--主要内容-->
         <div id="tab-content">
             <div class="dom"  style="display: block">
                 <ul>
                     <li>
                         <a href="#">数据七夕:金牛爱送玫瑰</a>
                     </li>
                     <li>
                         <a href="#">阿里打造"互联网监管"</a>
                     </li>
                     <li>
                         <a href="#">10万家店60万新品</a>
                     </li>
                     <li>
                         <a href="#">全球最大网上时装周</a>
                     </li>
                 </ul>
             </div>
             <div class="dom">
                 <ul>
                     <li>
                         <a href="#">“全额返现”要管控啦</a>
                     </li>
                     <li>
                         <a href="#">淘宝新规发布汇总(7月)</a>
                     </li>
                     <li>
                         <a href="#">炒信规则调整意见反馈</a>
                     </li>
                     <li>
                         <a href="#">质量相关规则近期变更</a>
                     </li>
                 </ul>
             </div>
             <div class="dom">
                 <ul>
                     <li>
                         <a href="#">阿里建商家全链路服务</a>
                     </li>
                     <li>
                         <a href="#">个性化的消费时代来临</a>
                     </li>
                     <li>
                         <a href="#">跨境贸易是中小企业机</a>
                     </li>
                     <li>
                         <a href="#">美妆行业虚假信息管控</a>
                     </li>
                 </ul>
             </div>
             <div class="dom">
                 <ul>
                     <li>
                         <a href="#">接次文件，毁了一家店</a>
                     </li>
                     <li>
                         <a href="#">账号安全神器阿里钱盾</a>
                     </li>
                     <li>
                         <a href="#">新版阿里110上线了</a>
                     </li>
                     <li>
                         <a href="#">卖家学违禁避免被处罚</a>
                     </li>
                 </ul>
             </div>
             <div class="dom">
                 <ul>
                     <li>
                         <a href="#">为了公益high起来</a>
                     </li>
                     <li>
                         <a href="#">魔豆妈妈在线申请</a>
                     </li>
                 </ul>
             </div>
         </div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

tabbar

ios -html-JS

JS简介-基本数据类型

1.1 JS中的常见语法

1.2 变量的拼接

1.3 数组

1.4 JS中的函数

JS语法-对象语法

2.1 产生单个对象

2.2 产生多个对象

2.3 JS语法的灵活性

JS语法-内置对象window

JS语法-内置对象document

JS综合demo-选项卡切换

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读