seho 发布的文章

u=4055771136,79106349&fm=27&gp=0.jpg大家好，已经很久没有给大家发布文章了，因为最近在学习很多新东西，已经保存到自己的印象笔记，所以后续会持续给大家
补更的，因为明天就开学了，今天晚上就用jquery写了一个小小的下拉菜单的demo。

知识点：

jquery的siblings():取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

大白话就是：拿到非当前对象的所有对象

还有一个查找的方法是children：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

大白话就是：拿到当前对象下的某某子元素

demo：案例代码：

<!DOCTYPE html>

<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.0.0.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .nav{
        width: 300px;
        list-style: none;
        margin: 100px auto;
    }
    .nav>li{
        border: 1px solid #000;
        line-height: 35px;
        border-bottom: none;
        text-indent: 2em;
    }
    .nav>li:first-child{
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }
    .nav>li:last-child{
        border-bottom: 1px solid #000;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .sub{
        display: none;
    }
    .sub>li{
        list-style: none;
        background: mediumpurple;
    }
    .sub>li:hover{
        background: red;
        border-bottom: 1px solid #fff;
    }
</style>
<script>
    $(function () {
        $('.nav>li').click(function () {
            //拿到二级菜单
            var $sub=$(this).children('.sub');
            $sub.slideDown(300);
            //拿到非当前的一级菜单的二级菜单
            var othersub=$(this).siblings().children(".sub");
            //让其他二级菜单收起
            othersub.slideUp(300);
        })
    })
</script>


  • 这是一级标签
    • 二级标签
    • 二级标签
    • 二级标签
    • 二级标签
    • 二级标签
    </li>
<li>这是一级标签 <ul class="sub">
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
</ul></li>
<li>这是一级标签 <ul class="sub">
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
</ul></li>
<li>这是一级标签 <ul class="sub">
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
</ul></li>
<li>这是一级标签 <ul class="sub">
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
    <li>二级标签</li>
</ul></li>



我最近开始玩github了，下半年也会有一个cms免费开源的程序跟大家见面

1. /*溢出部分样式*/  
2.

.txt-ell {

3. 
whitewhite-space:nowrap;  //强制在一行显示   
4. 
overflow:hidden;    //溢出的内容切割隐藏   
5. 
text-overflow:ellipsis; //当内联溢出块容器时，将溢出部分替换为…   
6. 
word-break:keep-all;  //允许在单词内换行   
7. 
color: red;  //这里我自己标识一下   
8. 
padding: 0 7px;  //由于想跟边线留有距离，所以设置了下   
9.

}

10.

.table-fix {

11. 
table-layout:fixed;     
12.

}

首先第二个样式是专门给table标签加的，想要实现内容溢出，那么表格必须有固定的宽高，表格内部的tr，td也要有固定的宽高。在用内容溢出之前，先要给table添加table-fix这个类。然后检查自己的tr，td有没有给width，如果没有的话，最好是给个吧，固定的也行，百分比的也行，我主要给的百分比，外边table给固定宽度，里面的tr和td就是百分比的宽度，这样才能使用内容溢出样式。最后如果哪个格子里面的内容非常的多，你想实现点点点，就给这个格子添加一个.txt-ell的类吧

下载.jpg

今天又是充满希望的一天，就跟着案例教程做了一个vue的小项目，但是虽然说很简单，但是在学习的过程中，对于没有多少js的基础的人来说
是比较困难的，项目的关键的地方就是用了vue的三个进行交互的方法，get，post，jsonp
--语法
引入vue交互模块，resource.js，然后直接在方法中this.$http.get(post(jsonp)) 第一个参数是url路径，第二个参数是数据，然后通过then.funcition，分别是成功返回的方法，和失败返回的方法
--需要特别提示一点的就是在post的提交的时候需要把emulateJSON:true,加入到第三个参数中并且用{}包裹起来
--在jsonp跨域中，callback的默认名字就是callback，但是在百度中，默认的名字为cb，所以在调用接口的时候，需要声明callback的名字为cb，所以要在第三个参数中声明jsonp:'cb',这样我们就可以正常调用了。

po一下代码，代码的功能就是简单的百度搜索功能，输入东西按回车也会直接跳到一个百度搜素结果页中，调用了windows.open配合百度的搜索接口，把
参数换成输入框中的数据即可。

<!DOCTYPE html>

<meta charset="UTF-8">
<title>百度下拉菜单</title>
<script src="bootstrap.js"></script>
<script src="bootstrap.min.css"></script>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>



<div id="box">
    <input type="text" class="input-group" v-model="text" @keyup="get($event)" @keydown.down="down()" @keydown.up.prevent="up()" @keydown.enter="enter()">
    <ul>
        <li class="list-group" v-for="(li,$index) in mydata" :class="{grey:$index==now}">{{li}}</li>
    </ul>
    <p v-show="mydata.length==0">暂无数据。。。</p>
</div>


u=1436948145,4270509323&fm=200&gp=0.jpg

4afbfbedab64034f29596c8ba6c379310b551da2.jpg
众所周知，AngularJS框架是由Google维护的，但是创立者为个人，后被收购，昨天在学习Vue语法的时候，了解到键盘监控的事件，尤大大让我很震惊的
居然用如此的方式来简化代码，往常都是调用keyCode方法来监控键盘输入的键码，但是在vue中，作者封装了直接在键盘事件的后面.出来就好。

--比如说，@keyup.enter=""，意思监控enter键，于此同时，还可以.出对应的键码，比如说enter是13，那么在代码中13就可以代替enter目前我简单的测试了一下，delete，还有方向键，end键等做出了封装，非常nice，简化了代码
代码的思路令人称奇，尤大大也是HTML5的Clear的打造人

--膜拜完毕，总结一下今天的知识，今天学习特别少，因为都在没有信号的狭小的旅途中，明天就可以回归正轨
事件:

v-on:click/mouseover......

简写的:
@click=""        推荐

事件对象:
    @click="show($event)"
事件冒泡:
    阻止冒泡:  
        a). ev.cancelBubble=true;
        b). @click.stop    推荐
默认行为(默认事件):
    阻止默认行为:
        a). ev.preventDefault();
        b). @contextmenu.prevent    推荐
键盘:
    @keydown    $event    ev.keyCode
    @keyup

    常用键:
        回车
            a). @keyup.13
            b). @keyup.enter
        上、下、左、右
            @keyup/keydown.left
            @keyup/keydown.right
            @keyup/keydown.up
            @keyup/keydown.down
        .....

hello，还是你们熟悉的老沈，今天下午看了智能社的一节课，受益匪浅啊，学习vue的过程中掌握了很多boot和js的语法，又请输入图片描述
跟着导师自己做了一个留言板的小案例。

--案例感受，vue的入门是真的很简单，学到了vue的自定义指令，能够很快的做一个非常实用的留言板，但是由于是前端页面，不能数据保存
，等到后期教师满意度的项目结束以后，会写一个购物网站，把vue+bootstrap+javabean能够完整的做一个项目。
--先po一下代码吧。
<!DOCTYPE html>

<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-3.0.0.js"></script>
<script src="bootstrap.min.css"></script>
<script src="vue.js"></script>


简易留言板

序号 用户名 年龄 操作
{{$index+1}} {{item.username}} {{item.age}}

暂无数据。。。


--js代码
new Vue({

el:'#window',
data:function () {
    return{
        message:[],
        username:'',
        age:'',
        Nowindex:'-99'
    }
},
methods:{
    submit:function () {
        this.message.push({
            name:this.username,
            age:this.age
        });
        this.age='';
        this.username='';
    },
    nowdelete:function (index) {
        if(index==-2){
            this.message=[]
        }else{
            this.message.splice(index,1);
        }
    }
}

})

--得引入jq和boot和vue
--案例功能，能够提交表单信息到下方的表格，以及删除
--用到的vue指令
v-model的表单双向数据绑定
v-for循环vue数组内容
--ps：在vue2.0的版本中，不能直接使用$index来表示序列了，要在for循环声明index的存在，比如v-for="(item,$index) in message
--ps:vue的点击事件v-on:click，如果后面跟的方法名如果有参数要表达的话，要写成@click="submit($index)"，类似这种

明天继续，结束！

  1. 1
  2. ...
  3. 16
  4. 17
  5. 18
  6. 19
  7. 20
  8. 21