jquery实例以及常用jQuery主要功能实现

1、页面分析、规划（页面的目录划分，结构样式分离：创建样式表，js文件以及ico图标）

2、模块化搭建页面结构，编写布局模块样式，公共样式提取

默认样式重置：

body, h1, h2, h3, h4, h5, p, dl, dd, ul, ol, form, input, textarea, th, td, select { margin:0; padding:0;}
em { font-size:normal;}
li {list-style:none;}
a { text-decoration:none;}
img { border:none; vertical-align:top;}
table { border-collapse:collapse;}
input,textarea { outline:none;}
textarea { resize:none; overflow:auto;}
body { font-size:12px; font-family:"微软雅黑";}

公共样式：
.fl { float:left;}
.fr { float:right;}
.clear { zoom:1;}
.clear:after { content:''; display:block; clear:both;}

/* 渐变过渡 */
.gradient {
background:-moz-linear-gradient(top, #FFFFFF, #f8f8f8);
background:-webkit-linear-gradient(top, #FFFFFF, #f8f8f8);
background:-ms-linear-gradient(top, #FFFFFF, #f8f8f8);
background:linear-gradient(top, #FFFFFF, #f8f8f8);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#f8f8f8)";
+background:#f9f9f9;}/*兼容ie6,7*/
/* 三角形 */
.triangle_up, .triangle_down_red, .triangle_down_gray { position:absolute; width:0; height:0; overflow:hidden; border-left:4px solid transparent; border-right:4px solid transparent; }
.triangle_up { border-bottom:4px solid #ca0309; }
.triangle_down_red { border-top:4px solid #ca0309; }
.triangle_down_gray { border-top:4px solid #c4bdbd; }

3、解决IE兼容问题
图片下的间隙问题：解决方案：img{ vertical-align：top；}

ie6下最小高度问题：19px 解决方案：给盒子加上overflow：hidden；

在IE6,7下元素要通过浮动并在一行，就给这行元素都加浮动

png的问题在IE6不兼容，所以需要

<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('.box');
</script>
<![endif]-->

并且引入
<script src="js/jquery-3.2.1.min.js"></script>

主要的功能实现代码：

$(function (){
// 切换搜索框
(function (){
var aLi = $('#menu li');
var oText = $('#search').find('.form .text');
var arrText = [
'例如：南京',
'例如：上海',
'例如：万达',
'例如：苏州',
'例如：杭州'
];
var iNow = 0;

oText.val(arrText[iNow]);

aLi.each(function ( index ){
$(this).click(function (){
aLi.attr('class', 'gradient');
$(this).attr('class', 'active');

iNow = index;

oText.val(arrText[iNow]);
});
});

oText.focus(function (){
if( $(this).val() == arrText[iNow] ) {
$(this).val('');
}
});
oText.blur(function (){
if( $(this).val() == '' ) {
oText.val(arrText[iNow]);
}
});
})();

// update文字弹性滑动
(function (){
var oDiv = $('.update');
var oUl = oDiv.find('ul');
var iH = 0;
var arrData = [
{ 'name':'小心', 'time':4, 'title':'xxxccc', 'url':'#' },
{ 'name':'心畅', 'time':5, 'title':'mmmmmmm', 'url':'#' },
{ 'name':'小萱', 'time':6, 'title':'vvvvvv', 'url':'#' },
{ 'name':'小畅', 'time':7, 'title':'vvvv', 'url':'#' },
{ 'name':'信心', 'time':8, 'title':'bbbbbbb', 'url':'#' },
{ 'name':'心心', 'time':9, 'title':'vvvv', 'url':'http:#' },
{ 'name':'欣欣', 'time':10, 'title':'rrr', 'url':'http:#' },
{ 'name':'鑫鑫', 'time':11, 'title':'gggggggggggg', 'url':'#' }
];
var str = '';
var oBtnUp = $
4000
('#updateUpBtn');
var oBtnDown = $('#updateDownBtn');
var iNow = 0;
var timer = null;

for ( var i=0; i<arrData.length; i++ ) {
str += '<li><a href="'+ arrData[i].url +'"><strong>'+ arrData[i].name +'</strong> <span>'+ arrData[i].time +'分钟前</span> 写了一篇新文章：'+ arrData[i].title +'…</a></li>';
}
oUl.html( str );

iH = oUl.find('li').height();

oBtnUp.click(function (){
doMove(-1);
});
oBtnDown.click(function (){
doMove(1);
});

oDiv.hover(function (){
clearInterval( timer );
}, autoPlay);

function autoPlay() {
timer = setInterval(function () {
doMove(-1);
}, 3500);
}
autoPlay();

function doMove( num ) {
iNow += num;
if ( Math.abs(iNow) > arrData.length-1 ) {
iNow = 0;
}
if ( iNow > 0 ) {
iNow = -(arrData.length-1);
}
oUl.stop().animate({ 'top': iH*iNow }, 2200, 'elasticOut');
}
})();

// options 选项卡切换
(function (){

fnTab( $('.tabNav1'), $('.tabCon1'), 'click' );
fnTab( $('.tabNav2'), $('.tabCon2'), 'click' );
fnTab( $('.tabNav3'), $('.tabCon3'), 'mouseover' );
fnTab( $('.tabNav4'), $('.tabCon4'), 'mouseover' );

function fnTab( oNav, aCon, sEvent ) {
var aElem = oNav.children();
aCon.hide().eq(0).show();

aElem.each(function (index){

$(this).on(sEvent, function (){
aElem.removeClass('active').addClass('gradient');
$(this).removeClass('gradient').addClass('active');
aElem.find('a').attr('class', 'triangle_down_gray');
$(this).find('a').attr('class', 'triangle_down_red');

aCon.hide().eq( index ).show();
});

});
}
})();

// 自动播放的焦点图
(function (){
var oDiv = $('#fade');
var aUlLi = oDiv.find('ul li');
var aOlLi = oDiv.find('ol li');
var oP = oDiv.find('p');
var arr = [ '这是第一张图', '这是第二张图', '这是第三张图' ];
var iNow = 0;
var timer = null;

fnFade();

aOlLi.click(function (){
iNow = $(this).index();
fnFade();
});
oDiv.hover(function (){ clearInterval(timer); }, autoPlay);

function autoPlay() {
timer = setInterval(function () {
iNow++;
iNow%=arr.length;
fnFade();
}, 2000);
}
autoPlay();

function fnFade() {
aUlLi.each(function (i){
if ( i != iNow ) {
aUlLi.eq(i).fadeOut().css('zIndex', 1);
aOlLi.eq(i).removeClass('active');

} else {
aUlLi.eq(i).fadeIn().css('zIndex', 2);
aOlLi.eq(i).addClass('active');
}
});
oP.text(arr[iNow]);
}
})();
});

实现的效果图：