前端技能总结

ps：做一只过河的小马

1.根据事件进行控件定位（vue）

给方法参数传递event事件：@clickmy="myFunction($event) "

js中定义函数：myFunction:function(e){$(e.target).***}

获取前控件：prev();

获取后控件：next();

获取父亲(可连续)控件：parent()

获取同级指定选择器控件：siblings("selector")

获取祖先中的指定选择器：parents("selector")

获取祖先中的指定选择器并定位到哪一个：parents("selector").eq(num) （ps:有疑问待解决）

获取子孙中的指定选择器：find("selector")

获取子孙中的指定选择器并定位到哪一个：find("selector").eq(num)

控件显示/隐藏：show()/hide()

控件中添加属性进行显示/隐藏： /

input中显示/获取数据：vue("123")

非input中显示数据：text("123")

重点：

获取隐藏input数据：

input控件中添加隐藏(只能用这个属性，其他不能获取值)：style="opacity:0"

js中获取input控件对象后添加(聚焦取值)方法：focus()

其他技能：

input中添加的v-model="valueName" ：input中获取的值就赋值给了valueName(名字自定义)

input中的判断v-if="type=='checkbox'",循环v-for="item in list" （条件自定义）

jsp中显示vue中定义的data:可以在控件间{{dataName}},或者在参数中直接“dataName”

class属性值可以为多个自定义的。

vue方法的使用必须在指定vue的标签内，例：el:"#container"

省市区三级联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>全国城市三级联动</title>

<style type="text/css">

body{ background:#EEEEEE;margin:0; padding:0; font-family:"微软雅黑", Arial, Helvetica, sans-serif; }

a{ color:#006600; text-decoration:none;}

a:hover{color:#990000;}

.top{ margin:5px auto; color:#990000; text-align:center;}

.info select{ border:1px #993300 solid; background:#FFFFFF;}

.info{ margin:5px; text-align:center;}

.info #show{ color:#3399FF; }

.bottom{ text-align:right; font-size:12px; color:#CCCCCC; width:1000px;}

</style>

</head>

<body>

<div class="top">

    <h1>全国城市三级联动</h1>

</div>

<div class="info">

    <div>

    <select id="s_province" name="s_province" onchange="change(1)"></select>  

    <select id="s_city" name="s_city"  onchange="change(2)"></select>  

    <select id="s_county" name="s_county"  onchange="change(3)"></select>

    <script class="resources library" src="area.js" type="text/javascript"></script>

    

    <script type="text/javascript">_init_area();</script>

    </div>

    <div id="show"></div>

</div>

<script type="text/javascript">

var Gid  = document.getElementById ;

var showArea = function(){

    Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" +     

    Gid('s_city').value + " - 县/区" + 

    Gid('s_county').value + "</h3>"

                            }

Gid('s_county').setAttribute('onchange','showArea()');

</script>

</body>

</html>

View Code