jQuery笔记

一、jQuery概述

• jQuery由美国人John Resig于2006年创建
• jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
• 它的设计思想是write less,do more

1.1 jQuery能做什么？

• 访问和操作DOM元素
• 控制页面样式
• 对页面事件进行处理
• 扩展新的jQuery插件
• 与Ajax技术完美结合

1.2 jQuery库文件

名称	大小 说 明
jquery-1.版本号.js（开发版）	约268KB 完整无压缩版本，主要用于测试、学习和开发
jquery-1.版本号.min.js（发布版）	约91KB 经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

引入jQuery

1.3 jQuery基本语法

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
    $(document).ready(function(){
        alert('第一个jquery程序');
    });
</script>

1.4 $(document).ready() 与window.onload

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

1.5 Dom模型

浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构

节点对象就被称为DOM对象
节点类型

• 元素节点<h1>……</h1>
• 文本节点<p>此处的文字是文本节点</p>
• 属性节点

1.6 DOM对象和jQuery对象

• DOM对象直接使用JS获取的对象节点如:
  var domEle = document.getElementById(‘one’);
  var objHTML = domEle.innerHTML;
• jQuery对象使用jQuery包装DOM对象后产生的对象，可以使用jQuery中的方法
  $(“#one”).html();

注意: DOM对象与jQuery对象不能混用
DOM转换为jQuery对象：

var domEle = document.getElementById(‘one’);
var $ele = $(domEle);

jQuery转换为DOM对象：

var domEle = $(“#one”).html()[0];
或者
var domEle = $(“#one”).html().get(0);

1.7 jQuery语法结构

$(选择器).方法(); $(selector).action()

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

css代码
.one{
    color: red;
    font-size: 15px;
}

Jquery代码：
$("div").addClass("one");

二 、jQuery选择器

2.1 基本选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	s1,s2……sn	将每个选择器匹配的元素合并	$(“div,p,.title” )选取所有div、p和拥有class为title的元素
交集选择器	Ele.class或ele#id	匹配指定clss或id的某个元素	$(“h2.title”)选取所有拥有class为title的h2元素
全局选贼	*	匹配所有元素	$("*" )选取所有元素

1.标签选择器
例： $(“h1”).css(“backgroud”,”#09F”);
2.类选择器
例：$(“.className”).css(“backgroud”,”#09F”);
3.ID选择器
例：$(“#id”).css(“backgroud”,”#09F);
4.并集选择器(h2,dt,以及 类为 t)
例：$("h2,dt,.t").css("background","#09F");
5.交集选择器 h2并且类是t的风格
例：$("h2.t").css("background","#09F") ;
6.全局选择器
例：$(“*”).css(“color”,”red”);

2.2层次选择器

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

1.后代选择器
$(“#menu span”).css();//获取并设置#menu下所有元素的样式
2.子选择器
$(“#menu>span”).css();//获取并设置#menu下的子元素的样式
3.相邻选择器
$(“h2+dl”).css();//获取设置紧接在<h2>元素后的dl元素样式
4.同辈元素选择器
$(“h2~dl”).css();//获取设置<h2>元素之后所有同辈dl元素样式

2.3属性选择器

语法构成	描述	示例
[attribute]	选取包含给定属性的元素	$(" [href]" )选取含有href属性的元素
[attribute=value]	选取等于给定属性是某个特定值的元素	$(" [href =’#’]" )选取href属性值为“#”的元素
[attribute !=value]	选取不等于给定属性是某个特定值的元素	$(" [href !=’#’]" )选取href属性值不为“#”的元素
[attribute ^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^=‘en’]" )选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$("[href$=’.jpg’]" )选取href属性值以.jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* =‘txt’]" )选取href属性值中含有txt的元素
[selector] [selector2] [selectorN]	选取满足多个条件的复合属性的元素	$(“li[id][title=新闻要点]” )选取含有id属性和title属性为新闻要点的<li>元素

2.4过滤选择器

语法构成	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有<li>元素中的第一个<li>元素
:last	选取最后一个元素	$(" li:last" )选取所有<li>元素中的最后一个<li>元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有<li>元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有<li>元素
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的<li>元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）

基本过滤选择器

语法构成	描述	示例
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素

可见性过滤选择器

语法构成	描述	示例
:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

三、jQuery事件与动画

jQuery事件是对JavaScript事件的封装

3.1 基础事件

• window事件
• 鼠标事件
• 键盘事件
• 表单事件

1.鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouse over事件	鼠标移过时
mouseout( )	触发或将函数绑定到指定元素的mouse out事件	鼠标移出时

利用CSS制作菜单，实现鼠标移过时添加一个颜色，鼠标移出时，移出该颜色
$(document).ready(function(){
    $("li").mouseover(function(){
        $(this).addClass("bg");
    });
    $("li").mouseout(function(){
        $(this).removeClass();
    });
});

2.键盘事件

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

3.表单事件

方法	描述	执行时机
focus( )	触发或将函数绑定到指定元素的focus事件	获得焦点
blur( )	触发或将函数绑定到指定元素的blur事件	失去焦点

4.绑定事件
绑定单个事件与多个事件

$(document).ready(function(){
    $("#one").bind("click",function(){
         $("p span").css({"font-weight":"bold","color":"red"});
    });
    $("#show").bind({
        mouseover:function(){
            $("ul").css("display","block");
        },
        mouseout:function(){
            $("ul").css("display","none");
        }
    });
    $("ul").mouseover(function(){
        $(this).css("display","block");
    });
    $("ul").mouseout(function(){
        $(this).css("display","none");
    });

$("a").live("click",function(){
    $(this).parent().parent().remove();
});
live:可以让新添加的元素也拥有该事件

5.解除绑定

$("ul").unbind();//解除绑定全部事件
$("#one").unbind("click");//解除绑定单个事件

6.复合事件
复合事件是多个事件的组合
hover()方法相当于mouseover与mouseout事件的组合

<script type="text/javascript">
    $(document).ready(function(){
        $("#myaccound").hover(function(){
            $("#menu_1").css("display","block");
        },
        function(){
            $("#menu_1").css("display","none");
        });
    });
</script>

鼠标连续点击
toggle()方法用于模拟鼠标连续click事件

$(document).ready(function(){
    $("[type=button]").toggle(function(){
                $("body").css("background-color","red");
            },
            function(){
                $("body").css("background-color","yellow");
            },
            function(){
                $("body").css("background-color","blue");
            });
});

7.jQuery动画效果
显示及隐藏元素：

$(document).ready(function(){
    $("#show").click(function(){
        $("div").show(2000);
    });
    $("#hidden").click(function(){
        $("div").hide("fast");
    });
});

toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态

$("#togg").click(function(){
    $("div").toggle();
});

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

$("#in").click(function(){
    $("div").fadeIn("slow");
});
$("#out").click(function(){
    $("div").fadeOut(2000);
});

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

$("#down").click(function(){
    $("div").slideDown("slow");
});
$("#up").click(function(){
    $("div").slideUp("slow");
});