background | 易学教程

博客皮肤

阅读更多关于博客皮肤

页面定制代码:　 body { //background: url(https://images.cnblogs.com/cnblogs_com/TomHe789/1652276/o_2002220059545d70ca19b2f73.jpg) fixed; background-color: white; background-size: 100%; background-repeat: no-repeat; } #home { background:white; opacity: 0.7; } #blogTitle h1 { margin-top: 10px; font-size: 40px; transition: all 1s; } #blogTitle h1:hover{ transform: translateX(70px); } #blogTitle h1:hover a { color: brown; } #blogTitle h2 { font-size: 18px; font-weight:bold; color: brown; float: left; margin-left: 40px; transition: all 1s; } #blogTitle h2:hover { transform: translateX(50px); color:

python之路 jquery

阅读更多关于 python之路 jquery

简介： jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。参考文档： http://jquery.cuishifeng.cn/ 一、导入+简单应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shuaige</title> <style> .r { background-color:red; /* 给标签设置背景颜色为红色*/ } </style> </head> <body> <div id="id_1"> 123 </div> <div class="c1">1</div> <div class="c1">2</div> <div class="c1">3</div>  <script type="text/javascript" src="jquery-1.8.2

jQuery基础知识

阅读更多关于 jQuery基础知识

表单筛选器 :text :password :file :radio :checkbox :submit :reset :button 例子: $(':checkbox') // 找到所有的checkbox 表单对象属性: :enabled :disabled :checked :selected 例子: 找到可用的input标签 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签找到被选中的option: <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的optio 筛选器方法下一个元素: $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") 上一个元素: $("

jquery插件的写法

阅读更多关于 jquery插件的写法

一.JQuery的插件主要分为3种： 1.封装对象方法的插件。如JQuery的parent()方法，appendTo()方法，addClass()方法等。 2.封装全局函数的插件。如JQuery.ajax()，JQuery.trim()方法 3.选择器插件。二.JQuery的插件机制： i.JQuery提供了两个用于扩展JQuery功能的方法，jQuery.fn.extend()方法和jQuery.extend()方法。前者用于扩展前面的提到的第一种插件，后者用于扩展后两种插件。这两个方法都接收一个类型为Object的参数。 ii.所有的对象方法都应附加到jQuery.fn对象上，所有全局函数都应附加到jQuery对象本身上。 iii.在插件内部，this指向JQuery对象。 iv.插件应结尾加分号，避免压缩带来错误。在开头也最好加分号，避免他人的不规范代码给插件带来影响。 v.插件应该返回一个JQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量。三.插件示例： 1.封装JQuery对象方法的插件。下面是一个简单的color插件，主要实现获取和配置元素颜色的功能。首先创建jquery.color.js文件。搭好框架： ;(function($){ })(jQuery); 由于是对JQuery对象方法的扩展，采用jQuery.fn

jQuery 学习笔记之十六评分

阅读更多关于 jQuery 学习笔记之十六评分

单击产品小图片时，上面对应的大图片需要切换，并且大图片的放大镜效果和遮罩效果也必须同时切换。实现这个效果并不难，但为了使程序更加简单，需要为图片使用基于某种规则的命名。例如为小图片命名blue_one_small.jpg ,为大图片命名为blue_one_big.jpg 这样就可以很容易地根据单击的图片(blue_one.jpg)来获取相应的大图片和小图片，代码如下: $(funciton(){ $( ".pro_detail_left ul li img" ).click(function(){ var imgSrc=$( this ).attr( "src" ); var i = imgSrc.subString(i); imgSrc = imgSrc.substring(0,i); var imgsrc_small=imgsrc+ "_small" +unit; var imgsrc_big = imgSrc+ "_big" +unit; $( "#bigImg" ).attr({ "src" :imgSrc_small, "jqimg" :imgsrc_big}); $( "#thickImg" ).attr( "href" ,imgSrc_big); }); )}; 通过lastindex()方法，获取到图片文件名中最后一个 "." 的位置，然后在substring(

jQuery选择器

阅读更多关于 jQuery选择器

1.1 jQuery详细介绍 1.1.1 $问题 a) Js命名归法：下划线、字母、$、数字 b) 但是不能以数字作为开头 jQUery的两个变量：$ 和 jQuery jQuery占用了我们两个变量：$ 和 jQuery 1.1.2 js入口函数跟jQuery入口函数的区别： Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行 jQuery的入口函数是在 html所有标签都加载之后，就回去执行。 1.2 Js创建对象三种方式： var obj = {}; var obj1 = new Object(); var obj2 = Object.create(); 1跟2的区别：推荐使用第一个方式第二种方式存在效率问题，因为要new对象，会涉及到原型查找的问题。 1.3 jQuery基本选择器 1.3.1 回顾CSS选择器 CSS 选择器回顾符号说明用法 #id Id选择器 #id{ color:red; } .class 类选择器 .class{ //} Element 标签选择器 P { //} * 通配符选择器配合其他选择器来使用 , 并集选择器 div,p{} 空格后代选择器 div span{} 选择div下面所有后代的span > 子代选择器 div > span{} + 紧邻选择器 div+p

CSS Image Sprite--网页图片应用处理方式

阅读更多关于 CSS Image Sprite--网页图片应用处理方式

CSS Sprites简介 CSS Sprites在国内很多人叫 css 精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按 byte 计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。 2 CSS Sprites原理 CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。 3 CSS Sprites优缺点利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； CSS Sprites能减少图片的字节

css sprite-网页优化技术

阅读更多关于 css sprite-网页优化技术

引自百度百科一、CSS Sprites简介　　 CSS Sprites在国内很多人叫css 精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。　　加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。二、CSS Sprites原理　　CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。三、CSS Sprites优缺点　　利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；　　CSS

css sprite

阅读更多关于 css sprite

css sprite 编辑目录 1 CSS Sprites简介 2 CSS Sprites原理 3 CSS Sprites优缺点 4 CSS Sprites的使用 5 CSS Sprite的例子 6 CSS Sprites的问题 1 CSS Sprites简介 CSS Sprites在国内很多人叫 css 精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按 byte 计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。 2 CSS Sprites原理 CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。 3 CSS

css sprite实例

阅读更多关于 css sprite实例

css sprite直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。本文章向码农们介绍css sprite使用方法和基本使用实例，需要的码农可以参考一下。一、什么是css sprites css sprites 直译过来就是 CSS精灵。通常被解释为“ CSS图像拼合 ”或“ CSS贴图定位 ”。其实就是通过将多个图片融合到一张图里面，然后通过 CSS background 背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用 css sprites降低图片数量，带来的将是速度的提升。 css sprites是什么通俗解释： CSS Sprites 其实就是把网页中一些背景图片整合拼合成一张图片中，再利用CSS的“ background-image ”，“ background- repeat ”，“ background-position ”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。二、适合与不适合CSS sprites拼合布局 1、适合：一般小图标素材小的图标ico类素材，一般图标很小十多像素几十像素的宽度高度，这种适合拼合成一张图实现sprites

订阅 background