这周的学习让我初步了解到JQuery作为js库的封装的伟大性。Write less Do more 才是我们真正应该做到的！

1.jQuery基础语法

· 链式编程 $("#div1").show().css("color":"red")

·用一个ready事件作为处理HTML文档的开始.

$(document).ready(function(){

// 在这里写你的代码...

});

简写：$(function() {

// 在这里写你的代码...

});

·onload事件是在 dom元素 图片 css等加载完毕后出发， ready是在dom元素加载完毕后出发，加快网页响应速度，并且可执行多个ready函数！

·jQuery对象是jQuery对dom对象进行包装后的对象！

·如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

var $variable = jQuery 对象

var variable = DOM 对象

·Query对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象

jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

2.jQuery选择器、操作页面文档元素

·基本选择器练习

JQuery选择器用于查找满足条件的元素。

基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和tagName来查找dom元素

1.$("#id") : id选择器,document.getElementById("id");

2.$("div") :元素选择器 document.getElementsByTagName("div");

3.$(".myClass") : 类选择器,返回所有class="myClass"的元素

4.$("*") : 返回所有元素,多用于结合上下文搜索

5.$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素

·层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

1 、ancestor descendant

用法: $(”form input”) ;   返回值  集合元素

说明: 在给定的祖先元素下匹配所有后代元素.这个要与下面讲的”parent > child”区分开.

2、parent > child
用法: $(”form > input”) ;    返回值  集合元素

说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素

3、prev + next

用法: $(”label + input”) ;   返回值  集合元素

说明: 匹配所有紧接在 prev 元素后的 next 元素

4、prev ~ siblings

用法: $(”form ~ input”) ;    返回值  集合元素

说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素

紧接相邻选择器 prev + next 可以使用next()方法替代

后面相邻兄弟选择器 prev ~ siblings可以使用nextAll()方法替代

选择前后相邻兄弟可以使用siblings()方法

·过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头

按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

··基础过滤选择器

1、:first
用法: $(”tr:first”) ;   返回值  单个元素的组成的集合

说明: 匹配找到的第一个元素

2、:last
用法: $(”tr:last”)   返回值  集合元素

说明: 匹配找到的最后一个元素.与 :first 相对应.

3、:not(selector)
用法: $(”input:not(:checked)”)返回值  集合元素

说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).

4、:even
用法: $(”tr:even”)   返回值  集合元素

说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.

5、: odd
用法: $(”tr:odd”) 返回值  集合元素

说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.

6、:eq(index)
用法: $(”tr:eq(0)”)    返回值  集合元素

说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

7、:gt(index)
用法: $(”tr:gt(0)”)    返回值  集合元素

说明: 匹配所有大于给定索引值的元素.

8、:lt(index)
用法: $(”tr:lt(2)”)    返回值  集合元素

说明: 匹配所有小于给定索引值的元素.

9、:header(固定写法)
用法: $(”:header”).css(”background”, “#EEE”)    返回值  集合元素

说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.

10、:animated(固定写法)   返回值  集合元素

说明: 匹配所有正在执行动画效果的元素

··内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

1、:contains(text)
用法: $(”div:contains(’John’)”)    返回值  集合元素

说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.

2、:empty
用法: $(”td:empty”)   返回值  集合元素

说明: 匹配所有不包含子元素或者文本的空元素

3、:has(selector)

用法: $(”div:has(p)”).addClass(”test”)    返回值  集合元素

说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.

4、:parent
用法: $(”td:parent”)   返回值  集合元素

说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

··可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

1、:hidden
用法: $(”tr:hidden”)  返回值  集合元素

说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到. css中display:none的都会被匹配到.

2、:visible
用法: $(”tr:visible”)  返回值  集合元素

说明: 匹配所有的可见元素.

··属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

1、[attribute]
用法: $(”div[id]“) ;  返回值  集合元素

说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.

2、[attribute=value]
用法: $(”input[name='newsletter']“).attr(”checked”, true);    返回值  集合元素

说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.

3、[attribute!=value]
用法: $(”input[name!='newsletter']“).attr(”checked”, true);    返回值  集合元素

说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.

4、[attribute^=value]
用法: $(”input[name^=‘news’]“)  返回值  集合元素

说明: 匹配给定的属性是以某些值开始的元素.

5、[attribute$=value]
用法: $(”input[name$=‘letter’]“)  返回值  集合元素

说明: 匹配给定的属性是以某些值结尾的元素.

6、[attribute*=value]
用法: $(”input[name*=‘man’]“)   返回值  集合元素

说明: 匹配给定的属性是以包含某些值的元素.

7、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(”input[id][name$=‘man’]“)  返回值  集合元素

说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.

··子元素过滤选择器

1、:nth-child(index/even/odd)
用法: $(”ul li:nth-child(2)”)   返回值  集合元素

说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.

2、:first-child
用法: $(”ul li:first-child”)    返回值  集合元素

说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.

3、:last-child
用法: $(”ul li:last-child”)      返回值  集合元素

说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.

4、: only-child
用法: $(”ul li:only-child”)   返回值  集合元素

说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

···nth-child() 选择器详解如下：

(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素

(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素

(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

··表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

1、:enabled
用法: $(”input:enabled”)    返回值  集合元素

说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.

2、:disabled
用法: $(”input:disabled”)    返回值  集合元素

说明: 匹配所有不可用元素.与上面的那个是相对应的.

3、:checked
用法: $(”input:checked”)   返回值  集合元素

说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口.

4、:selected
用法: $(”select option:selected”)   返回值  集合元素

说明: 匹配所有选中的option元素.

··表单选择器

1、:input
用法: $(”:input”) ;   返回值  集合元素

说明:匹配所有 input, textarea, select 和 button 元素

2、:text
用法: $(”:text”) ;  返回值  集合元素

说明: 匹配所有的单行文本框.

3、:password
用法: $(”:password”) ; 返回值  集合元素

说明: 匹配所有密码框.

4、:radio
用法: $(”:radio”) ; 返回值  集合元素

说明: 匹配所有单选按钮.

5、:checkbox
用法: $(”:checkbox”) ; 返回值  集合元素

说明: 匹配所有复选框

6、:submit
用法: $(”:submit”) ;   返回值  集合元素

说明: 匹配所有提交按钮.

7、:image
用法: $(”:image”)   返回值  集合元素

说明: 匹配所有图像域.

8、:reset
用法: $(”:reset”) ;  返回值  集合元素

说明: 匹配所有重置按钮.

9、:button
用法: $(”:button”) ;  返回值  集合元素

说明: 匹配所有按钮.这个包括直接写的元素button.

10、:file
用法: $(”:file”) ;  返回值  集合元素

说明: 匹配所有文件域.

11、:hidden
用法: $(”input:hidden”) ; 返回值  集合元素

说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.

注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,

3.jqueryDOM操作

1、使用html()方法读取或者设置元素的innerHTML：

alert($("#btn1").html());

$("#btn1").html("hello");

2、使用text()方法读取或者设置元素的innerText：

alert($("#btn1").text());

$("#btn1").text("hello");

3、使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。

alert($(“#img1").attr(“src"));

$(“#img1”).attr(“alt”, “网易");

4、使用removeAttr(“src")删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。“查看源文件”只能看服务器上下载下来的那份

·创建节点

创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.

注意:

动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;

当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)

创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

·内部插入节点

动态创建 HTML 元素并没有实际用处, 还需要将新创建的节点插入到文档中, 即成为文档中某个节点的子节点

*   append(content) :向每个匹配的元素的内部的结尾处追加内容

*   appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处

*   prepend(content):向每个匹配的元素的内部的开始处插入内容

*   prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处

·外部插入节点

*  after(content) :在每个匹配的元素之后插入内容

*  before(content):在每个匹配的元素之前插入内容

*  insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面

*  insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面

以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.

var $one_li=$("ul li:eq(0)");

var $two_li=$("ul li:eq(1)");

$two_li.insertBefore($one_li);

·删除节点

remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.

empty(): 清空节点 – 清空元素中的所有后代节点

·复制节点

clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.

clone(true): 复制元素的同时也复制元素中的的事件

·替换节点

replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素

replaceAll(): 颠倒了的 replaceWith() 方法.

注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

·属性操作

attr(): 获取属性和设置属性

当为该方法传递一个参数时, 即为某元素的获取指定属性

当为该方法传递两个参数时, 即为某元素设置指定属性的值

jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等.

removeAttr(): 删除指定元素的指定属性

·样式操作

获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.

追加样式: addClass()

移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class

切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.

判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

·设置和获取 HTML, 文本和值

读取和设置某个元素中的 HTML 内容: html() . 该方法可以用于 XHTML, 但不能用于 XML 文档

读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.

读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组

·常用的遍历节点方法

取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.

取得匹配元素后面紧邻的同辈元素的集合:next();

取得匹配元素前面紧邻的同辈元素的集合:prev()

取得匹配元素前后所有的同辈元素: siblings()

·CSS-DOM 操作

获取和设置元素的样式属性: css()

获取和设置元素透明度: opacity 属性

注:IE6,IE7不支持此属性,请使用Firefox1.5,或Opera9浏览

opacity:0.1

获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”);

获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效

em是相对长度单位。相对于当前对象内文本的字体尺寸

4.Jquery事件

·事件

JQuery中的事件绑定：$(“#btn”).bind(“click”,function(){})，每次都这么调用太麻烦，所以jQuery可以用$(“#btn”).click(function(){})来进行简化。

合成事件hover，hover(enterfn,leavefn)，当鼠标放在元素上时调用enterfn方法，当鼠标离开元素的时候调用leavefn方法

如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数：e，e就是事件对象。

$(document).mousemove(function(e){

$("span").css({

"top":(e.pageY+20)+"px",

"left":(e.pageX+20)+"px"

}).text("X="+e.pageX + ", Y=" + e.pageY);

});

·鼠标

获得发生事件时鼠标的位置

$(document).mousemove(function(e) {

document.title = e.pageX + "," + e.pageY;

});

在mousemove、click等事件的匿名响应函数中如果指定一个参数e，那么就可以从e读取发生事件时的一些信息，比如对mousemove等鼠标事件来说，就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。

5.Jquery动画

·动画

show()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换

$(“.btn1").click(function() { $("div").show(); });

$(“.btn2").click(function() { $("div").hide(); });

如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒，也可以使用三个内置的速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery动画函数中需要速度的地方一般也可以使用这个三个值。toggle、slideDown、slideUp

·队列操作*

当多个动画效果操作中包含 非动画 操作时，需要将非动画操作加入动画队列才能按顺序执行

$("div").animate({left:"500px",width:"300px",opacity:1},3000).animate({top:"200px",height:"300px"},3000).css("border","5px solid blue");

$("div").animate({left:"500px",width:"300px",opacity:1},3000).animate({top:"200px",height:"300px"},3000,function(){$(this).css("border","5px solid blue");})