jQuery笔记

一、jQuery的概述：
- 1.jQuery是干什么的呢？
- 2.jQuery基本语法：
- 3.$(document).ready()与window.onload比较
- 4.DOM对象与jQuery对象的互相转换
二、选择器
- 1.基本选择器
- 2.层次选择器
- 3.属性选择器：
- 4.4.过滤选择器
三.事件和动画
- 1.基础事件
- - 鼠标事件：
- 2.键盘事件：
- 3.表单事件
- 4.绑定事件
- 5.复合事件
- 6.动画效果
四、使用jQuery操作DOM
- 1.样式操作
- 2.内容及value属性值操作
- 3.节点操作
- 4.属性操作：

一、jQuery的概述：

前言
jQuery是有美国人John Resig于2006年创建，它是目前最流行的JavaScript程序库，是对JavaScript对象和函数的封装；其设计思想是write less，do more,写的少，实现功能多。

1.jQuery是干什么的呢？

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

2.jQuery基本语法：

第一种语法
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>$(function(){alert("ok");});
</script>

第二种语法
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>jQuery(function(){alert("ok");});
</script>

第三种语法
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>$(document).ready(function(){alert("");};
</script>

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

第四种语法
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>jQuery(document).ready(function(){alert("");};
</script>

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

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	DOM加载过来就执行
编写个数	同一页面不能同时编写多个	同一页面可以编写多个
简化写法	无	$(function(){//代码}）；

5.DOM对象和jQuery对象
￥DOM对象直接使用JS获取的对象节点如：var domEle = document.getElementById(‘one’);
var objHTML = domEle.innerHTML;
￥jQuery对象使用jQuery包装DOM对象后产生的对象，可以使用jQuery中的方法如：
$(‘one’).html();
注意：DOM对象与jQuery对象是不能混用的。

4.DOM对象与jQuery对象的互相转换

使用$()函数进行转换$(DOM)对象
var conELe = document.getElementById('content');//获取dom对象；
var $con = $(conEle);//将dom对象转换为jQuery对象
alert(conEle.html());此处可以使用jQuery的方法；

jQuery转化为DOM
var $conEle = $("#content");//获取jQuery 对象；
var conEle = $conEle.get(0)；//转化；
alert（conEle.innerTHML）;调用dom对象的方法

二、选择器

1.基本选择器

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

2.层次选择器

（1）后代选择器： $ ("#menu span").css();//获取设置#menu下所有span元素的样式；（2）子选择器： $("#menu > span").css();//获取设置#menu下的子元素span的背景颜色；（3）相邻选择器： $（"h1 + dl"）.css();//获取设置紧接在h1元素后的dl元素样式；（4）同辈元素选择器： $（"h1~dl"）.css();//获取设置h1元素之后的所有同辈dl元素样式；

3.属性选择器：

[attribute=value] 选取等于给定属性是某个特定值的元素 [attribute !=value] 选取不等于给定属性是某个特定值的元素 [attribute ^=value] 选取给定属性是以某些特定值开始的元素 [attribute$=value] 选取给定属性是以某些特定值结尾的元素 [attribute*=value] 选取给定属性是以包含某些值的元素

:first 选取第一个元素 $(" li:first" )选取所有

元素中的第一个

元素
:last 选取最后一个元素 $(" li:last" )选取所有

元素中的最后一个

元素
:even 选取索引是偶数的所有元素（index从0开始） $(" li:even" )选取索引是偶数的所有

元素
:odd 选取索引是奇数的所有元素（index从0开始） $(" li:odd" )选取索引是奇数的所有

元素
: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）

4.4.过滤选择器

过滤选择器通过特定的过滤规则来筛选元素 ,
语法特点是使用“:”，如使用$(“li:first”)来选取第一个li元素

1.基本过滤选择器：
：not(selector) 选取出去与给定选择器匹配的元素；如： ( " l i : n o t ( . t h r e e ) " ) 选取的是 c l a s s 不是 t h r e e 的元素；： h e a d e r 选取所有标题元素，如 h 1 h 6 ; 如： ("li:not(.three)")选取的是class不是three的元素；：header 选取所有标题元素，如h1~h6;如： ("li:not(.three)")选取的是class不是three的元素；：header选取所有标题元素，如h1 h6;如：(":header")选取的是网页中所有标题元素；
2.可见性过滤选择器：
：visible 选取所有可见的元素 $(":visible")选取所有可见的元素；
：hidden 选取所有隐藏的元素 $(":hidden")选取的是所有隐藏的元素；

三.事件和动画

概述：jQuery事件是对JavaScript事件的封装，常用分类如下：

1.基础事件

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

鼠标事件：

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

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

2.键盘事件：

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

3.表单事件

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

4.绑定事件

通俗来讲就是绑定单个与多个事件，使用的关键字是bind，live与bind用法相同，但是live可以让新添加的元素拥有该事件；

//单个事件绑定
$(function(){$("one").bind("click",function(){$("p span").css({"font_weight":"bold","color":"yellow")};$("#show").bind({mouseover:function(){//多个绑定；   $("ul").css("display","block");},mouseout:function(){$("ul").css("display","none");}});
$("one").unbind("click");//解除单个绑定；
$("ul").unbind();//解除多个绑定；
});

5.复合事件

它是过个事件组合在一起；

1.鼠标光标悬停：
hover()方法相当于mouseover与mouseout事件的组合；
2.鼠标连续点击事件：
toggle() 方法用于模拟鼠标连续点击事件；

6.动画效果

常用的动画效果有：
控制元素显示与隐藏，
控制元素淡入淡出，
改变元素的高度；

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

toggle()它也能用于切换元素的课件状态；使用如：

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

fadeIn()与fadeOut()可以通过改变元素的透明度实现淡入淡出效果，使用与显示与隐藏相似；
slideDown()可以让元素逐步延伸显示，而slideUp()则是将元素逐步缩短直到隐藏，使用方法同上；

四、使用jQuery操作DOM

1.样式操作

使用css（）为指定的元素设置样式值，有两种语法：1.css(name，value),2.css({name:value,name:value,…}); 追加与移除样式：addClass(“class”)或是多个(“class1 class2…classN”)
removeClass(“style”)或是removeClass(“style1 style2”)
toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
toggleClass(class)

2.内容及value属性值操作

html()可以对HTML代码进行操作，类似于js中的innerHTML，text()获取或是设置元素的文本内容；
无参数则为获取匹配元素的内容，有参数则是为匹配元素进行内容的设置；
val()可以获取或是设置元素的value值；

3.节点操作

创建节点元素：
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
插入子节点：
append(content) ( A ) . a p p e n d ( B ) , (A).append(B), (A).append(B),(B)appendTo(A)即将B加到A中;
prepend(content) ( A ) . p r e p e n d ( B ) , (A).prepend(B), (A).prepend(B),(B).prepend(A)即将B前插到A中；
插入同辈节点，元素外部插入同辈节点
after（content）$(A).after(B),将B插入到A之后；
before： $(A).before(B),将B插入到A之前；
替换节点 replaceWith()和replaceAll()用于替换某个节点
( " u l l i : e q ( 1 ) " ) . r e p l a c e W i t h ( ("ul li:eq(1)").replaceWith( ("ulli:eq(1)").replaceWith(newNode1);
复制节点：
clone()用于复制某个节点（true:指示事件处理函数是会被复制,false:不会赋值）
删除节点
remove()：删除整个节点 (该方法会保留当前jquery对象，该方法会有返回值类型，是该节点)
empty()：清空节点内容

4.属性操作：

attr()用来获取与设置元素属性；
removeAttr()用来删除元素的属性；
节点遍历：
子元素：children()方法可以获取元素的所有子元素；$(“div”).children();
同辈元素：
next 获取紧邻匹配元素之后的元素；
prev：获取紧邻匹配元素之前的元素；
slibings用于获取位于匹配元素前面和后面的所有同辈元素；
parent():获取元素的父级元素；
parents():获取元素的祖先元素；
each():进行遍历；
find():获取正在处理的元素的后代元素（所有下级元素）；

【jQuery学习】相关推荐

jQuery学习入门总结之css（）和addClass（）的不同
jQuery学习入门之css()和addClass()的不同这两天研究jQuery的,刚刚开始入门,从昨天开始呢,就发现一个方法addClass的,教程里有一个方法是这样写的 $(docum ...
如何使用jquery_好程序员web前端学习路线分享jQuery学习技巧
好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! ...
jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo(" ...
jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
【JQuery】JQuery学习笔记
(function(){}) 与 $(function(){})的区别 1.(function(){})函数 (function(){})表示一个匿名函数.function(arg){...}定义了一 ...
【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
jQuery学习笔记系列（二）
day02 - jQuery 学习目标: 能够操作 jQuery 属性能够操作 jQuery 元素能够操作 jQuery 元素尺寸.位置 1.1. jQuery 属性操作 jQuery 常用属 ...

【jQuery学习】