前端基础之Jquery

最新推荐文章于 2023-06-02 16:01:01 发布

m0_45442261

最新推荐文章于 2023-06-02 16:01:01 发布

阅读量352

点赞数

分类专栏： jquery 前端文章标签： jquery

本文链接：https://blog.csdn.net/m0_45442261/article/details/109493751

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

href

清空文本框内容是.txt()【调用该方法赋值内容为“”就可以了】，清空文本框内容及标签的是html(),清空输入框内容是.val()清除元素格式及内容的是.empty()【此时当前输入框结构也会消失】

添加样式，一个样式，属性和值用逗号隔开，小括号，属性加不加双引号均可，属性值必须双引号；如果多个样式，用大括号属性及属性值之间用冒号隔开；多个样式用分号隔开。添加删除类样式必须添加的是自定义的类【此时双引号选中的类选择器不加点】答案D

D错误原因，要么添加样式用css.(“display”,”none”)要么添加类选择器addClass(“a”);【只能添加类选择器，此时不加点】css()是直接对样式的值进行设置，而addClass()是给元素添加类样式。addClass()比css()更加常用，因为使用addClass()添加样式，更加符合W3C规范中“结构与样式分离”的准则

.val()获得属性value的值，在js中标签必须要有value属性；

html() : 获取第一个匹配元素的HTML内容或文本内容。

html(content) : 设置所有匹配元素的HTML内容或文本内容。

text() : 获取所有匹配元素的文本内容。

text (content) : 设置所有匹配元素的文本内容。

val()：获取第一个被选元素的value属性的值。

val(content)：设置所有匹配元素的value属性的值。

css()和addClass()都能改变元素的样式。

1.jquery简介

一个JavaScript框架。简化JS开发

JavaScript框架：【本质上就是一些js文件】，封装了js的原生代码而已

由美国人John Resig于【2006】年创建；jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的【封装】

它的设计思想是write less,do more例如实现隔行变色效果，只需一句关键代码$(“tr:even”).css(“background-color”,"#e8f0f2");

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发【效率】

优势：

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用【隐式迭代】简化编程
丰富的插件支持

链式操作和this

对一个对象进行多重操作，并将操作结果返回给该对象

.next()/.previous () 获得下个元素的操作；

或者选择器后面连续调用多个方法，通过.

ps:也可以利用原生js，选择在方法中的选择器调用方法后分号结束；再使用同一个选择器，此时可以用this代替你要使用的选择器；

使用多个样式属性时可以用花括号包裹，每个属性及值用冒号分隔；属性之间用逗号隔开；

隐式迭代

没有通过循环的方法while，forin ,fori进行循环操作

jquery-3.版本号.js（开发版）	约286KB	完整无压缩版本，主要用于测试、学习和开发
jquery-3.版本号.min.js（发布版）	约94.8KB	经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

添加注释的注意事项

开发阶段	为代码添加注释，可以增加代码的【可读性】，能够让别人很容易的读懂你的代码，便于后期维护
维护阶段	建议把【关键的模块形成开发文档】，便于后期维护，即便后期删除代码注释，也不影响后期维护
产品正式发布	建议【删除注释】，减少文件大小，加快下载速度，提高用户体验

DOM对象和jQuery对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
DOM对象：直接使用JavaScript获取的节点对象
var objDOM=document.getElementById("title"); 
var objHTML=objDOM.innerHTML;  
Query对象：使用jQuery[包装DOM对象后]产生的对象，它能够使用jQuery中的方法
$("#title").html( );
等同于
document.getElementById("title").innerHTML;


DOM对象转化为jQuery对象
【jQuery对象命名一般约定以$开头；在事件中经常使用$(this)，this是触发该事件的对象】
var txtName =document.getElementById("txtName"); 
var $txtName =$(txtName); 

jQuery对象转化为DOM对象
jQuery对象是一个【类似数组】的对象，可以通过[index]的方法得到相应的DOM对象
var $txtName =$ ("#txtName"); 
var txtName =$txtName[0]; 
通过get(index)方法得到相应的DOM对象
var $txtName =$("#txtName");
var txtName =$txtName.get(0);

2.应用场景

访问和操作DOM元素

控制页面样式

对页面事件进行处理

扩展新的jQuery插件

与Ajax技术完美结合

3.jQuery基本语法

3-1使用jQuery弹出提示框

jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者【简化写法】
$(function(){
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {//只能执行一次
    // 执行代码
}




$()jquery的查询选择器  .ready(调用的函数) 准备好了的方法【文档只要加载就执行】

<script>
     $(document).ready(function() {//为页面加载事件的绑定方法
        alert("我欲奔赴沙场征战jQuery，势必攻克之！");
    });
</script>

3-2$(document).ready()与window.onload比较

window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容【加载完毕后】（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构【绘制】完毕后【即刻执行】，可能与DOM元素关联的内容（图片、flash、视频等）【并没有加载完】
编写个数	同一页面【不能】同时编写多个	同一页面能【同时编写多个】
简化写法	无	$(function(){ //执行代码}) ;

3-3jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作
基础语法是：$(selector).action()

工厂函数$()：将DOM对象转化为jQuery对象

“$”等同于“ jQuery ”【使用前需要确保外部引入了js插件】

选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

click()单击事件dbclick()双击事件

【click是jquery事件】

【onclick是js事件】

jquey添加多个样式建议引入css【里面必须是类选择器才能使用addclass()】

引入通用js文件和单独对应HTML的js.

引入js文件的位置必须在头部，因为正文需要用，否则$不能使用

失去焦点和获取焦点事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>原生jQuery</title> 
//简化jquery的方法  $( function(){});
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){//输入时，获得焦点，背景色变为黑色；
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){//失去焦点后，背景色恢复白色；
    $(this).css("background-color","#ffffff");
  });
  
  
  
  上述代码可以优化为【采用链式操作】
  $(document).ready(function(){
  $("input").focus(function(){//输入时，获得焦点，背景色变为黑色；
    $(this).css("background-color","#cccccc");
  }).blur(function(){//失去焦点后，背景色恢复白色；
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

菜鸟教程(runoob.com)

4jQuery基本选择器

包括标签选择器、类选择器、ID选择器、并集选择器和【全局选择器】

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title” )选取所有div、p和拥有class为title的元素
全局选择器	*****	匹配所有元素	*$("" )**选取所有元素

标签选择器根据给定的标签名匹配元素
$(document).ready(function(){
    $("dt").click(function(){
        $("dd").css("display","block"); 
    });
    $("h1").css("color","blue");
})

类选择器根据给定的class匹配元素【多个属性用花括号，属性间用分号隔开】
$(".price").css({"background":"#efefef","padding":"5px"});

ID选择器根据给定的id匹配元素
$("#author").css("color","#083499");

并集选择器用来合并元素集合【使用并集选择器时，尽量把父类写全些，以相同的父类开始】
$(".intro,dt,dd").css("color","#ff0000");

5。jQuery层次选择器

后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻元素之后的同辈元素
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取元素之后所有的同辈元素

后代选择器用来获取元素的后代元素
$(".textRight p").css("color","red");

子选择器用来获取元素的子元素
$(".textRight>p").css("color","red");

相邻选择器用来选取紧邻目标元素的【下一个元素】
 $("h1+p").css(text-decoration","underline"); 

【同辈选择器】用来选取【目标元素之后】的所有同辈元素
$("h1~p").css("text-decoration","underline");

6.jQuery属性选择器【包含属性/等于或不等于属性值/属性值开头，结尾，包含】

[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^=‘en’]" )选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [h r e f$ =’.jpg’]" )选取href属性值以.jpg结尾的元素
*[attribute=value]**	选取给定属性是以【包含】某些值的元素	*$(" [href =‘txt’]" )选取href属性值中含有txt**的元素

属性选择器可以根据是否包含某属性来选取元素
$("#news a[class]").css("background","#c9cbcb");

属性选择器可以根据属性的值来选取元素
$("#news a[class='hot']").css("background","#c9cbcb");
属性选择器可以指定选取【不等于】属性是某个特定值的元素
$("#news a[class!='hot']").css("background","#c9cbcb");

属性选择器可以指定属性值以指定值开头的元素
("#news a[href^='www']").css("background","#c9cbcb");
属性选择器可以指定属性值以指定值结尾的元素
$("#news a[href$='html']").css("background","#c9cbcb");
属性选择器可以指定属性值包含指定值的元素
$("#news a[href*='k2']").css("background","#c9cbcb");

7.过滤选择器【利用伪类选择器；】

通过特定的过滤规则来筛选出所需的元素
主要分类基本过滤选择器；可见性过滤选择器；表单对象过滤选择器；内容过滤选择器、子元素过滤选择器

7-1基本过滤选择器

:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素

:first	选取第一个元素	$(" li:first" )选取所有元素中的第一个元素
:last	选取最后一个元素	$(" li:last" )选取所有元素中的最后一个元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有元素

7-2可见性过滤选择器【通过元素显示状态来选取元素】

:visible	选取所有可见的元素	*$(" : v i s i b l e ") * * * 选取所有可见的元素 * * * $ ("p:visible*").hide();
:hidden	选取所有隐藏的元素	*$(" : h i d d e n ") * * * 选取所有隐藏的元素 * * * $ ("p:hidden*").show();

7-3表单过滤选择器

\1. 可用元素选择器语法： :enabled 获得可用元素

\2. 不可用元素选择器

语法： :disabled 获得不可用元素

\3. 选中选择器

语法： :checked 获得单选/复选框选中的元素

\4. 选中选择器

语法： :selected 获得下拉框选中的元素

8jQuery选择器注意事项

<div id="id#a">aa</div>
<div id="id[2]">cc</div

1.特殊符号的转义
$("#id\\#a");         $("#id\\[2\\]");

9.DOM操作分为三类：

DOM Core：【任何一种】支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color=“green”
JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

9-0DOM的属性操作

\1. 通用属性操作

\1. attr(): 获取/设置元素的属性

\2. removeAttr():删除属性

\3. prop():获取/设置元素的属性

\4. removeProp():删除属性

attr和prop区别？

\1. 如果操作的是元素的【固有属性】，则建议使用prop

\2. 如果操作的是元素【自定义的属性，】则建议使用attr

2. 对class属性操作

\1. addClass():添加class属性值

\2. removeClass():删除class属性值

\3. toggleClass():切换class属性

toggleClass(“one”):

判断如果元素对象上存在class=“one”，则将属性值one删除掉。如果元素对象上不存在class=“one”，则添加

jQuery中的DOM操作

9-1样式操作【设置，获取，追加，移除，切换，是否包含样式】

使用css()为指定的元素设置样式值或获取样式值

css(“属性”,“属性值”) ;//获得一个属性
css({“属性1”:“属性值1”,“属性2”:“属性值2”…}) //获得多个属性

追加样式$(selector).addClass(class);或 $(selector).addClass(class1 class2 … classN);

移除样式$(selector).removeClass(“class”) ;或 $(selector).removeClass("class1 class2 … classN ") ;

切换样式$(selector).toggleClass(class) ;

判断是否包含指定的样式$(selector). hasClass(class);

标签内容操作【见10】

设置单个或多个属性
$(this).css("border","5px solid #f5f5f5");或$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"})
获得属性
css(name)
设置透明度【1完全不透明】
"opacity":"0.5"


追加样式
$(selector).addClass(class);或   $(selector).addClass(class1 class2 … classN);

.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }

$("h2").mouseover(function() {
     $("p").addClass("content border");
});


移除样式
$(selector).removeClass("class") ;或   $(selector).removeClass("class1 class2 … classN ") ;

$("h2").mouseout(function() {
        $("p").removeClass("text content");
});

切换样式
$(selector).toggleClass(class) ;
【模拟了addClass()与removeClass()实现样式切换的过程】

$("h2").click(function() {
    $("p").toggleClass("content  border")
}）；

判断是否包含指定的样式
$(selector). hasClass(class);

$("h2").mouseover(function() {
    if(!$("p").hasClass("content ")){
	$("p").addClass("content ");
	}
});
$("h2").mouseout(function() {
      if($("p").hasClass("content ")) {
	$("p").removeClass("content ");
    }
});

除css()外，还有获取和设置元素高度、宽度等的样式操作方法

css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度 
offset([value])	返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( )	返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position( )	返回第一个匹配元素相对于父元素的位置
scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条顶

9-2内容及Value值操作

val()可以获取或设置元素的value属性值

$(this).val();                //获取元素的value属性值
或     $(this).val(value)     //设置元素value的属性值

9-3节点及节点属性操作

9-3-1查找节点

9-3-2创建节点

工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点

var $newNode=$("<li></li>");
 var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

9-3-3插入节点

元素内部插入子节点

append(content)	*$(A) . a p p e n d (B) * * * 表示将 * * * * B * * * * 追加到 * * * * A * * * * 中 * * * * 如： * * * $ (“ul”).append($newNode1);*
appendTo(content)	*$(A) . a p p e n d T o (B) * * * 表示把 * * * * A * * * * 追加到 * * * * B * * * * 中 * * * * 如： * * * $ newNode1.appendTo(“ul”);*
prepend(content)	*$(A) . p r e p e n d (B) * * * 表示将 * * * * B * * * * 前置插入到 * * * * A * * * * 中 * * * * 如： * * * $ (“ul”). prepend ($newNode1);*
prependTo(content)	*$(A) . p r e p e n d T o (B) * * * 表示将 * * * * A * * * * 前置插入到 * * * * B * * * * 中 * * * * 如： * * * $ newNode1. prependTo (“ul”);*

元素部外插入【同辈】节点

after(content)	*$(A) . a f t e r (B) * * * 表示将 * * * * B * * * * 插入到 * * * * A * * * * 之后 * * * * 如： * * * $ (“ul”).after($newNode1);*
insertAfter(content)	*$(A) . i n s e r t A f t e r (B) * * * 表示将 * * * * A * * * * 插入到 * * * * B * * * * 之后 * * * * 如： * * * $ newNode1.insertAfter(“ul”);*
before(content)	*$(A) . b e f o r e (B) * * * 表示将 * * * * B * * * * 插入至 * * * * A * * * * 之前 * * * * 如： * * * $ (“ul”).before($newNode1);*
insertBefore(content)	*$(A) . i n s e r t B e f o r e (B) * * * 表示将 * * * * A * * * * 插入到 * * * * B * * * * 之前 * * * * 如： * * * $ newNode1.insertBefore(“ul”);*

9-3-4删除节点

remove()：删除整个节点$(selector).remove([expr]);
empty()：清空节点内容  $(selector).empty();
detach()：删除整个节点，保留元素的绑定事件、附加的数据

9-3-5替换节点

replaceWith()【替换部分】和replaceAll()用于替换某个节点【全部替换为】

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);

$($newNode1).replaceAll(".gameList li:eq(2)")

9-3-6复制节点

clone()用于复制某个节点
$(selector).clone([includeEvents]) ;
参数ture或flase, true复制事件处理，flase时反之


$(".gameList li:eq(1)").click(function(){
     $(this).clone(true).appendTo(".gameList");
    })
$(".gameList li:eq(2)").click(function(){
     $(this).clone(false).appendTo(".gameList");
    })

9-0对属性进行操作

用来获取与设置元素属性
$(selector).attr([name]) ;获取属性值
或
$(selector).attr({[name1:value1]…[nameN:valueN]})设置多个属性值
$(".contain img").attr({width:"200",height:"80"});

removeAttr()用来删除元素的属性
$(selector).removeAttr(name) ;
例如$(".contain img").removeAttr("alt");

9-4节点遍历

遍历同辈元素jQuery

可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

next([expr])	用于获取紧邻匹配元素之后的元素$(“li:eq(1)”).next().addClass(“orange”);
prev([expr])	用于获取紧邻匹配元素之前的元素$(“li:eq(1)”).prev().addClass(“orange”);
slibings([expr])	用于获取位于匹配元素【前面和后面的所有同辈元素$(“li:eq(1)”).siblings().addClass(“orange”);

children()方法可以用来获取元素的所有子元素【只包含儿子辈分，不含孙子辈】
$(selector).children([expr]);

ar $section =$("section").children();
alert($section.length);

jQuery中可以遍历前辈元素

parent()：获取元素的父级元素
parents()：元素元素的祖先元素

其他遍历方法：each( ) 、end( )、find( )、eq( )、first( )…

$("li:eq(1)").parent().addClass("orange");
 $("li:eq(1)").parents().addClass("orange");

each( ) ：规定为每个匹配元素规定运行的函数
$(selector).each(function(index,element)) ;
$("img").click(function(){
       $("li").each(function(){
           var str=$(this).text()+"<br>";
           $("section").append(str);
       })
   });

end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");
$(".gameList li:last").css("border","none");

10.标签内容操作和HTML内容操作

语法格式	参数说明	功能描述
html( )	无参数	用于【获取第一个】匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于【设置所有】匹配元素的HTML内容或文本内容
text( )	无参数	用于【获取所有】匹配元素的文本内容
text (content)	content为元素的文本内容	用于【设置所有】匹配元素的文本内容

html()可以对HTML代码进行操作，类似于JS中的innerHTML
$("div.left").html();//获取元素中HTML代码
或
 $("div.left").html("<div class='content'>…</div>");//设置元素中的HTML代码

text()可以获取或设置元素的文本内容
$("div.left").text();//获取元素的文本内容
或
 $("div.left").text("<div class='content'>…</div>");//设置元素中的文本内容

11.网页中的事件

和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现【点击选项卡，切换

】

jQuery事件是对JavaScript事件的封装，常用事件分类
基础事件
鼠标事件；键盘事件；window事件；表单事件
复合事件
鼠标光标悬停；鼠标连续点击

11-0监听机制

事件监听机制：

概念：某些组件被执行了某些操作后，触发某些代码的执行。

事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了

事件源：组件。如：按钮文本输入框…

监听器：代码。

注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

常见的事件：

\1. 点击事件：

\1. onclick：单击事件

\2. ondblclick：双击事件

\2. 焦点事件

\1. onblur：失去焦点

\2. onfocus:元素获得焦点。

\3. 加载事件：

\1. onload：一张页面或一幅图像完成加载。

\4. 鼠标事件：

\1. onmousedown 鼠标按钮被按下。

\2. onmouseup 鼠标按键被松开。

\3. onmousemove 鼠标被移动。

\4. onmouseover 鼠标移到某元素之上。

\5. onmouseout 鼠标从某元素移开。

\5. 键盘事件：

\1. onkeydown 某个键盘按键被按下。

\2. onkeyup 某个键盘按键被松开。

\3. onkeypress 某个键盘按键被按下并松开。

\6. 选择和改变

\1.【 onchange 域的内容被改变。】

\2. onselect 文本被选中。

\7. 表单事件：

\1. onsubmit 确认按钮被点击。

11-1鼠标事件

是当用户在文档上移动或单击鼠标时而产生的事件

使用mouseleave和mouseout；【鼠标离开被选元素时会触发】鼠标在其被选元素的子元素上来回离开时：触发mouseout
使用mouseenter和mouseover；【鼠标进入被选元素时会触发】鼠标在其被选元素的子元素上来回离开时：触发mouseover
mouseover 事件在鼠标移动到选取的【元素及其子元素】上时触发。
mouseenter 事件只在鼠标移动到选取的【元素】上时触发
mouseout 事件在鼠标离开任意一个【子元素及选的元素】时触发。
mouseleave 事件只在鼠标离开选取的的【元素】时触发。

click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

//仿真导航栏鼠标移入移出导航栏的背景颜色
$(".nav-ul a").mouseover(function(){
	$(this).css("background-color","#f01e28");
});
$(".nav-ul a").mouseout(function(){
	$(this).css("background-color","#ff2832");
});



仿真京东固定层设置
制作京东首页右侧的固定层，6个图标：京东会员、购物车、我的关注、我的足迹、我的消息和咨询JIMI
默认状态下仅显示图标，背景颜色为深灰色；当鼠标移至图标上时，背景颜色为深红色，并且显示文本
实现思路
使用列表制作页面内容，使用<span>和<p>分别显示图片和文本内容
使用【index( ) 获取当前鼠标移至元素在列表中的索引值】，使用eq( )获取当前元素所在<li>
使用同辈元素选择器和eq( )选择器获取当前<span>元素的兄弟元素<p>

var index=$("#nav li span").index(this);
$("#nav li:eq("+index+") span~p").show();

11-2键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件

keydown( ) 触发或将函数绑定到指定元素的keydown事件按下键盘时
keyup( ) 触发或将函数绑定到指定元素的keyup事件释放按键时
keypress( ) 触发或将函数绑定到指定元素的keypress事件产生可打印的字符时

【keypress()和keydown()功能类似，如果改变输入框背景颜色时，只会显示keypress()结果】

 以键盘事件为例，实现按键时特效
append( )方法，链式操作
 
 $("[type=password]").keyup(function () {//键盘弹起
	$("#events").append("keyup");
      }).keydown(function (e) {//键盘按下
	$("#events").append("keydown");
      }).keypress(function () {//键盘输入内容
	$("#events").append("keypress");
     });
     
     
$(document).keydown(function (event) {
	 if (event.keyCode == "13") {//回车键时
		alert("确认要提交么？");
	}
});

11-3浏览器事件

调整窗口大小时，完成页面特效 $(selector).resize( );

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>对浏览器窗口大小进行计数</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
x=0;
$(document).ready(function(){
  $(window).resize(function(){
    $("span").text(x+=1);
  });
  $("button").click(function(){
    $(window).resize();
  });
});
</script>
</head>
<body>

<p>窗口重置了 <span>0</span> 次大小。</p>
<button>触发窗口的 resize 事件</button>

11-4绑定与移除事件

移除事件使用unbind()方法事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
unbind([type],[fn])
当unbind()不带参数时，表示移除所绑定的全部事件。通过移除绑定事件可以实现切换内容的效果

绑定【单个事件】使用绑定实现鼠标移至“我的当当”显示二级菜单【下拉菜单】
$(document).ready(function(){
	$(".on").bind("mouseover",function(){
		$(".topDown").show();
	});
});
使用绑定【多个事件】实现“我的当当” 二级菜单的显示和隐藏
$(".top-m .on").bind({
	mouseover:function(){
		$(".topDown").show();
	},
	mouseout:function(){
		$(".topDown").hide();
	}
});



tab切换页面
$("#del").click(function(){
        $("#nav li:first").unbind("click", content1)
});

15复合事件【toggle/hover】

hover( )方法【消失和隐藏的方法】 toggle( )方法[【不同方法之间相互切换】

toggle()方法不带参数，与show( )和hide( )方法作用一样

hover()方法相当于mouseover与mouseout事件的组合
hover(enter,leave);

$(".top-m .on").hover(function(){//光标移入时显示，
	$(".topDown").show();
          },
         function(){//光标移出时触发隐藏特效
	 $(".topDown").hide();


toggle()方法用于模拟鼠标连续click事件
toggle(fn1,fn2,...,fnN);

$("input").toggle(
        function(){$("body").css("background","#ff0000");},
         function(){$("body").css("background","#00ff00");},
          function(){$("body").css("background","#0000ff");}
    )
toggle()方法不带参数，与show( )和hide( )方法作用一样
$("input").click(function(){$("p").toggle();})

toggle( )和toggleClass( )总结
toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

16callback函数

callback 参数，有以下两点说明：【你所需要调用的函数】

1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；

当 callback 函数加上括号时，函数立即执行，只会调用一次，如果不加括号，元素显示或隐藏后调用函数，才会调用多次

2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；

3.callback既可以是函数名，也可以是匿名函数

17.CRUD操作:

append/appendTo prepend/prependto after/insertAfter before/insetBefore

\1. append():父元素将子元素追加到末尾

对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾【添加的在后面】12

\2. prepend():父元素将子元素追加到开头

对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头

\3. appendTo():

对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾【对象本身在后面】21

\4. prependTo()：

对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

\5. after():添加元素到元素后边

对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系

\6. before():添加元素到元素前边

对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系

\7. insertAfter()

对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系

\8. insertBefore()

对象1.insertBefore(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系

\9. remove():移除元素

对象.remove():将对象删除掉

\10. empty():清空元素的所有后代元素。

对象.empty():将对象的后代元素全部清空，但是【保留当前对象以及其属性节点】

18.jQuery动画效果

可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast

18-1控制元素显示与隐藏

show() 控制元素的显示，hide( )控制元素的隐藏；

$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])

18-2改变元素的透明度

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
## jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

**语法:**

$(*selector*).fadeTo(*speed,opacity,callback*);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间，0完全透明，1完全不透明）

18-3改变元素高度

slideDown() 可以使元素逐步延伸显示slideUp()则使元素逐步缩短直至隐藏

$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback])



$(document).ready(function() {
       $("h2").click(function(){
	   $(".txt").slideUp("slow");
	   $(".txt").slideDown("slow");
       });
 });