JavaScript:删除对象无值的属性

来源

首先是不知道object不知道有什么属性,而需要过滤无值的属性.然后……其他处理.

html

源码

博客有点问题,过几天需要修复一下.

Python:抓取One每天一句话作为随机名言

在很多年前…

我以前看到过不少随机名言,但是碍于当时没有技术不会做,虽然很喜欢.但是也不知道怎么去实现.还好现在技术可以实现,而且也有一个比较好的平台.提供了每天一句话.刚好就用来作名言的数据源了.[地址]

如果要查看效果,可以在页面底部看到相应效果(每次刷新显示的内容都不一样).

还需要…

因为使用了Python的两个库,因此必须安装:requests,BeautifulSoup.这两个库.

安装如下:

安装之后,就可以使用了.

python Logo
image-2482

简单说一下…

首先,这个程序并没有做到非常”智能”,有些地方使用了print(大概是两个地方).因此,你需要自行复制到某个地方,在继续…..

简单说一下核心的一个函数:

没错上面这个就是核心函数了,

  1. 首先使用了for循环对数据进行循环读取(self.start_index,self.end_index分别是开始的期号和结束的期号,可以自己设定,具体要看源码(源码在下面)..).
  2. 定义了一个messagedata的dict,dict的key存的是相应期号,value存的是名言内容.(好像这一句才是第一步…)
  3. 在循环中,动态定义url,并且使用了requests第三方库进行网页的获取网页内容.[关于requests]
  4. 拿到内容之后,基本就放心了.
  5. 然后使用了BeautifulSoup对HTML进行解析,话说……BeautifulSoup是个很神奇,很厉害,很霸气的HTML解析库..(反正,正反就是很厉害)
  6. 使用了Python自带的HTML解析引擎,”html.parser”,也有很多第三方的可选.[关于BeautifulSoup]
  7. 这一句可能是最复杂的,message = (str(soup.select(“.one-cita”)[0].contents[0])).strip(),这一句首先是从soup对象中select了class=”.one-cita”的div的数据(select函数是BeautifulSoup提供的使用HTML的class方式选取内容,这一点就方便了很多,select返回的是list,因此使用了[0]获取第一个,跟着使用contents来获取其中的内容,contents继续返回list,接着继续获取[0]),获取到数据之后,str函数将其转换为str类型,并且使用strip()函数对其特殊符号(比如:\t,\n,空格)这些进行清理.返回一个干干净净的文本..OYeah.
  8. 然后就是将期号作为key,名言内容作为value放到dict里面.
  9. 说完了.

源码

源码使用如下:

必须安装requests和BeautifulSoup这两个库,否则..运行不了.

使用步骤如下:

懒得写了,直接看源码里面的吧.

另外,我已经生成了一个了.可以直接用的.

调用方式,将下面的内容保存成mingyan.js,然后在页面中创建一个<p id=”showMingyan”></p>,然后使用js:$(“#showMingYan”).html(getMingYanHref());进行调用即可.

到此.

jQuery:各种提交方式

之前遇到的一个问题

之前遇到过这样一个问题:需要在弹窗里面提交表单,然后在表单提交完之后需要关闭弹窗并刷新当前页面(弹窗里面是iFrame).最早的时候,我是这样处理的:在点击弹窗按钮之后,设置一个setTimeout对弹窗进行关闭.这样就导致了一个问题——有时候弹窗里面的还没处理完,弹窗就关闭了,导致事务失败.数据也就提交失败.

后来换了一种方式对数据提交进行处理(上面那种方式,在提交之后会闪现一个页面[可能是空白页,也可能是其它设置的返回页面,但是在数据很少的情况下,是可以提交成功的]):使用Ajax提交相关数据,然后在success函数里面处理弹窗的关闭与刷新当前页面.

jQuery LOGO
image-2476

看下代码.

源码

下面这段代码就是处理上述问题的(下面这段代码不能提交文件!!!).

经过修改之后,发现效果奇好无比.简直无与伦比的完美……(话说这不是用来形容妹子的么..)

然后,提交文件可以参考下面这种方式(同样是ajax方式).

下面这种方式,必须引入jquery.form.js,不然无法提交

注意,如果直接使用$(“#registerForm”).submit();来提交表单,都是会刷新页面的.要达到页面不刷新,就只能用ajax方式提交数据.

比如,需要在提交成功之后,显示一个弹窗,可以像下面这样去实现:

如上即可.

jQuery:对上传文件进行操作

得来..

其实是从昨天的问题引申而来,因为昨天的例子只判断了文件选择是否为空.在当前网络环境下,这显然是不行的…于是今天对代码进行了整理.增加了[文件大小]、[文件后缀]的判断.

对于JavaScript的File的操作,可以参考:地址

html

源码

注意:如果在页面中直接引入iframe,必须给其css设置height属性,否则将影响后面内容的展示.iframe标签不能简写:错误的[<iframe />]!正确写法:[<iframe>lt;/iframe>]

下面是完整文件,上面一部分则是单独判断的函数:

到此.

IWarn:第一个Chrome扩展应用

第一个Chrome应用

她有以下特点:

  1. 大部分代码,使用最新ES6标准编写(因此仅保证支持最新版Chrome浏览器)
  2. 结构化代码,清晰可描述
  3. 使用HTML5中的LocalStorage存储您的数据
  4. 代码简单、开源,可按照需要修改成您自己的扩展
  5. 大概就上面这几个…

上个图…

IWarn效果.
image-2451

嗯~实现了大概就是上面这个样子…

我为什么要了解Chrome扩展?

Chrome扩展可以直接调用Chrome浏览器提供的API(官网),可无障碍操作网页内容以及提示用户等等。

如果安装过百度翻译扩展(官网),就会明白其对网页内容进行划词翻译是如何实现的了.

当你想做一些事情来方便自己,就可以了解一下Chrome扩展开发了.

上面其实是废话…

IWarn简单说下

每一个Chrome扩展,都一定会有一个文件(manifest.json),这个文件相当于一个清单文件.它会告诉Chrome你使用了什么权限,引用了那些资源,叫什么名字等等.

好了,大概就是上面酱紫.

更多可以看下官网的定义(Google官方,360中文翻译).

因国内很多浏览器已经改用Google内核进行开发,所以开发的Chrome扩展可以直接应用于国内部分浏览器(360极速是其中之一).

对于新动向,建议关注官方文档.

上面是驻留后台的JavaScript文件,其中的chrome.runtime.onMessage.addListener是用于监听来自content.js的请求.然后去LocalStorage中查询相关数据并返回(关于LocalStorage).

简单介绍如上..更多可以看源码.

关于ES6

开发这个扩展的时候,Chrome已经支持大部分ES6标准的新特性.

因此……..我果断选择了ES6进行开发,简单介绍如下:

ES6:定义变量

ES6之前:

ES6:

函数定义

ES6之前:

ES6:

更多的ES6新标准,可以参考:ES6中文翻译

源码

已将所有文件都开源了.可以访问Github进行下载.(地址)

如需帮助可通过上述网页中的邮件地址联系我..

这段时间…

看各种乱七八糟的,随便看.偶然看到Chrome扩展,就想起要不写一个吧.花了几天时间写出来了,并且进行了十分详细的注释.然后扔到Github.继续去学各种乱七八糟的了..

加油.

不忘初心,方得始终.