前端点滴（jQuery）（一）

一、jQuery概述

1. 什么是 jQuery

jQuery是一个js框架。封装了很多实用的方法，基本解决了浏览器的兼容问题。

框架类似于现实生活中的毛坯房。比如说做一个项目好比盖一座房子。

2. jQuery 特点

write less, do more. 写的更少，做的更多。

1．语法简练、语义易懂、学习快速、文档丰富。

2．jQuery 是一个轻量级的脚本，其代码非常小巧。

3．jQuery 支持 CSS1~CSS3 定义的属性和选择器

4．jQuery 是兼容浏览器的，它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。

5．能将 JavaScript (行为)脚本与 HTML (结构)源代码完全分离，便于后期编辑和维护。

6．插件丰富，除了 jQuery自身带有的一些特效外，可以通过插件实现更多功能

3. 网站

官方地址为：http://jquery.com/

下载地址：http://www.jq22.com/jquery-info122 该网站内有很多插件的链接

最新版在线手册手册：http://jquery.cuishifeng.cn/

中文社区：http://jquery.org.cn/

4. 其他类型的框架

• Prototype：与面向对象的原型继承关键字prototype一致，该框架的特点是功能扩展比较容易。

• YUI：该框架可以实现各种页面布局效果。

• Extjs : 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。

• 该框架可以实现效果之一：页面不同区域进行拖拽效果。由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。

• Mootools框架，一款短小精悍的框架，完全采用面向对象的思想进行封装，采用很多流行的技术，核心代码只有8kb，是一款非常好用的JS框架。

• jQuery：使用前期，jquery侧重快速找到页面上各种节点。

  后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。jQuery官方也提供了很多比较有效或有针对性的插件比如有jQueryUI、jQuery Mobile插件等。

二、jQuery 快速入门

1. 引入jquery文件：

下载：

1. 浏览器打开jquery官网进行下载。http://jquery.com/

2. 使用 jq22 库文件下载jquery。

引入jquery文件

1. 引入cdn 。https://www.bootcdn.cn/jquery/
   

2. 引入已经下载好的jquery文件
   

2. 使用jquery，jquery基本语法

页面加载完毕，设置页面中的li标签的样式，要求字体颜色为red，背景颜色为#ccffcc。

<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>

//使用js操作DOM
window.onload = function(){
    var lis = document.getElementsByTagName('li');
    for(var i in lis){
        lis[i].style.color = 'red';
        lis[i].style.backgroundColor = '#ccffcc';
    }
}

//使用jquery操作DOM
$(document).ready(function(){
    //jQuery可以进行链式操作，对同一元素的设置可以写一行代码，如下：
  	$('li').css('color','red').css('background-color','#ccffcc');
})
/**
*说明：
*$()是jQuery的一个函数，参数可以是一个dom对象，可以是选择器，也可以是标签。返回jQuery对象
*$(document)返回一个jQuery对象，表示整个文档
*ready()是jQuery封装好的一个事件，表示页面加载完毕会触发的一个事件，它是参数是一个函数，表示事件处理函数
*css()是jQuery封装的一个方法，填一个参数，表示获取元素的css；填两个参数表示设置元素的css,注意：样式名称和css样式名称完全一致，不用去掉下划线和字母变大写
*/

//简洁写法
$(function(){
  	$('li').css('color','red').css('background-color','#ccffcc');
})

3. 常用的 jQuery 事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click（点击事件）	keypress（键盘按下事件）	submit（发送表单事件）	load（加载事件）
dblclick（双重点击事件）	keydown（键盘按下事件）	change（发生改变事件）	resize（窗口大小事件）
mouseenter（鼠标移入事件）	keyup（键盘弹起事件）	focus（聚焦事件）	scroll（窗口滚动事件）
mouseleave（鼠标移出事件）		blur（失焦事件）	unload（离开页面事件）（废除）
mouseover（鼠标移入事件）			ready（加载完成事件）
hover（鼠标移入移出事件）

注意： keypress,keydown,keyup的区别:

1. keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码。

2. keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。

3. keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码。

注意： mouseover与mouseenter的区别：

mouseover 与mouseenter不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。但是只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

4. 获取事件对象

方法与JavaScript相同；

//比如说获取表单键盘事件对象
input.keyup(function(evt){
    //在jQuery中使用which来代替keyCode
    var keyCode = evt.which;
    //...
})

三、修改可编辑表格案例

可编辑表格的JavaScript案例：

https://blog.csdn.net/Errrl/article/details/103935925

使用jQuery修改编辑表格案例：

<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>唐僧</td>
    </tr>
    <tr>
        <td>2</td>
        <td>悟空</td>
    </tr>
    <tr>
        <td>3</td>
        <td>八戒</td>
    </tr>
    <tr>
        <td>4</td>
        <td>沙僧</td>
    </tr>
    <tr>
        <td>5</td>
        <td>白龙马</td>
    </tr>
    <tr>
        <td>6</td>
        <td>金箍棒</td>
    </tr>
    </tbody>
</table>

<style>
        *{
            margin:0;
            padding:0;
            border:0 none;
        }
        table,th,td{
            border:solid 1px #1b272e;
            border-collapse: collapse; /*合并边框*/
        }
        table{
            width:400px;
            margin:10px auto; /*左右居中对齐*/
        }
        th,td{
            width:50%;
            padding:3px;
        }
</style>

$(function(){
    /* 获取姓名td，绑定点击事件 */
    //1. 选择每一个tr下的最后一个td
    // $('tr td:last-child')
    //2.选择奇数td，下标从0开始
    // $('td:odd')
    //3.选择tr中的第二个td，下标从1开始
    // $('td:nth-child(2/2n)')
    $('td:odd').click(function(){
        //保存td
        var td = $(this);
        //判断td中是否存在input，存在就不进行重建
        if(td.children().length>=1){
            return false;
        }
        //操作input
        //保存td中的文本信息
        var text = td.text();
        //清空td，创建input
        td.html('');
        var input = $('<input/>');//注意 ：一定要是闭合标签
        //设置input,链式操作
        input
        .val(text)
        .css('width',td.css('width'))
        .css('height',td.css('height'))
        .css('font-size',td.css('font-size'))
        .css('outline','0')
        .appendTo(td)
        .focus();//链子结束可加;
        
        //绑定键盘事件
        input.keyup(function(evt){
            var keyCode = evt.which;//在jQuery中使用which来代替keyCode
            if(keyCode == 13){
                td.text($(this).val());
            }
            if(keyCode == 27){
                td.text(text);
            }
        });
    });
});

效果：

案例总结

1.选择器

选择器一定要写到$()函数中，写法基本上和css选择器一样。

除了常规的标签选择器（Element）、类选择器（class）、ID选择器（id）、子代选择器外。增设表单选择器、以及一些基本的筛选器。

表单选择器

• :input
• :text
• :password
• :radio
• :checkbox
• :submit
• :image
• :reset
• :button
• :file

筛选器

• :first
• :not(selector)
• :even
• :odd
• :eq(index)
• :gt(index)
• :last
• :lt(index)
• :header
• :animated
• :root

2.事件绑定

$('选择器').事件方法(function(evt){
	//这就是jQuery中事件的绑定方式
});

3.html代码/文本/值/css

css()：一个参数，表示获取元素的css；两个参数表示设置元素的css。语法：css(name|pro|[,val|fn\])

html()：0个参数，表示获取元素的html内容；1个参数表示设置元素的html内容。语法：$('选择器').html()

text()：0个参数，表示获取元素的文本内容；1个参数表示设置元素的文本内容。语法：$('选择器').text()

val()：0个参数，表示获取元素的value值；1个参数表示设置元素的value值，专门用于表单项。语法：$('选择器').val()

4.which属性

针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。

event.which 将 event.keyCode 和 event.charCode 标准化了。

详情： eve.which

四、纵向导航菜单

点击页面中的顶级菜单，会下拉它的子菜单。

首先要找到顶级菜单，然后绑定单击事件，点击顶级菜单的时候，让其对应的子菜单慢慢滑动下来；再次点击顶级菜单，其对应的子菜单慢慢滑动隐藏。

<ul>
    <li>
        <a href="#">顶级菜单一</a>
        <ul>
            <li>子菜单11</li>
            <li>子菜单12</li>
            <li>子菜单13</li>
        </ul>
    </li>
    <li>
        <a href="#">顶级菜单二</a>
        <ul>
            <li>子菜单21</li>
            <li>子菜单22</li>
            <li>子菜单23</li>
        </ul>
    </li>
    <li>
        <a href="#">顶级菜单三</a>
        <ul>
            <li>子菜单31</li>
            <li>子菜单32</li>
            <li>子菜单33</li>
        </ul>
    </li>
</ul>

*{
    margin:0;
    padding:0;
    border:0 none;
}
ul,li{
    list-style: none;
}
/*顶级菜单*/
a{
    display: block;
    width:120px;
    height:30px;
    line-height: 30px;
    text-decoration: none;
    background-color: rgb(23, 199, 90);
    color:white;
}

/*子菜单*/
ul ul>li{
    width:120px;
    height:30px;
    line-height: 30px;
    background-color: rgb(35, 218, 218)
    color: rgb(255, 0, 157);
}
/*默认子菜单隐藏*/
ul ul{
    display: none;
}

版本一：

/* 使用动态效果show&&hide */
$(function(){
    $('a').click(function(){
    	//同一级别的 ul 添加动态效果
        //获取 ul
        //$(this).next()
         if($(this).next().css('display')=='none'){
           $(this).next().show(1000); 
        }else{
            $(this).next().hide(800);
        }
    }
})

版本二：

/* 使用动态效果slideDown&&slideUp */
$(function(){
    $('a').click(function(){
        if($(this).next().css('display')=='none'){
         	$(this).next().slideDown(1000); 
        }else{
            $(this).next().slideUp(800);
        }
    }
})

版本三：

/* 使用动态效果toggle */
$(function(){
    $('a').click(function(){
        $(this).next().toggle(1000);
    }
})

版本四：

/* 使用动态效果slideToggle */
$(function(){
    //获取所有一级菜单，绑定事件
    $('a').click(function(){
        $(this).next().slideToggle(1000);
    })
})

效果：

案例总结

1.筛选器

功能：过滤

• eq(index|-index)
• first()
• last()
• hasClass(class)
• filter(expr|obj|ele|fn)
• is(expr|obj|ele|fn)
• map(callback)
• has(expr|ele)
• not(expr|ele|fn)
• slice(start,end)

功能：查找

• children(expr)le
• find(expr|obj|ele)
• next(expr)
• nextAll(expr)
• nextUntil([expr|ele][,fn])
• offsetParent()
• parent(expr)
• parents(expr)
• parentsUntil([expr|ele][,fn])
• prev(expr)
• prevAll(expr)
• prevUntil([expr|ele][,fn])
• siblings(expr)

说明：

• expr：express（表达式）
• ele：element（元素DOM对象）
• fn：function（功能函数）
• callback：function（回调函数）
• index：index（元素下标）

2.动态效果

基本

• [show([s],e],[fn])
• [hide([s],e],[fn])
• [toggle(s],[e],[fn])

滑动

• [slideDown(s],[e],[fn])
• [slideUp([s],e],[fn])
• [slideToggle(s],[e],[fn])

淡入淡出

• [fadeIn(s],[e],[fn])
• [fadeOut(s],[e],[fn])
• [fadeTo([s],[o],[e],[fn])
• [fadeToggle([s],e],[fn])

自定义动画

• [animate([p],s],[e],[fn])

说明：

• s：speed（速度）三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) 。
• e：easing（ 切换效果 ） 用来指定切换效果，默认是"swing"，可用参数"linear" 。
• fn：function（功能函数） 在动画完成时执行的函数，每个元素执行一次。
• o：opacity（透明度）用来指定透明度。

五、横向导航菜单

鼠标放到顶级菜单上，其子菜单滑动显示，鼠标移动到子菜单上，子菜单不能消失；

鼠标离开顶级菜的和子菜单之后，子菜单滑动隐藏；

鼠标必须放到顶级菜单上超过300毫秒，才显示子菜单；

复制上述的 HTML 代码，修改css

*{
    margin:0;
    padding:0;
    border:0 none;
}
ul,li{
    list-style: none;
}
/*顶级菜单*/
a{
    display: block;
    width:120px;
    height:30px;
    line-height: 30px;
    text-decoration: none;
    background-color: rgb(23, 199, 90);
    color:white;
}

/*子菜单*/
ul ul>li{
    width:120px;
    height:30px;
    line-height: 30px;
    background-color: rgb(35, 218, 218)
    color: rgb(255, 0, 157);
}
/*默认子菜单隐藏*/
ul ul{
    display: none;
}
/* 菜单横向显示 */
body>ul>li{
    float:left;
}

版本一：

/* 使用mouseover&&mouseout */
$(function(){
	//由于是鼠标移入移出事件，不能单单绑定在a上，如果只绑定在a上会发生子菜单单无法选中的情况。
	//所以绑定整个li。
	$('body>ul>li').mouseover(function(){
		$(this).children('ul').slideDown;
	})
	$('body>ul>li').mouseout(function(){
		$(this).children('ul').slideUp;
	})
})

//注意：此种效果会发现存在bug，原因就是mouseover的特性，上述有说明。

版本二：

/* 使用mouseenter&&mouseleave */
$(function(){
	$('body>ul>li').mouseenter(function(){
		$(this).children('ul').slideDown;
	})
	$('body>ul>li').mouseleave(function(){
		$(this).children('ul').slideUp;
	})
})

//注意：此种效果虽然解决了mouseover的特性特性问题，但是鼠标滑动过三个一级菜单时，都会显示二级菜单，造成二级菜单显示过快问题

版本三：

/* 使用hover&&定时器setTimeout */
$(function(){
	var timer = null;//定义一个定时器
	$('body>ul>li').hover(fumction(){
		var li = $(this);
    	//鼠标移入满足500ms，其子元素中的ul显示
   		timer = setTimeout(function(){
   			li.children('ul').slideDown(500);
   		}, 300);
	},function(){
		//鼠标离开，其子元素中的ul消失
    	clearTimeout(timer);
  		$(this).children('ul').slideUp(500);
	})
})

BUG 问题的存在与解释

1. BUG1：mouseover && mouseenter

做一个触发次数累加小实验：

<div id="over" style="background-color: aqua; border: solid 1px red;">
    <h1 style="background-color: chocolate;">over</h1>
    <span>0</span>
</div>
<hr>
<div id="enter" style="background-color: #ccc; border: solid 1px green;">
    <h1 style="background-color: aquamarine">enter</h1>
    <span>0</span>
</div>

$(document).ready(function(){
            $('#over').mouseover(function(){
                var old = $(this).children('span').text();
                $(this).children('span').text(parseInt(old) + 1);
            });

            $('#enter').mouseenter(function(){
                var old = $(this).children('span').text();
                $(this).children('span').text(parseInt(old) + 1);
            });
        });

效果：

实验说明：

mouseover 与mouseenter不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。但是只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

2. BUG2：鼠标快速的划来划去，下拉菜单不断显示隐藏

目前的效果，鼠标快速的划来划去，下拉菜单不断显示隐藏。

解决办法是加入定时器，如果真的要显示下拉菜单，需要鼠标悬停300，如果真悬停了300毫秒则显示下拉菜单，如果300毫秒以内，鼠标离开，那么清除定时器，不让显示的代码执行了。

六、标签页效果

点击标签之后，让其对应的内容区显示，同时标签会有一个效果的变化；反之，另外的标签显示默认样式，另外的内容区要隐藏。

<ul>
    <li class="tab">军事</li>
    <li>娱乐</li>
    <li>体育</li>
</ul>
<div class="show">这是军事版块</div>
<div>这是娱乐版块</div>
<div>这是体育版块</div>

*{
    margin:0;
    padding:0;
    border:0 none;
}
ul,li{
    list-style: none;
}

li{
    float:left;
    width:50px;
    height:30px;
    background-color: #999;
    color:#fff;
    line-height: 30px;
    border:solid 1px #fff;
}
div{
    clear: both; /*清除浮动造成的影响*/
    width:200px;
    height:120px;
    background-color: #051c29;
    color:#fff;
    display: none;/*隐藏所有的div*/
}
/*下面单独设置第一个div和第一个li的样式*/
div.show{
    display: block;
}
li.tab{
    background-color: #051c29;
    border: solid 1px #051c29;
}

/* 对应的li对应的div */
/* 遍历li */
$(function(){
    $('li').each(function(i,val){
    	$(val).click(function(){
            $('li').eq(i).addClass('tab').siblings().removeClass('tab');
          $('div').eq(i).addClass('show').siblings().removeClass('show');   
        })
	})
})

效果：

案例总结

1.jQuery属性操作

属性

• attr(name|pro|key,val|fn)
• removeAttr(name)
• prop(n|p|k,v|f)
• removeProp(name)

CSS 类

• addClass(class|fn)
• removeClass([class|fn])
• toggleClass(class|fn[,sw])

2.数组遍历

• each(callback)

写法一：

$('选择器').each(function(i, val){
    //i 表示元素的下标
    //val 每次遍历时的元素
    //其他操作...
});

写法二：

 $.each($('选择器'), function (i, val) {
    //i 表示元素的下标
    //val 每次遍历时的元素
    //其他操作...
 })

jquery.cuishifeng.cn/attr.html)

• removeAttr(name)
• prop(n|p|k,v|f)
• removeProp(name)

CSS 类

• addClass(class|fn)
• removeClass([class|fn])
• toggleClass(class|fn[,sw])

2.数组遍历

• each(callback)

写法一：

$('选择器').each(function(i, val){
    //i 表示元素的下标
    //val 每次遍历时的元素
    //其他操作...
});

写法二：

 $.each($('选择器'), function (i, val) {
    //i 表示元素的下标
    //val 每次遍历时的元素
    //其他操作...
 })