转战前端 jQuery

我想,在看这篇文章之前,如果只看题目的话,肯定会以为我已经从服务端开发(Java 开发)转战到前端开发,说白了就是做前端,比如,设计布局什么的、JavaScript 什么的。首先申明一点,并不是这样的。那到底是什么样呢,请继续往下看。

背景

其实,对于我们搞开发的来说,没有严格的前端后端之分,做后端的工程师,前端的技术也是或多或少的知道一些。毕竟有的公司是没有前端工程师的,也或许前端工程师很少,你做开发的时候,只能自己写前端,久而久之,前端的技术,你也就了解一二了。

回想起来,这周也并没有用到多少新技术。倒是整了很多天的前端,一直在跟 jQuery 打交道。是这样的,上周六,经理突然跟我说,要把我调出去给别的部门做技术支持,大概一周的样子。于是,我就这样被借出去了,配合别的部门做开发,当然也是 Java 项目。只不过,这次需要的更多的是写前端,由于功能的限制,只能采用一些前端技术实现,比如:局部刷新、动态刷新、动态显示表格。

正文

感觉,我这一周下来,都可以改行做前端了。为什么这么说,主要是因为,在这一周里,有大部分的时间都在操作 DOM 元素,来实现各种各样的功能。就连我从来都没有用过的 delegate 函数都用上了。

下面就不扯了,细说说我用到的,几个比较常见的技术吧。

  • 局部刷新

(使用 Ajax 异步请求,动态添加数据)

  • 动态刷新

设置间隔时间,经过固定时间之后,实现动态刷新

  • delegate 函数

如果前端 JS 用的不多的童鞋,想必 delegate 这个函数用到的也并不是很多,下面就简单讲讲这个函数的用法。

jQuery 扫描文档查找 $(‘#tab1‘),并使用 click 事件和 ‘a‘ 这一 CSS 选择器作为参数把自定义的函数绑定到 $(‘#tab1‘) 上。任何时候只要有事件冒泡到 $(‘#tab1‘) 上,它就查看该事件是否是 click 事件,以及该事件的目标元素是否与 CSS 选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。

那么,什么是事件冒泡呢?事件冒泡,又称事件传播,当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。

因此,一个单击操作会触发自定义函数的执行。

click 事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。

结束语

说是一周,其实,从上周六算下来,敲代码、调试的时间总共也就 4 天而已,可问题是,这个项目一直持续到了现在,为什么呢,因为负责这个项目的部门,具体的需求还没有最终确定下来,而且也是一直在改,对于这样的需求,我也只能是尽量做好自己的开发,能写活的尽量写活,这样一来,无论需求再怎么变,也不会影响到我这里,最多最多改一下资源文件里的参数。当然,如果涉及到具体的业务了,那么也只是修改很小的一部分,也不会大篇幅的修改代码。维护起来,相当简单。

jQuery 所包含的东西还是很多很多的,我这里也只是用到了很小的一部分,相信,长此以往,我将成为一个前端的高手,(*^__^*) 嘻嘻。

时间: 2024-08-29 21:04:25

转战前端 jQuery的相关文章

ASP.NET 登录中Cookies和验证和前端Jquery

1.登陆中的验证问题 登录中用户名和密码的判断,一是怎么判断,需要调用业务逻辑层的判断方法,这里是单独拿出一个层Controls来进行授权和登录的验证.那怎么进行验证结果的返回,正确进入下个页面错误返回登录页面,首先想到的放法写一个bool的方法,正确进入下一个页面,错误返回登录页面.这里用的一个比较专业的方法是在Controls设置一个数据返回接口类DataResult.cs里面定义好code,Message,Data分别用于进行登录验证,错误信息返回,数据返回(这里暂时用不到)至于为什么这样

python前端jQuery高级

知识点预习1.jQuery事件冒泡2.事件委托 3.元素节点操作 4.正则表达式及表单验证实例 01- submit事件 //监听 提交的事件 $("form").submit(function (abc) { //阻止系统的默认行为 // abc.preventDefault(); return false; }) 事件冒泡的原理在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件

Python之Web前端jQuery扩展

Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 以下表单验证使用两种方式简单实现: (一). 使用DOM表单验证 (二). 使用jQuery表单验证 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证DOM<

Web前端JQuery基础

JQuery知识汇总 一.关于Jquery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨     是"write Less,Do More",即倡导      写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模       式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuer

前端—jQuery

什么是jQuery? jQuery是一个工具,简单方便实现DOM操作,python里可以叫模块,但在前端叫“类库“” jQUery 我们在声明一个jQuery对象变量的时候在变量名前面加上$: var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery对象转成DOM对象 jQUery基本语法 $(selector).action(). 查找标签 层级选择器: $("x y");// x的所有后代y(子子孙孙) $

07 前端--JQuery

目录 一.JQuery介绍 二.JQuery的优势 三.JQuery 内容 四.JQuery对象 五.JQuery创建对象 六.JQuery的基础语法 6.1 基本元素选择器 6.2 基本元素筛选器 七.属性选择器 八.筛选器方法 8.1 查找(find) 8.2 筛选(filter) 九.表单元素选择器 十.表单对象属性 十一.操作标签 11.1 样式操作(CSS) 11.2 位置操作 11.3 尺寸操作 11.4 文本操作 11.5 属性操作 11.6 porp和attr的区别 11.7 文

前端-jQuery介绍

目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: 筛选器方法 操作标签 样式操作 位置操作 尺寸: 文本操作 属性操作 文档处理 事件 常用事件 事件绑定 移除事件 阻止后续事件执行 阻止事件冒泡 页面载入 事件委托 动画效果 补充 each .data() jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQ

前端jQuery使用ajax与后端Servlet进行数据交互

前端代码: 1 $.ajax({ 2 type : "post", 3 url : "Calculator", //servlet文件名为Calculator,需要提前在web.xml里面注册 4 dataType : "text", 5 data : 6 { 7 "operator1" : operator1, //操作数 8 "operatorSign":operatorSign, //操作符 9 &q

WEB前端--JQuery

jQuery 用法:http://www.php100.com/manual/jquery/ 一.基本使用 1.创建jQuery对象 $  ==>  相当于创建一个jQuery对象-->$=jQuery() $('#id')  ==>  相当于document.getElementById('id'),找到id是'id'的元素. 2.当页面框架加载完成,执行这里面的代码. 1 2 3 4 5 6 <script type="text/javascript" sr