前端开发

Web前端JQuery面试题（一） 一：选择器 基本选择器 什么是 #id ， element ， .class ， * ， selector1, selector2, selectorN ？ 答： 根据给定的 id 匹配一个元素，用于搜索，通过 id 的属性给定值。 案例：查找 id 为 da3 的元素 html代码： <div id="da1"></div> <div id="da2"></div> <div id="da3"></div> jquery代码： $("#da3"); 结果： [ <div id="da3"></div> ] html代码： <div id="da:q"></div> jquery代码： $("#da\\:q"); 根据给定的元素名匹配所有元素 案例，查找 div 元素： html代码： <div> da1 </div> <div> da2 </div> <p>da3</p> jquery代码： $("div"); 结果： [ <div> da1 </div> , <div> da2 </div> ] 根据给定的类匹配元素 html代码： <div class="dashu"> dashu </div> <div class="da"> da </div> jquery代码: $(".da"); 结果: [ <div class="da"> da

jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是："Write less, do more." 优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。4

本人免费整理了Java高级资料，涵盖了Java、Redis、MongoDB、MySQL、Zookeeper、Spring Cloud、Dubbo高并发分布式等教程，一共30G，需要自己领取。 传送门： https://mp.weixin.qq.com/s/osB-BOl6W-ZLTSttTkqMPQ 前言 最近由于项目需求，项目中需要实现一个WebSSH连接终端的功能，由于自己第一次做这类型功能，所以首先上了GitHub找了找有没有现成的轮子可以拿来直接用，当时看到了很多这方面的项目，例如：GateOne、webssh、shellinabox等，这些项目都可以很好地实现webssh的功能。 但是最终并没有采用，原因是在于这些底层大都是python写的，需要依赖很多文件，自己用的时候可以使用这种方案，快捷省事，但是做到项目中供用户使用时，总不能要求用户做到服务器中必须包含这些底层依赖，这显然不太合理，所以我决定自己动手写一个WebSSH的功能，并且作为一个独立的项目开源出来。 github项目开源地址：https://github.com/NoCortY/WebSSH 技术选型 由于webssh需要实时数据交互，所以会选用长连接的WebSocket，为了开发的方便，框架选用SpringBoot，另外还自己了解了Java用户连接ssh的jsch和实现前端shell页面的xterm.js

某厂面试归来，发现自己落伍了！>>> 【推荐】2020年最新Java电子书集合.pdf(吐血整理) >>> 前言 最近由于项目需求，项目中需要实现一个WebSSH连接终端的功能，由于自己第一次做这类型功能，所以首先上了GitHub找了找有没有现成的轮子可以拿来直接用，当时看到了很多这方面的项目，例如：GateOne、webssh、shellinabox等，这些项目都可以很好地实现webssh的功能。 但是最终并没有采用，原因是在于这些底层大都是python写的，需要依赖很多文件，自己用的时候可以使用这种方案，快捷省事，但是做到项目中供用户使用时，总不能要求用户做到服务器中必须包含这些底层依赖，这显然不太合理，所以我决定自己动手写一个WebSSH的功能，并且作为一个独立的项目开源出来。 github项目开源地址：https://github.com/NoCortY/WebSSH 技术选型 由于webssh需要实时数据交互，所以会选用长连接的WebSocket，为了开发的方便，框架选用SpringBoot，另外还自己了解了Java用户连接ssh的jsch和实现前端shell页面的xterm.js. 所以， 最终的技术选型就是 SpringBoot+Websocket+jsch+xterm.js 。 导入依赖 < parent > < groupId > org

某厂面试归来，发现自己落伍了！>>> 幕后的gulp：构建一个基于流的任务自动化工具 /** * 谨献给Yoyo * * 原文出处：https://www.toptal.com/nodejs/gulp-under-the-hood * @author dogstar.huang <chanzonghuang@gmail.com> 2016-05-14 */ 前端开发人员现在正在使用多种工具把日常操作自动化。三个最流行的解决方案是Grunt，Gulp和Webpack。每个工具都建立在不同的理念，但是它们共享同一个目标：精简前端构建过程。例如，Grunt是配置驱动的，而Gulp几乎不需要配置即可执行。事实上，Gulp依赖于开发人员编写代码来实现构建流程 - 各种构建任务。 当谈到选择这些工具之一时，我个人最喜欢的是Gulp。总而言之，这是一个简单，快速和可靠的解决方案。在这篇文章中，我们将看到幕后的Gulp是如何工作，通过花点心思在实现我们自己的像Gulp这样的工具。 Gulp API 接口 Gulp自带的只有 四个简单的功能 ： gulp.task gulp.src gulp.dest gulp.watch 这四个简单的功能，通过各种组合提供了Glup全部的强悍和灵活性。在4.0版本中，Gulp引入了两个新的功能：gulp.series和gulp.parallel

「前端，有发展“钱”途」 前端发展随着互联网大时代如火如荼的进行着，Web前端技术依靠其自身在页面交互效果上强大的功能属性受到了众多企业的青睐。这不仅是在北上广，很多一二线城市都是如此。 无论是你使用的智能手机，还是iPad，还是pc电脑等等，前台的页面样式都需要前端开发工程师来编写实现，也因此市场上的移动应用Web前端岗位空缺有增无减，专业的Web前端工程师供不应求，前景广阔。 所以学好前端，是有前景可图的。 姑且不论BAT大厂校招时十几K的月薪，在广州普通的互联网公司前端程序员月薪七八千也是正常的。 因此大家其实并不太需要担心web前端开发的就业前景和工资待遇，需要在意的是自身水平够不够格。 「找工作，得有本事」 首先如果你不是小白，你是正准备找工作的应届生，那么你需要一个自我评估。 打开当前众人皆知的招聘网站进行职位查询，根据自身情况设置塞选。然后点进你想去的岗位，看看任职要求。 就比如：（资料来源于boss直聘） 1.设置塞选 ———————————————— 条条款款，一看便知。 少什么差什么，就去补什么学什么。 你完全可以通过类如CSDN,GitHub等开源知识分享圣地，多去取经。 你也可以通过购买进阶类书籍为自己的专业知识充电等等。 并且一定要勤于动手，学到的知识点要运用到实处。 编程学习都是这样的过程，代码量还是要有的，而且在过程中也会出现一些预知外的错误

　本人敲了3年的代码，途中去学校教书了教了一年的计算机基础，但是最终还是选择的程序员这条路。一年不见代码，还是对代码生疏了许多。开个微博园，分享一下一些心得与代码知识，一则为了巩固我新学的知识，一则为了方便我写笔记。主要是为了我自己，其次是分享交流。 　　本主题是说怎么成为一个web前端开发工程师，怎么成为一名优秀web开发人员我也没有资格去说，等到了大神级别再讨论吧。 　　对于刚开始学的人来说，web 就是 HTML+CSS+JavaScript 其实我们是可以这样理解的。web工程师负责或参与Web产品的页面开发，包含PC端、移动APP内嵌移动端、微信小程序、webapp等移动端页面的开发。 　　HTML 定义网页的内容 。HTML是超文本标记语言（包括文字、图形、动画、声音、表格、链接等）可以把我们想要放的内容都放在页面中展示出来。最新的版本为HTML5 　　 CSS 规定网页的布局。 HTML虽然可以展示所有的内容，但是他们的排列和布局并不是我们想要的，想要美化页面，就必须加上css。如果有了CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，拥有对网页对象和模型样式编辑的能力。css相当于我们可以对HTML的标签进行修饰美化,我们需要的是掌握HTML的标签运用、排版技巧、CSS的布局定位、款式美化、浏览器兼容性。最新的版本为css3。 　

很多开发人员在使用jquery在前端和服务器端进行数据交互，所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开 发时，因为要和第三方公司的一个项目进行数据的共享，因为考虑多不占用服务器的资源，遂决定直接在html进行数据的读取，不走服务器端进行中转了。然后 正好就遇到了浏览器端跨域访问的问题。 跨域的安全限制都是指浏览器端来说的，服务器端不存在跨域安全限制的问题。 目前浏览器端跨域访问常用的两种方法有两种： 1、通过jQuery的ajax进行跨域，这其实是采用的jsonp的方式来实现的。 jsonp是英文json with padding的缩写。它允许在服务器端生成script tags至返回至客户端，也就是动态生成javascript标签，通过javascript callback的形式实现数据读取。 html页面端示例代码： 01 //首先要引入jquery的js包 02 jQuery(document).ready( function (){ 03 $.ajax({ 04 type : "get" , //jquey是不支持post方式跨域的 05 async: false , 06 url : " http://api.taobao.com/apitools/ajax_props.do " , //跨域请求的URL 07 dataType :

下面就来说说切图这点事儿吧. 一:图片怎么切? 1.切片: 　　先啰嗦一下几个基础概念.切片:制图软件或网页制作软件中,把图像切成几部分,一片一片晚上传,这样上传的速度比较快.切片工具主要是用来将大图片分解为几张小图片，这个功能用在网页中比较多，因为现在的网页中图文并茂，也正因如此打开一个网页所须的时间就比较长，为了不让浏览网页的人等等时间太长，所以他们将图片切为几个小的来组成。 切图原则: a.先总体,再局部.即先划分模块,再把大切片划分成小切片. a.从大小来说,如果背景图比较大,那么尽量把背景图切片,一张切片控制在100kb以内. c.从颜色来说,尽量把同样的颜色的分一块,这样可以让图片体积更小; 光说太抽象了,就以我最近做得" 鹿鼎记 "页面为例吧.(大家可以点击"鹿鼎记"的链接查看真实的效果); 效果是这样(截取上半部分) 这么大张图片,一定得切.切得时候"先总体,再局部",就是说先把大的布局或模块确定下来,再到具体的模块里面去细分.像下面,我就先把这张大图分解成三个部分. 2.保存 : jpgORpng? 保存的时候记住不是选择"保存',而是选择"存储成Web所需的格式",之后进入设置图片参数和格式的窗口,你可以设置把图片的保存成"gif/png/jpg",格式,很多人提倡说png格式怎么好,但是要注意,如果你的色彩是很丰富的那种,那保存成"jpg"格式,同一张图片只有

一.jQuery介绍 　　1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库 　　2.jQuery使用户能够方便的处理HTML Document,Events,实现动画效果,方便的进行Ajax交互,能够极大地简化JavaScript编程,它的宗旨是:Write less,do more. 二.jQuery优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫