JavaScript
文章平均质量分 68
珍妮的小罐君
越努力,越幸运!
展开
-
咱们聊聊【DOM】吧
很长时间以来,我执着于写代码,看代码,不管三七二十一,咚咚咚,几行代码复制粘贴映入眼帘;也许对于我这样的新手来讲,更喜欢看别人的代码,认为别人的就是最好的,看看页面的布局,想想别人重构页面的思路。。。‘做这一行,你要有想法,没想法的人的未来是很糟糕的’,耳边经常有这样如同雷同的话语,而我就是比较喜欢看别人的代码,也许,看着看着,自己的思路也就与别人不一样啦。。。我不是一个好的程序媛,更原创 2017-01-17 21:57:43 · 421 阅读 · 0 评论 -
React--Introducing JSX(JSX简介)
JSX简介看看这个变量声明:const element = Hello, world!;这个有趣的标签语法既不是字符串也不是HTML。它被称为JSX,它是JavaScript的语法扩展。 我们建议使用它与React来描述UI应该是什么样子。 JSX让你想起一个模板语言,但它伴随着JavaScript的全部力量。JSX生成Rea翻译 2017-04-06 10:37:25 · 376 阅读 · 0 评论 -
React--Rendering Elements(渲染元素)
Rendering Elements(渲染元素)元素是React应用程序最小的构建块。元素描述了你想在屏幕上看到什么:const element = h1>Hello, worldh1>;与浏览器DOM元素不同,React元素是纯对象,创建起来很容易。React DOM 负责更新DOM,以匹配React元素。注翻译 2017-04-06 14:34:21 · 763 阅读 · 0 评论 -
如何截取url后面的参数
<!DOCTYPE HTML><html><head><title>js获取url后面的参数</title><meta charset="utf-8" /><script> var params=(function(){ var search=location.search原创 2017-04-27 15:11:42 · 4820 阅读 · 0 评论 -
图片预览效果
最近公司要求做一个控台的项目,其中一个页面需要做到类似图片预览的效果,比如,点击移到某张缩略图,上方可以看到相应的大图片,刚开始想着这个不太好实现,但最终还是做出了效果: Title div.up{ width:350px; height:300px; background:原创 2017-07-03 15:39:31 · 302 阅读 · 0 评论 -
分页实现
效果图如下:功能实现: 1:首先,所有数据全部加载,通过display属性是否显示某一行; 2:其次,需要获取表格中所有行数(num);每页显示多少条数据(psize),我设置的是每页10条,可自定义哟;获取总页数(totalPage);代码如下: #idData,#barcon{width:800px;margi原创 2017-09-05 18:07:44 · 273 阅读 · 0 评论 -
使用formData对象提交表单并上传图片
FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。如果把表单的编码类型设置为: enctype 属性" style="font-size:14px; margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-s原创 2017-09-01 16:44:45 · 6789 阅读 · 0 评论 -
CSS实现表格表头(thead)固定,内容(tbody)滚动
前言 最近在写一个项目,然后要实现表头固定,tbody内容滚动的效果,该项目中没有使用任何插件,并且表格列数蛮多的,刚开始实现起来遇到各种问题,感觉蛮复杂的,后来找到了一种利用transform的方法实现,效果还不错,请看代码~~~~~~————代码————<!DOCTYPE html><html><head> <meta charset="...原创 2018-03-20 10:50:10 · 27011 阅读 · 18 评论 -
hash和hashchange事件
window.location.href和window.locaiton.hash(1)window.location.href 得到的是完整的URL 比如:window.location.href = ' www.baidu.com'(2)window.location.hash 得到的是锚链接 比如:window.location.hash= ' #all'(3...原创 2018-04-17 17:31:02 · 6176 阅读 · 1 评论 -
http 和 websocket
前端时间在做项目的时候遇到这样的一个场景:网页中有一个数据表格,这个数据表格数据表格的内容是从后台读取出来的,但是这些内容会随着时间的变化而变化,有点类似于股票行情。当时我的做法是用setInterval('toPage(1)',1000)来定时执行函数,toPage()方法是通过ajax请求访问服务器,并在成功后拿到后台返回的数据然后去更新页面。但是这种定时的方法有很多不足:(1)频繁的网络请求...原创 2018-04-24 16:28:06 · 330 阅读 · 0 评论 -
添加、删除元素
添加元素:1、先创建空元素:var element=document.createElement("标签名");比如:var ele=document.createElement("a");相当于2、再设置相关属性:比如:a.href="www.baidu.com";a.inne原创 2017-04-19 10:09:13 · 316 阅读 · 0 评论 -
React-Installation(安装)
React比较灵活,可用于各种项目。 可以使用它创建新的APP应用程序,但也可以将其引入到现有的代码库中,而无需重写。用React尝试一下: Hello React! react.min.js"> react-dom.min.js"> babel.min.js"> type="text/babel">翻译 2017-04-05 15:36:05 · 1009 阅读 · 0 评论 -
slice()和splice()方法
定义上:slice()方法用于插入、删除或者替换数组中的元素;splice()方法可以提取字符串中的某个部分,并以新的字符串返回被提取的部分;用法上:slice()方法的参数:slice(start,end)slice()方法在string对象和array对象的用法类似。对于array对象来说,slic原创 2017-04-13 17:21:05 · 964 阅读 · 0 评论 -
js之相册预览效果
最近公司没有太多的项目,自己本身也是小白一枚,这几天就自己用js实现了一些小的功能,一方面想提高自己的js功底,一方面也希望给更多的小白们可以参考一下,一些大神们如果觉得有哪些不足的可以指点迷津哦,在此多谢喽。。。。功能描述:通过点击页面中的某张图片,会以弹框形式来查看当前大图,且大图之间可以来回切换,下方也会有对应的小图可反复点击查看大图和图片描述性的内容;功能实现:原创 2017-02-17 11:10:05 · 1736 阅读 · 0 评论 -
后台伸缩二级菜单
实现后台伸缩二级菜单 li{ list-style:none; } li span{ padding-left: 20px; cursor: pointer; } .open{ background: url("img/minu原创 2017-02-20 14:38:39 · 1095 阅读 · 0 评论 -
咱们聊聊【BOM】吧
平时做项目的时候,遇到了一系列的问题,例如:当浏览器窗口大小改变时,如何判断客户端是手机还是电脑,如何在鼠标滚动到某个位置的时候有动画效果。。。。。。而JavaScript中的BOM,就是提供了一系列的与浏览器窗口进行交互的API:BOM✦ 什么是BOM呢?它是用来访问和操作浏览器窗口的,通过使用BOM,可以移动窗口,改变状态栏的文本等,它虽然没有相关的标准,原创 2017-01-22 14:10:53 · 244 阅读 · 0 评论 -
树形列表
树形列表的展开与收缩 div{float:left; height: 100px; line-height: 100px; } #d1,#d3{ background-color: #ccff00; } #d2{ cursor: pointer; background-color: #ffcc00; }原创 2017-02-21 10:21:37 · 460 阅读 · 0 评论 -
Js实现弹框
功能描述:模态框(Modal Dialogue Box)也可叫做模态对话框,或者对话框,当一个模态框被打开时,用户可以与该对话框进行交互,点击关闭按钮可关闭该模态框!功能实现:1. 页面上有一个按钮,用于打开模态框,模态框默认隐藏;2. 用户点击按钮,可打开模态框;用户点击模态框中的关闭或者点击页面其他地方可关闭该模态框原创 2017-02-16 10:22:10 · 3505 阅读 · 0 评论 -
js实现模糊匹配
功能描述:在搜索框中输入某一个字段,可以查询到相关的内容功能实现:1. 先声明变量用于保存输入框以及表格里面的内容2. 循环遍历遍历表格每一行,查找匹配项3. 判断如果输入框里面的内容跟表格中某个td的内容相似,则表格中的某行就显示,否则隐藏代码实现: <html><head> <style>...原创 2017-02-15 15:20:40 · 8921 阅读 · 1 评论 -
oninput、onchange 和 onpropertyChange 事件
oninput:oninput 事件在用户输入时触发。该事件在或者元素的值发生改变时触发;无论是键盘输入还是鼠标粘贴的改变都能及时监听到变化;提示: 该事件类似于 onchange 事件。不同之处在于: oninput 事件在元素值发生变化时立即触发; onc原创 2017-03-13 14:46:09 · 1050 阅读 · 0 评论 -
React--Components and Props(组件和属性组件)
Components and Props(组件和属性组件)组件允许你将UI拆分为独立的可重用的部分,并孤立地考虑每个部分。从概念上讲,组件就像Javascript函数。它接受任意输入(称为‘props’),并返回React元素,该元素描述了屏幕上应该显示什么内容。Functional and Class Components(函数和类组件)定翻译 2017-04-10 15:03:04 · 1796 阅读 · 0 评论 -
如何获取select下拉框选中的的值呢
<select> 元素(下拉列表)<select>元素用于创建下拉列表;而<option>元素用于定义列表中待选择的选项。列表通常会把首个选项显示为被选选项。提示:<select> 元素是一种表单控件,可用于在表单中接受用户输入。属性:autofocus :下拉列表在页面加载时自动获得焦点,是一个布尔属性;disabled:...原创 2017-03-15 15:06:13 · 88120 阅读 · 8 评论 -
React--初体验
ReactReact 是一个用于构建用户界面的 JAVASCRIPT 库。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React特点:1.声明式设计(Declarative)--React 采用声明式,可以轻松构建应用。React 可以轻松构建交互式UI,为你的应翻译 2017-04-01 17:36:12 · 423 阅读 · 0 评论