Jquery学习笔记整理

学习网址：http://www.w3school.com.cn/jquery/

DOM（文档对象模型(Document Object Model)）

文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点 DOM很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。

对于innerHTML 属性，几乎所有的元素都有innerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML。（获取HTML当前标签的起始和结束里面的内容）

学习jQuery的第一件事是：如果你想要一个事件运行在你的页面上，你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容加载之前。

If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as theDOM is loaded and before the page contents are loaded.

1.标签的话直接用“”,如：“button”

<button type="button">Click</button>

$("button").click()

2.但用到属性，如id=""

$("#test").hide();

3.隐藏所有 class="test" 的元素

$(".test").hide();

4.$(this).hide() - 隐藏当前元素

5.$("p.intro") 选取所有 class="intro" 的 <p> 元素。

6.$("p#demo") 选取所有 id="demo" 的 <p> 元素。

7.$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

8.下面的例子把所有 p 元素的背景颜色更改为红色：

实例$("p").css("background-color","red");

9.$("ul li:first") 每个 <ul> 的第一个 <li> 元素

jQuery 中事件方法的一些例子：

Event 函数 绑定函数至

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

$(selector).hide(speed,callback);

hide() show() 可以取"slow"、"fast" 或毫秒。

callback为隐藏或显示完成后所执行的函数名称

hide（）和show() 等价于函数 toggle()

jQuery 效果 - 淡入淡出

$(selector).fadeIn(speed,callback);

$(selector).fadeOut(speed,callback);

等价于下面方法

$(selector).fadeToggle(speed,callback);

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

语法：$(selector).fadeTo(speed,opacity,callback);

jQuery 效果 - 滑动

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

等价于下面这个方法

$(selector).slideToggle(speed,callback);

jQuery 效果 - 动画

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法

$(selector).stop(stopAll,goToEnd);

$("p").hide(1000,function(){

alert("The paragraph is now hidden");

});

通过 jQuery，您可以把动作/方法链接起来。

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

如：$("#p1").css("color","red").slideUp(2000).slideDown(2000);

等价于

$(document).ready(function()

{

$("button").click(function(){

$("#p1").css("color","red")

.slideUp(2000)

.slideDown(2000);

});

});

获得内容

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

获取属性 - attr()

设置内容

$("#btn1").click(function(){

$("#test1").text("Hello world!");

});

$("#btn2").click(function(){

$("#test2").html("<b>Hello world!</b>");

});

$("#btn3").click(function(){

$("#test3").val("Dolly Duck");

});

设置属性 - attr()

$("button").click(function(){

$("#w3s").attr("href","http://www.w3school.com.cn/jquery");

});

//title表示鼠标放上去显示的标题

$("button").click(function(){

$("#w3s").attr({

"href" : "http://www.w3school.com.cn/jquery",

"title" : "W3School jQuery Tutorial"

});

});

jQuery - 添加元素

用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

通过 append() 和 prepend() 方法添加若干新元素

function appendText()

{

var txt1="<p>Text.</p>"; // 以 HTML 创建新元素

var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素

var txt3=document.createElement("p"); // 以 DOM 创建新元素

txt3.innerHTML="Text.";

$("p").append(txt1,txt2,txt3); // 追加新元素

}

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

通过 after() 和 before() 方法添加若干新元素

function afterText()

{

var txt1="<b>I </b>"; // 以 HTML 创建新元素

var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素

var txt3=document.createElement("big"); // 通过 DOM 创建新元素

txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素

}

其中，<i></i>表示斜体

jQuery - 删除元素

remove() - 删除被选元素（及其子元素）

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤

如：删除 class="italic" 的所有 <p> 元素：

$("p").remove(".italic");

empty() - 从被选元素中删除子元素 //清空

jQuery 遍历 - 祖先

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

parent() 返回被选元素的直接父元素.

parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

parentsUntil() 返回介于两个给定元素之间的所有祖先元素。

也都可以指定参数进行过滤

jQuery 遍历 - 后代

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

children() 返回被选元素的所有直接子元素。

也可以使用可选参数来过滤对子元素的搜索。

下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

实例

$(document).ready(function(){

$("div").children("p.1");

});

find() 返回被选元素的后代元素，一路向下直到最后一个后代。

例子:1返回属于 <div> 后代的所有 <span> 元素：

实例

$(document).ready(function(){

$("div").find("span");

});

2.返回 <div> 的所有后代：

实例

$(document).ready(function(){

$("div").find("*");

});

jQuery 遍历 - 同胞

在 DOM 树中水平遍历

siblings() 返回被选元素的所有同胞元素，除了自己。

也可以使用可选参数来过滤对同胞元素的搜索。

下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：

实例

$(document).ready(function(){

$("h2").siblings("p");

});

next() 返回被选元素的下一个同胞元素。

nextAll() 返回被选元素的所有跟随的同胞元素。

nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。(介于是不包括两边）

prev()

prevAll()

prevUntil()

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

jQuery 遍历 - 过滤

first() 返回被选元素的首个元素。

last() 返回被选元素的最后一个元素。

eq() 返回被选元素中带有指定索引号的元素，索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

not() 方法返回不匹配标准的所有元素

jQuery - AJAX

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：

$(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

jQuery - AJAX get() 和 post() 方法

get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback);必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：

$.post(URL,data,callback);必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

习题:

jQuery 是 W3C 标准吗？

否。

$("div#intro .head") 选择器选取哪些元素？

正确答案：id="intro" 的首个 div 元素中的 class="head" 的所有元素

jQuery html() 方法适用于 HTML 和 XML 文档。

错

jQuery 使用 CSS 选择器来选取元素？

正确