这些问题概括来讲是这样：动态往 dom 树中插入元素， 然后立刻、马上操作这个元素（比如选择文本框的文本，改变 select 的 index 等）， 普通方式写代码通常不起作用，但是放入 setTimeout...单线程的浏览器， js 引擎和渲染引擎必定是顺序执行 (stack)，比如点击一个按钮，浏览器会先改变按钮的状态（actived，重绘）， 然后才执行 js (js引擎) 。...那么，为什么放入 setTimeout( func, 0 ) 中就可以呢？ 其实答案已经出来了， setTimeout 会等到重绘完成才执行代码，自然无往而不利。...setTimeout 进一步理解 可以更深入的思考： setTimeout( func, 0 ) 是延迟 0ms 执行，也就是立刻执行，但为什么还是在重绘之后呢？ 重绘肯定会超过 0ms 啊！...jQuery 作者 John Resig 的这篇《How JavaScript Timers Work》通俗易懂地阐述了这个问题…… 以下是我对这篇文章的理解： 理解 javasript 定时器的内部机制是必要的
这些问题概括来讲是这样：动态往 dom 树中插入元素， 然后立刻、马上操作这个元素（比如选择文本框的文本，改变 select 的 index 等）， 普通方式写代码通常不起作用，但是放入 setTimeout...单线程的浏览器， js 引擎和渲染引擎必定是顺序执行 (stack)，比如点击一个按钮，浏览器会先改变按钮的状态（actived，重绘）， 然后才执行 js (js引擎) 。...那么，为什么放入 setTimeout( func, 0 ) 中就可以呢？ 其实答案已经出来了， setTimeout 会等到重绘完成才执行代码，自然无往而不利。...setTimeout 进一步理解 可以更深入的思考： setTimeout( func, 0 ) 是延迟 0ms 执行，也就是立刻执行，但为什么还是在重绘之后呢？ 重绘肯定会超过 0ms 啊！...jQuery 作者 John Resig 的这篇《How JavaScript Timers Work》通俗易懂地阐述了这个问题…… 以下是我对这篇文章的理解： ---- 理解 javasript 定时器的内部机制是必要的
，在JQuery发展鼎盛时期为什么会被广泛使用呢？...那为什么GitHub这样的公司都会逐渐把JQuery慢慢剥离呢？...但是我觉得JQuery是不可能完全过时的，JQuery的开发思想是永远不会过时的。JQuery能在前端领域被广泛使用十来年，绝对不是偶然因素。...为何会对我们写代码和封装库起到帮助呢，我可以举个例子给大家看看： 如果我们使用原生JS实现按钮监听，我们可能需要这样： if (button.addEventListener) button.addEventListener...我对技术没有偏见，随着时代的发展，JQuery的市场占有率越来越少，也许有一天真的完全被抛弃。但是它也在不断去除自身的糟粕，而JQuery的精华有些也演化成了Web标准。
这一节涉及到浏览器与服务器的交互，我用到的是php，如果各位看官不会php脚本也没有关系，涉及到的php代码最多10行，重点还是在Jquery上。...具体来说呢？我举个小例子，现在有一个注册表单，要用户填写用户名。.../demo_test.txt'); }) }) 请点击下面的按钮，通过 jQuery AJAX 改变这段文本。... 获得外部的内容 大家可以看到，点击按钮后文本被改变。...'); 也就是请求这个文本文件内容，并将id=test的元素内容改变成请求到的文本。
打开jQuery官网首页：write less,do more 写的少做的更多 为什么要用jQuery？...script标签 js与jQuery代码对比 案例1：点击按钮获取文本框中的值(JS对比jQuery)，如下图 JS版： jQuery版： 先引入jQuery库 jQuery选择器：用来选中元素 ... 我是第二个盒子 然后我们再来看jQuery代码怎么写，首先 我们要找到第一个div然后在修改它的背景色，那么怎么写呢？...现在呢，我想只改变 第一个p 这几个字的颜色，大家来看一下该怎么写？...我们以后统一用：confole.info(sex);然后在页面按F12选中控制台 看输出结果 多选按钮： 多选按钮和单选按钮呢 基本上是一样的，来我们对比着上面的写一下试试。
jQuery01-入门-选择器 目标：jQuery第一次课 入门 和 选择器 重点：选择器 问： 3W1H： What：jQuery是什么？ Why：为什么要学jQuery？...打开jQuery官网首页：write less,do more 写的少做的更多 为什么要用jQuery？...代码就再写一对script标签 1、代码对比 案例1：点击按钮获取文本框中的值(JS对比jQuery)，如下图 JS版： jQuery版： 先引入jQuery库 jQuery选择器：用来选中元素 1.1...现在呢，我想只改变 第一个p 这几个字的颜色，大家来看一下该怎么写？...我们以后统一用：confole.info(sex);然后在页面按F12选中控制台 看输出结果 多选按钮： 多选按钮和单选按钮呢 基本上是一样的，来我们对比着上面的写一下试试。
我和她第二次相识，为什么这么说呢？因为如果有一个人跟你从小就认识，一起玩了很多很多年，突然有一天消失了。...，我这里已经下载过了，直接引入： 然后此时的页面还有点小问题： 就是这个图标的问题，目前是个默认，可以通过引入自己提前准备好的.ico图标文件，来改变： 效果如下：（没错，我直接复制之前vue项目的...可惜的是，bootstrap官方并未给出上传按钮的漂亮样式。如果想强行更改这种上传按钮的样式，需要的代价不会很小，但是考虑到该功能会面向c端全体粉丝，所以尽量做的好看一点。...我决定去jquery之家的平台样式库中碰碰运气：找到了一款还不错的，下载地址：http://down.htmleaf.com/1801/201801241434.zip 注意，下载和本地化二次开发需要一定的前端基础...选择文件后： 然后点击 上传选择的简历 按钮，即可实现触发。不过具体要怎么才能让后台真实的接收到这个简历文件呢？请听下节课分解！
前端框架 不会前端开发的后端不是一个好的后端开发，平时写点小项目可以用得上，先简单了解一下前端这个概念。 前端： HTML（超文本标记语言），CSS（层叠样式表）和JavaScript（脚本语言）。...敲黑板：简单来说就是封装了一部分的函数，简化了原生js的写法，在实际使用时，jQuery对DOM树进行操控，即：首先有一个写好的html页面，再对其修改操作，如写按钮事件函数，点击隐藏，切换，页面跳转等...这个曾经也是现在依然最流行的web前端js库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替，随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jQuery的使用率将会越来越低...我是一名后端开发，刚开始入门时接触js然后jQuery，感觉它更像是一把剪刀，简单而犀利，通常是配合一些框架来完成一些静态页面开发的工作。...因为jQuery的诸多局限性导致前端工程师的发展受到了很多的限制，只能做一些表面性的工作，并不能实现前后端分离开发。 而近期出现的Vue，它给前端带来了无限的可能和改变。
)来设置按钮为不可用状态，使用css("background-color", "#ccc")来改变按钮的背景颜色为灰色。...如果需要给按钮添加文本提示，可以使用attr("title", "按钮已禁用")。...效果演示当您在浏览器中打开包含上述HTML和jQuery代码的页面时，点击“禁用按钮”按钮后，您会发现“点击我”按钮变灰且无法点击，实现了按钮置灰不可用的效果。...特点：当元素被禁用时，其外观通常会发生改变，呈现灰色，并无法触发与鼠标或键盘相关的事件。被禁用的元素不会在表单提交时被包含在表单数据中，也不会被包含在表单中的序列化字符串中。...被禁用的元素仍然会占据页面空间，但不会响应用户的交互行为。4.
JQuery是非常棒的js类库，有丰富的UI库和插件，不过我钟爱他的是他的选择器，感觉其他功能有时跟后台人员距离很远，所以一般我也只使用一下他的选择器。...为什么有这个取消特定函数的方法呢，我们来看下例子，我们会发现，javascript的事件，跟C#的事件如出一辙,事件的绑定是叠加（+=） 而不是覆盖。...，只会执行PayMoney，不会执行Eat，那如果把unbind()放在bind后面的话，这样这个按钮就不会起作用了。...但如果我要去掉绑定的PayMoney方法呢？...我这里取消了绑定，又删除了特定的绑定，为什么还会执行Eat呢？ 其中的原由要看jQuery的类库了，我估计它只删除了通过JQuery绑定的那些事件了，呵呵。 那这时候我们该如何呢？
为什么使用 jQuery 它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器 处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX...比如：网页中的按钮、文本、盒子等等... 6....注意：以下设置的内容是书写代码时标签中的在网页显示文本内容，而不是设置网页上显示的内容。...注意：在代码中的写的等标签不会在页面中显示，而是会在页面中执行，但是获取的文本内容中含有这个 $(选择器).html()：无参数调用方法，获取 DOM 数组第一个dom对象的在网页上显示的文本内容。..." />我是一个按钮 我是一个按钮 我是一个按钮 15.
为什么现在越来越少人用了呢？...，为什么呢？...3.动画 现在CSS3动画技术已经非常的成熟，已经完全可以取代jQuery做的动画，而且还能比jQuery的animate方法实现更复杂的动画，兼容性好，性能消耗小，何乐而不为呢？...相较于jQuery，那是小巧很多的。 二、性能问题： 在原来的开发中，工程师们不会太纠结于性能问题。但是现在不同了，为了提高用户体验，首要的就是解决浏览器绘制所带了的性能问题。...其实Virtual DOM就是对真实DOM节点的描述，通过改变Virtual DOM来以最小变动来改变真实DOM（Virtual DOM不一定真的比jQuery性能更好）。
为什么现在越来越少人用了呢？...，为什么呢？...3.动画 现在CSS3动画技术已经非常的成熟，已经完全可以取代jQuery做的动画，而且还能比jQuery的Animate方法实现更复杂的动画，兼容性好，性能消耗小，何乐而不为呢？...相较于jQuery，那是小巧很多的。 性能问题 在原来的开发中，工程师们不会太纠结于性能问题。但是现在不同了，为了提高用户体现，首要的就是解决浏览器绘制所带了的性能问题。...其实Virtual DOM就是对真实DOM节点的描述，通过改变Virtual DOM来以最小变动来改变真实DOM（Virtual DOM不一定真的比jQuery性能更好）。
jquery ui则是在jquery的基础上对jquery的扩展，是jquery的插件。jquery ui提供了一些常用的界面元素，如对话框，拖动行为，改变大小行为等。...$.each()用于遍历jquery对象，返回的是原来的数组，并不会返回一个新数组。...alt是为图片指定替代文字的属性 alt是在中指定的属性标签，表示图像。 正如我写为替代文本一样，它用于需要文本而不是图像的情况。...相同点：都会使文本框变成只读，不可编辑 ? image disabled属性在将input文本框变成只读不可编辑的同时，还会使文本框变灰，但是readonly不会。...重排(回流)： 当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
表单类型选择器 需求描述：选中表单中的文本框密码框文件框按钮提交按钮重置按钮等，设置其背景为红色 <input type="...需求描述：为<em>按钮</em>添加单击事件，然后再解绑，这时候你在点击<em>按钮</em>看看是不是<em>不会</em>输出信息了 <em>按钮</em> $('button').on('click',function () {...需求描述：当<em>文本</em>框内容<em>改变</em>时，就向控制台输出当前<em>文本</em>框<em>的</em>内容 $(':text').change(function () { console.log($...注意： mouseenter 事件和 mouseover <em>的</em>不同之处是事件<em>的</em>冒泡<em>的</em>方式。 mouseenter 事件只会在绑定它<em>的</em>元素上被调用，<em>而</em><em>不会</em>在后代节点上被触发。...注意： mouseleave 事件和 mouseout <em>的</em>不同之处是事件<em>的</em>冒泡<em>的</em>方式。 mouseleave 事件只会在绑定它<em>的</em>元素上被调用，<em>而</em><em>不会</em>在后代节点上被触发。
有时候进行一些操作的时候，还是感觉 jQuery 比较好用，那么，我们如何在项目中使用 jQuery 呢？这篇博文带你实践。...引用 jQuery 文件 首先呢，jQuery 是提供了 npm 的安装包的。我们的 vue-cli 脚手架，也是支持引入的。...so，明白我为什么不用 npm 安装那种啰嗦的方法了吧~，其实，更多的东西，我们都可以使用这两种方法来引入。因为，这样引入，可以加快打包速度。最佳状态是，打包只打包我们自己的代码。...} } } 这段代码逻辑非常简单，就是点击的时候改变 p 的文字。 将路由配置为 /jq，具体操作不表，不会看前面的文章，或者我的 github 源码。...好，如果你的编辑器配置了代码审查的话，应该报错了。而浏览器里面，也是报错的。
，触发事件 6 select（）:当选中单行文本text或者多行文本areatext时，触发事件 7 submit() :表单提交事件 //focus()和focusin() 的区别...event.pageX/event.pageY 鼠标相对于文件左侧和顶部的位置 //会随着滚动条变化而变化 //screenX/screenY 获取显示器屏幕位置的坐标...//整个屏幕的高度 不会随着滚动条变化而变化 //clientX/clientY 获取相当于页面视口的坐标 //除去上下窗口 不会随着滚动条变化而变化 <script...在mousedown、mouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值（相当于event.button）。...以下是主要的鼠标按钮映射代码对应表 Event.which属性值 对应的鼠标按钮 1 鼠标左健 2 鼠标中健（滚轮键） 3 鼠标右健 6 event.preventDefault() 阻止事件的默认行为
随着前端技术的发展，请求服务器数据的方法早已不局限于ajax、jQuery的ajax方法。各种js库已如雨后春笋一般，蓬勃发展，本文主要想介绍其中的axios和fetch。...在我之前的文章中，介绍过ajax的创建过程，可以移步这次，我们聊聊ajax的创建过程。 当然项目中我们一般没有直接使用原生的ajax，而是使用javascript的各种库，例如jQuery。...不过随着前端技术的快速发展，react、vue框架的兴起，XHR对象都有了替代的方案（fetch）。另外如果为了要使用$.ajax方法，就导入整个jQuery这个大而全的库，也未免显得臃肿了些。...2.2 fetch的优点及需要注意的地方 为什么要使用fetch呢？直接使用jQuery和axios也能满足我们的开发需要。...，而XHR可以； fetch跨域请求时，默认不会带cookie，如果需要带cookie，则要指定:credentials:’include’，例如： var result = fetch(url, {
所以我还是情不自禁腾出一小点功夫要写一个小教程，记录一下我眼中的JQuery，也方便和我一样初学这个框架的同学学习。...jquery是封装了javascript，是为了简化javascript脚本而存在，所以没必要精通javascript，javascript中很多的函数在jquery中都有更简单的替代方式。...一般Jquery的代码都放在这个块里面。$("botton")选择了文档中第一个，也就是按钮。click也是一个事件，表示当该按钮被点击后执行这里面的代码。...改变元素大小 我们可以用Jquery的height()和width()方法改变一个元素的大小。这个工作也可以用css()方法完成。...这个方法就是改变input标签的value属性，也就是改变显示在文本框内的内容。 ---- 是不是有了一种很简单的感觉，比javascript要简便了很多。
引如今，各种互联网的Web应用程序层出不穷，那么如何快速入门，成长为一个优秀的Web开发工作者呢？ 这个问题不容易回答，几乎所有的培训机构都不能清晰地解答。 ...当然点击某个按钮能完成什么等，可以用程序流程图表示出来，流程图还是推荐大家画的，因为这样你对系统的整个脉络会有更加清晰的认识。 ...再回头看看自己的需求和设计是否被实现，你同时还要确保你的程序能够在各种浏览器里都能正确的运行（如果是IE6，我想你还是会纠结一下的，至于为什么？真正做的时候，你就知道了）。 ...如果你是一个追求完美客户体验的人，那么接下来就要花些心思去改变你的Web应用程序去给用户创造更美好的体验了，这个时候依然会用到一些刚才提过的技术，jQuery和Ajax等，如果你选择Asp.NET框架，...，而网页的大小是不固定的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
