JAVA前端JQuery、Vue、Node.js

JAVASCRIPT框架封装

  • 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 就是指定静态目录的位置

你可能感兴趣的:(java)