波克比的前端优快云博客

写了一个测试demo，记录一下： $(function(){ $('.news_rwz p').each(function(){ var max = 54; if($(this).text().length > max){ $(this).text($(this).text().substring(0,max));

CSS代码：*{ padding: 0; margin: 0;} li{ list-style: none;} a{ text-decoration: none; color: #333;} a:hover{ color: #f00;} .center{ text-align: center; margin-top: 20px; font-family: "Microsoft Yahe

Javascript数组相关对象方法 // splice() //从数组中添加/删除元素，然后返回被删除的元素 // var arr = ['a','b','c','d','e']; // 添加元素 // console.log(arr.splice(1,0,'f')); // console.log(arr); //['a','f','b','c','d','e'] /

1.运动原理Js运动，本质来说，就是让 web 上 DOM 元素动起来。而想要 DOM 动起来，改变其自身的位置属性，比如高宽，左边距，上边距，透明度等。还有一个很重要的前提是，运动的物体必须是绝对定位。window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.oncl

倒计时1： 倒计时 window.onload = function(){ var timer = null; timer = setInterval(countDown,1000); countDown(); function countDown(){ var oTime = document.getElementById('time');

图片倒计时 Document window.onload = function(){ setInterval(fnTime,1000); }; fnTime(); function fnTime(){ var oDiv = document.getElementById('date'); var aImg = document.g

Document window.onload = function(){ setInterval(fnTime,1000); }; fnTime(); function fnTime(){ var oDiv = document.getElementById('date'); var aImg = document.getElementsB

显示当前时间： JS获取当前时间 /* console.log('当期星期：' + iWeek); //当期是星期六 => 6 星期日 => 0 星期一 => 1 星期二 => 2 星期三 => 3 星期四 => 4 星期五 => 5 星期六 => 6 */ window.onload = function(){ setInte

img{ width:150px; height:150px; position:absolute; top:50px; left:300px; } // 封装getStyle函数 function getStyle(obj, attr){ return obj.currentStyle ? o

点击按钮控制div前后运动——函数封装3 #div1{ width: 100px; height: 100px; background: #ccc; position: absolute; left: 30px; top: 50px;} // 封装获取非行间样式函数 function getStyle(obj,attr){ return obj.currentSt

CSS样式：*{ padding: 0; margin: 0;} ul{ list-style: none;} body{ color: #333; font-size: 14px; font-family: "Microsoft Yahei"; background: #fff;} #box li{ padding: 10px; border-bottom: 1px solid #ee

点击按钮控制div前后运动——定时器应用 #div1{ width: 100px; height: 100px; background: #ccc; position: absolute; left: 30px; top: 50px;} // 封装获取非行间样式函数 function getStyle(obj,attr){ return obj.current

//定义一个arr数组var arr = new Array();//向数组的末尾添加一个a元素arr.push('a');//获取所有数组元素//alert(arr); //a//获取数组中的第一个元素【默认从0开始】//alert(arr[0]); //a//获取数组的长度//alert(arr.length); //1//shift：删除原数组的第一项，并

CSS部分：*{ padding: 0; margin: 0;} li{ list-style: none;} .clearfix{ *zoom:1;} .clearfix:after{ clear: both; display: block; content: ""; height: 0; overflow: hidden;} a{ text-decoration: none; co

JS模拟土豆弹窗——链式运动 *{padding: 0; margin: 0;} body{ font-size: 12px; font-family: "微软雅黑"; overflow: hidden;} #foot{ width: 187px; padding-left: 10px; height: 34px; line-height: 34px; background

点击按钮控制div前后运动——函数封装1 #div1{ width: 100px; height: 100px; background: #ccc; position: absolute; left: 30px; top: 50px;} // 封装获取非行间样式函数 function getStyle(obj,attr){ return obj.current

CSS部分：ul { padding:0; margin:0; }li { list-style:none; }body { background:#fff; }.box{ width: 400px; height: 500px;/* margin:0 auto; */ float: left; margin-right: 60px; background:#fff url(img/lo

点击按钮控制div前后运动——函数封装2 #div1{ width: 100px; height: 100px; background: #ccc; position: absolute; left: 30px; top: 50px;} // 封装获取非行间样式函数 function getStyle(obj,attr){ return obj.current

CSS部分：body{ background: #fff; font: 14/1.4 "Microsoft Yahei";} ul{ padding: 0; margin: 0;} li{ list-style: none;} #box{ width: 400px; height: 300px; margin: 0 auto; background: #eee url(img/loade

CSS部分：*{ padding: 0; margin: 0;} li{ list-style: none; font-size: 12px;} a{ text-decoration: none; color: #333;} img{ border: none; vertical-align: top;} .clearfix{ zoom: 1; } .clearfix:after{

CSS部分：*{ padding: 0; margin: 0;} body{ font-size: 12px; color: #333; background: #fff;} li{ list-style: none;} a{ text-decoration: none; color: #333;} #cate{ width: 300px; margin: 40px auto; bor

CSS部分：body,ul{margin:0; padding:0;} .clearfix{zoom:1;} .clearfix:after{display:block; content:""; clear:both; height: 0; overflow: hidden;} li{list-style:none;} a{text-decoration:none;} img{bor

CSS部分：body,h3{margin:0; padding:0;} #grade{width:500px; margin:100px auto;} #grade span{float:left; color:#ff0808; margin-top:9px;} #grade h3{float:left; height:22px; line-height:22px; font-size:

CSS部分：body,ul{margin:0; padding:0;} ul{margin:100px auto 0; width:200px;font-size:12px; background:white;} li{list-style:none; height:30px; line-height:30px; border-bottom:1px solid #fff;} span{f

CSS样式：body{ font-size: 12px; color: #333;} body, ul,h2{ margin:0;padding:0;} li { list-style:none;} a{ color: #333; text-decoration: none;} a:hover{ color: #f00;} #nav { width:100%; border:1p

CSS部分：ul{ margin: 0; padding: 0; } li{ list-style: none; } #ad{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; }

JS基础——自定义属性2window.onload = function(){ var aBtn = document.getElementsByTagName('input'); var arr = ['孙悟空','琪 琪','孙悟饭','孙悟天']; for(var i=0; i<aBtn.length; i++){ aBtn[i].index =0; aBtn[i].o

自定义属性window.onload = function(){ var aBtn = document.getElementsByTagName('input'); for(var i=0; i<aBtn.length; i++){ aBtn[i].index = i; aBtn[i].onclick = function(){ alert('我是第' + this.i

JS基础——两张图来回切换window.onload = function(){ var oImg = document.getElementById('img'); var onOff = true; oImg.onclick = function(){ if(onOff){ oImg.src = 'http://placehold.it/200x200'; onO

10-图片切换综合实例p{ margin:0;}.buttons{ text-align:center; margin-top:20px;}#box{ width:400px; height:300px; border:10px solid #ccc; margin:15px auto; position:relative;}#span1 ,#box a ,#p1 ,#strong1{

JS基础——初探数组//数组var arr = [1, '2', '3' , '小四' ,'伍子胥'];//alert(arr.length); //数组长度//alert(arr[3]); //数组的第三个元素：小四，默认下标从0开始//alert(arr[arr.length-1]); //数组的最后一位 arr.push('我是最后添进来的');for(var i = 0;

js基础——innerHTMLwindow.onload = function(){ var oText = document.getElementById('text'); var oBtn = document.getElementById('btn'); var oP = document.getElementById('p'); oBtn.onclick = functio

JS基础——多张图片循环切换window.onload = function(){ var oImg = document.getElementById('img'); var arr = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg']; var num = 0; oImg.o

JS基础——styleFloat和cssFloat的区别#div1{ width:100px; height:100px; border:1px solid #ccc; background:#f4f4f4;}window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.style.style

JS属性操作1window.onload = function(){ var oText = document.getElementById('text1'); var oSel = document.getElementById('select1'); var oBtn = document.getElementById('btn1'); //读操作：获取、找到 【元素.属性名】

JS——伸缩菜单2ul , h2 { padding:0; margin:0; }li { list-style:none; }#list { width:240px; border:1px solid #ccc; border-top:none; margin:0 auto; }#list h2 { font-size:14px; border-top:1px solid #ccc;

JS——伸缩菜单ul , h2 { padding:0; margin:0; }li { list-style:none; }#list { width:240px; border:1px solid #ccc; border-top:none; margin:0 auto; }#list h2 { font-size:14px; border-top:1px solid #ccc; h

JS——伸缩菜单3ul , h2 { padding:0; margin:0; }li { list-style:none; }#list { width:240px; border:1px solid #ccc; border-top:none; margin:0 auto; }#list h2 { font-size:14px; border-top:1px solid #ccc;

ECMAScript：标准、核心JS中的数据类型：数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义

js基础——图片切换实例ul { padding:0; margin:0; }li { list-style:none; }body { background:#fff; }#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(images/loader_ico.gif) no-repe