应该存在着一类人:

1.看到美丽的网站时,就会F12,看看他是怎么实现的

2.看到网站数据是自己需要的时候,就会F12,看看他是怎么拿到数据的

3.看到网站一个有趣的模块时,,就会F12,看看他是怎么制作的

看久了,就知道了大概规律

有时不懂,也会去google,baidu一下

---

观察网站,一般是这样的吧:

1.瞎点点,看看有什么特别的东西吸引你的

2.右击查看元素,或F12,去查看元素Dom节点

3.看看效果展示是,Dom节点的变化

4.看看外链和内部的脚本,如果压缩了,就用解压工具解压后看

5.有的网站脚本很长,需要耐心分解,分析

6.对于数据,用network 页查看他的自由,一般会在脚本类型里可以找到数据,也有相应的请求地址,耐心分析一下参数意思即可

7.知道了数据,他的应用很简单

如果是json,先试试可不可以用ajax方法获取,一般跨域不允许,这时只能用服务器去模拟抓取了

如果是script,那就用script标签进行加载,然后用加载完成事件进行后续数据显示操作

8.css方面,F12页面直接看的见

---

跨域请求:

Jquery:

$.getScript(url,success(response,status))

$.getJSON(url,[data],[callback])

---

备注onload事件:(抄来的)

1.script标签:

IE的 script 元素支持onreadystatechange事件,不支持onload事件。

FF的script 元素不支持onreadystatechange事件,只支持onload事件。

如果要在一个<script src="http://xiaogai1010.blog.163.com/blog/xx.js"> 加载完成执行一个操作,FF使用onload事件就行了,IE下则要结合onreadystatechange事件和this.readyState,以 下是IE的一个例子:

<script type="text/javascript" src="http://xiaogai1010.blog.163.com/blog/xx.js" onreadstatechange="if(this.readyState=='load') alert('loaded');"></script>

this.readyState的值为'loaded'或者'complete'都可以表示这个script已经加载完成.

如何结合IE和FF的区别?参考一下jquery的源码:

var script = document.createElement('script');

script.src="http://xiaogai1010.blog.163.com/blog/xx.js";

script.onload = script.onreadystatechange = function(){

if(  ! this.readyState     //这是FF的判断语句,因为ff下没有readyState这人值,IE的readyState肯定有值

|| this.readyState=='loaded' || this.readyState=='complete'   // 这是IE的判断语句

){

alert('loaded');

}

};

注意:readyState是针对IE浏览器,载入完毕的情况是loaded,缓存的情况下可能会出现readyState为complete。所以两个不能少。

2.iframe标签:

对于用js创建的iframe的加载,一定要在其加载完成之后再进行操作,否则会出现问题
(1)在ie中,判断iframe加载完成,用onreadystatechange,但是IE会执行两次,分别是ifr1.readyState == 'interactive'和
ifr1.readyState == 'complete',所以需要判断 redyState=='complete' ;然后再对iframe进行相关的操作;
(2)但是在标准浏览器以及ie9之后,用onload来判断加载的完成。

[经验][JS]如何观察网站,进而模仿的更多相关文章

  1. Restive.js – 轻松让网站变成响应式和自适应

    Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...

  2. Sequence.js - 适合电子商务网站的图片滑块

    Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. ...

  3. Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  4. [转]Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  5. Nodejs学习笔记(十五)—Node.js + Koa2 构建网站简单示例

    前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...

  6. Angular JS + Express JS入门搭建网站

    3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...

  7. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  8. 利用JS实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...

  9. JS 劫持来源网站并做指定跳转

    有时候给网站做流量,免不了要做一些网站劫持的JS跳转,这里贴上一段劫持来源网站的JS跳转方法,很简单 <script> // 获取来源网站 var slyar = document.ref ...

随机推荐

  1. JAVA中关于数组的定义

    前些日子,有网友问:在JAVA中 int[] a 这样定义的数组和 int a[] 定义的数组有什么区别? 当时没有细看,直接回复说,在JAVA中,两者是一样的,没有区别. 回头仔细看时,还是稍有区别 ...

  2. Qt 判断文件是否存在

    包含头文件:<QFileInfo> 代码: QFileInfo file("文件路径"); if(file.exists()==false){文件不存在:}

  3. jdk的设置及安装android studio提示does not point to a valid jvm问题

    设置方法: 我的电脑->属性->高级->环境变量->系统变量中添加以下环境变量: JAVA_HOME值为:安装JDK的目录, 我的为C:\Program Files\Java\ ...

  4. ORA-12170:TNS:连接超时

    本文转自 http://www.cnblogs.com/kerrycode/archive/2012/12/14/2818421.html 1:首先检查网络是否能ping通 2:检查TNS配置(TNS ...

  5. Android 开发框架汇总

    Android 开发框架汇总 时间过的真快,转眼间就要进入到16年的8月了,现在应该是三伏期间,一个字“热”.前端时间整理了一篇“JS前端框架汇总”,然后紧接着又抽时间学习了一下Android开发,在 ...

  6. 网络拥塞控制与NS2仿真

    准备工作: 1. 安装virtual box 虚拟机,并安装虚拟机增强功能,并配制共享文件夹. 共享文件夹自动挂载后的路径为/media/sf_xxx文件夹,xxx为所起的文件名. 解决virtual ...

  7. 发布大幅重构优化的 TouchVG 1.0.2

    发布大幅重构优化的 TouchVG 1.0.2,支持SVG.多模块扩展结构,欢迎评阅改进.提交pull request. https://github.com/rhcad/touchvg 关于 Tou ...

  8. Webkit CSS properties

    Webkit CSS properties -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit- ...

  9. 后端码农谈前端(CSS篇)第二课:CSS的5个来源

    0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

  10. 【转载】利用shell脚本获取一个文件的绝对路径readlink

    转载自:http://os.chinaunix.net/a2007/1118/976/000000976787.shtml #! /bin/bash echo "Path to $(base ...