JAVA前端JQuery、Vue、Node.js

JQuery

JQuery是一个javascript的框架，是对javascript的一种封装，通过JQuery可以非常方便的操作html的元素，要使用Jquery需要导入一个第三方的javascript库 jquery.js（在< script src=“url”>< /script>）
形式：$ (function(){…}) 或者 $ (document).ready(function(){…});（文档全部加载之后才会执行JQuery代码，这点与window.onload不同）、通过 $ ("#id") 获取元素（注意Javascript通过document.getElementById获取到的元素节点是DOM对象，而这里是JQuery对象）
监听：通过JQuery增加事件的监听需要事件与触发事件的函数 $ ("#id").事件或方法(function(){…}、与原生javascript需要在html元素上增加监听事件不同的是JQuery不需要在html元素上进行操作、这样的好处是html只需要显示内容，特别是业务复杂起来之后维护js代码会更加容易
方法：$ ("#id").val()（取值：相当于Javascript的document.getElementById(“id”).value）、$ ("#id").html()（通过html()获取元素内容，如果有子元素，保留标签）、$ ("#id").text()（通过text()获取元素内容，如果有子元素，不包含标签）、增加类（一般与css连用）（$ ("#id").addClass(“类名”)）、删除类（$ ("#id").removeClass(“类名”)）、切换类（$ ("#id").toggleClass(“类名”)）、css函数（$ ("#id").css(property,value)、$ ("#id").css({p1:v1,p2:v2})）
选择器：上述的$ ("#id")只是以id为选择器，还可以使用其他的选择器；元素（$(“tagName”)）、id（ $("#id")）、类（ $(".className")）、层级（ $(“selector1 selector2”)）、满足选择器条件的元素（ $(“selector:具体条件”) ）first、last、odd、even、hidden、visible（表示选中可见的selector）、visible(有空格)（表示选中selector下可见的元素）、满足选择器条件的有某属性的元素（ $(selector[attribute=value]) ）（注意属性名是类名要用上面的类选择器）、当前元素（ $(this)）、表单元素（选中form下会出现的输入元素）
筛选器：通过选择器选中了元素后进一步选择、 $("#id").first()、last()、eq(num)、parent()、parents()、children()、find(selector)、siblings()
属性：获取属性（ $("#id").attr(“属性名”)或者 $("#id").prop(“属性名”)）、修改属性（ $("#id").attr(属性名,属性值)）、删除属性（ $("#id").removeAttr(属性名)）、（prop一样也可以用来获取与设置元素的属性，与attr区别在于对于自定义属性和选中属性的处理。选中属性指的是 checked,selected，对于自定义属性，attr能够获取而prop不能获取，对于选中属性attr只能获取初始值， 无论是否变化，prop 能够访问变化后的值，并且以true|false的布尔型返回，所以在访问表单对象属性的时候，应该采用prop而非attr）
效果与事件： $("#id").效果（show(延时执行1000)、hide()、toggle()、slideUp(1000)、slideDown()、slideToggle()、fadeIn(1000)、fadeOut()、fadeToggle()、fadeTo(“slow”,0-1)、animate(变化后的css样式,延时毫秒)（需要设置position:relative,absolute或者fixed）、加载（ $(document).ready()、 $()、load()）、点击（click()、dblclick()）、键盘（keydown()、keypress()、keyup）、鼠标（mousedown()、mouseup()、mousemove()、mouseenter()、mouseleave()、mouseover()、mouseout()）、焦点（focus()、blur()）、改变（change()）、提交（submit()）、绑定事件（on()）、触发事件（trigger()）
keydown、keypress、keyup 顺序发生；keydown和keyup 能获取所有按键，不能识别大小写，keypress不能获取功能键，如F1和SHIFT等，能够识别大小写；keydown和keypress不能获取最后一个字符，keyup获取所有字符
鼠标进入事件：mousemove当鼠标进入元素，每移动一下都会被调用、mouseenter当鼠标进入元素调用一下，在其中移动不调用，鼠标经过其子元素不会被调用、mouseover当鼠标进入元素调用一下，在其中移动不调用，鼠标经过其子元素会被调用
鼠标离开事件：mouseleave当鼠标经过其子元素不会被调用，mouseout当鼠标经过其子元素会被调用
AJAX：采用调用方式

1. $.ajax({
   url: page,
   data:{“name”:value},
   success: function(result){…}
   });
2. $.get(
   page,
   {“name”:value},
   function(result){…}
   );
3. $.post(
   page,
   {“name”:value},
   function(result){…}
   );
4. load方法
5. serialize()序列化方法，格式化form下输入数据， $("#form").serialize()获得数据

对象操作：数组（遍历（ $.each(数组名,回调函数function(i, n){…})）、去除重复（需要先排序sort）（ $.unique(数组名)）、存在（ $.inArray(数字,数组名)））、字符串（去除首尾空白 $.trim(字符串)）、Json对象（将JSON格式的字符串转换为JSON对象（ $.parseJSON(Json字符串)））、DOM对象（把JQuery对象转为DOM对象（对象名.get(0)或者对象名[0]）、（把DOM对象转为JQuery对象（ $(对象名)）））

Vue

Vue是一个javascript的框架，是对javascript的一种封装，通过Vue可以非常方便的显示数据，要使用Vue需要导入一个第三方的javascript库vue.js（在< script src=“url”>< /script>）
格式：
new Vue({
el:’#id’,
data:{数据名:数据值},
methods:{方法名:function(参数值){return…}}
)
取值：{{…}}
语句：条件语句（v-if=“数据”、v-else、v-else-if(数据)）、循环语句（v-for=“item in arrey”、v-for=“item,index in arrey”）
属性：属性绑定（v-bind:属性名=“数据名”、缩写可以省去v-bind）、双向绑定（v-model=“数据名”、修饰符.lazy（在失去焦点的时候进行数据绑定）、.number（字符串类型转到数字类型）、.trim（去掉前后空白））、计算属性computed:{}或者methods:{}（computed 是有缓存的，会直接返回以前计算出来的某些值而不会再次计算，如果是复杂计算就会节约不少时间，而methods每次都会调用）、属性监听（watch:{可以没有返回值}）、过滤器（filters:{方法名:function(){具体方法}}、使用过滤器{{ data|方法名1|方法名2}}、全局过滤器Vue.filter(‘方法名’,function(value){具体方法})）
组件：components：通过建立模板并传递参数进行展示、data中放数据实现动态传参、Vue.component(‘标签名product’, {props:[‘属性名’,’’],template: ‘模板’,methods:{…模板中的方法}}）实现全局组件、利用v-for循环遍历数据并用v-bind:绑定数据
监听：事件监听：v-on：（缩写@）方法=“方法名”、事件修饰符（@方法.stop=“方法名”、.prevent、.capture、.self、.once）
自定义指令：
调用使用：v-指令名:绑定属性=“属性值”

1. 使用Vue.directive来自定义
2. 第一个参数就是’指令名’，el 表示当前的html dom对象，
3. 在方法体内操控当前元素

Vue.directive(‘指令名’, function (el,绑定属性命名（binding）) {el操作…})
回调函数：binding.name、value、expression、arg、modifiers
常见事件：
bind：只调用一次，指令第一次绑定到元素时调用，可以进行一次性的初始化设置
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前，指令的值可能发生了改变，也可能没有，你可以通过比较更新前后的值来忽略不必要的模板更新
unbind：只调用一次，指令与元素解绑时调用
路由：实现局部刷新，要使用Vue-router需要导入一个第三方的javascript库vue.js（在< script src=“url”>< /script>）

1. 定义路由并创建VueRouter实例（var routes=[{path:’/链接’,链接对象:链接名},{}]）（var router = new VueRouter({ routes:routes});）
2. 为vue对象绑定路由（new Vue({el:"#app",router})）
3. 路径声明（< router-link to="/链接名">< /router-link>）

AJAX：
通过fetch获取数据不需要传参：
fetch(url).then(function(response) {…response函数})
使用axios.js框架不需要传参：
axios.get(url).then(function(response) {…reponse函数})
使用Vue方式：Vue中增加方法函数
mounted（//表示Vue加载成功）:function(){fetch方式或者axios方式}
CRUD

Node.js

在服务端使用javascript开发，在src中保存源文件js：

1. 引入htp模块var http = require(‘http’);
2. 准备处理请求和响应的service函数，设置返回代码200，以及返回格式为 text/plain，设置返回内容function service(request, response) {response.writeHead(200, {‘Content-Type’: ‘text/plain’});response.end();}
3. 基于service函数来创建服务器var server = http.createServer(service);
4. 监听服务器server.listen(端口号);
5. cmd内路径中运行node 文件名.js并测试 http://127.0.0.1:端口号/
6. 参数设置：var url=require(‘url’); //引入url 模块帮助解析；var querystring=require(‘querystring’);// 引入 querystring 库帮助解析；//获取返回的url对象的query属性值var arg = url.parse(req.url).query；//将arg参数字符串反序列化为一个对象var params = querystring.parse(arg);
7. 新建函数function(){…}
8. 允许外部调用：通过 exports 指定
9. 调用外部函数：声明（var 调用名 = require(‘文件路径’);）、调用函数（调用名.调用函数）
10. 使用文件模块：开头要引入fs.js 表示使用文件模块（读readFileSync、写writeFile）

NPM：用于模块发布和使用
CNPM：解决国际网速问题的NPM命令
EXPRESS：web框架可以处理路由，Cookie，静态文件，上传文件， RESTFULL风格等操作
静态资源访问：导入express和path模块、创建express对象、设置静态访问目录 文件名.use(express.static(path.join(__dirname, ‘public’)))__dirname 就是工作目录、path_join 相当于关联父目录和子目录、express.static 就是指定静态目录的位置