Jquery学习记录

1、$(document).ready(function()$(button).click(function()$(h2).hide();$(#cc).hide(); / #+id$(input).hide(); / 类型);); 点击Click me 之后This is a headingThis is a paragraph.This is another paragraph.Click me 2Google 的 CDNMicrosoft 的 CDN在你想引用的网页开头的 里面 加入上面两句话之一，就ok。3$(this).hide() 演示 jQuery hide() 函数，隐藏当前的 HT

2、ML 元素。$(#test).hide() 演示 jQuery hide() 函数，隐藏 id=test 的元素。$(p).hide() 演示 jQuery hide() 函数，隐藏所有 元素。$(.test).hide() 演示 jQuery hide() 函数，隐藏所有 class=test 的元素。456 fadeIn() $(selector).fadeIn(speed,callback); fadeOut() $(selector).fadeOut(speed,callback); fadeToggle() $(selector).fadeTooggle(speed,callback

3、); fadeTo() $(selector).fadeTo(speed,callback);$(button).click(function() $(#div1).fadeToggle(); $(#div2).fadeToggle(slow); $(#div3).fadeToggle(3000););fadeTo() 方法中必需的 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）7jquery 滑动效果滑动效果8 $(document).ready(function() $(button).click(function() $(div).animate( left:250p

4、x, height:150px, width:150px ); );); 开始动画 。 9 $(button).click(function() $(div).animate( /设初始坐标（0,0,0,0） left:250px, /移动到（250,0,0,0） opacity:0.5, /色彩变为原来的百分之50 /高度变为150 px； width:150px );); /宽度改为150px； $(button).click(function() $(div).animate( left:250px, /每运行一次 高度+150 width:+=150px ); 预定义；把属性的动画值设

5、置为 show、hide 或 toggle： ); 10jQuery animate() - 使用队列功能使用队列功能 $(button).click(function() var div=$(div); div.animate(height:300px,opacity:0.4,slow); div.animate(width:300px,opacity:0.8,slow); div.animate(height:100px,opacity:0.4,slow); div.animate(fontSize:3em,slow); );1112有一种名为链接（chaining）的技术，允许我们在相同

6、的元素上运行多条 jQuery 命令，一条接着另一条。提示：这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。也可以这样写：1314$(#btn1).click(function() $(#test1).text(Hello world!););$(#btn2).click(function() $(#test2).html(Hello world!););$(#btn3).click(function() $(#test3).val(Dolly Duck););这是段落。这是另一个段落。Input field: 15text()、html()

7、 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。16$(document).ready(function() $(button).click(function() $(#w3s).attr( href : http:/ title : W3School jQuery 教程 ); ););W3S改变 href 和 title 值17四个 jQuery 方法： append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容

8、before() - 在被选元素之前插入内容$(document).ready(function() $(#btn1).click(function() $(p).append( Appended text.); ); $(#btn2).click(function() $(ol).append(Appended item); ););This is a paragraph.This is another paragraph.List item 1List item 2List item 3追加文本追加列表项18function appendText()var txt3=document.cr

9、eateElement(p);txt3.innerHTML=Text.; / 通过 DOM 来创建文本$(body).append(txt1,txt2,txt3); / 追加新元素This is a paragraph.追加文本var txt2=$().text(Text.); / 以 jQuery 创建新元素19如需删除元素和内容，一般可使用以下两个 jQuery 方法： remove() - 删除被选元素（及其子元素） /div 属性及其里面所有东西 empty() - 从被选元素中删除子元素 /div面的子属性 如：$(document).ready(function() $(butto

10、n).click(function() $(#div1).remove(); ););This is some text in the div.This is a paragraph in the div.This is another paragraph in the div.删除 div 元素20$(document).ready(function() $(button).click(function() $(#div1).empty(); ););This is some text in the div.This is a paragraph in the div.This is ano

11、ther para in the div.清空 div 元素21$(document).ready(function() $(button).click(function() $(p).remove(#aa); );$(button).click(function() $(p).remove(.italic); ););This is a paragraph in the div.This is another paragraph in the div.This is another paragraph in the div.删除 class=italic id=aa的所有 p 元素22jQu

12、ery 操作 CSS addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性CSS.importantfont-weight:bold;font-size:xx-large;.bluecolor:blue;23向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：()$(document).ready(function() $(button).click(function() $(h1,h2,p).addCla

13、ss(blue); $(div).addClass(important); ););.importantfont-weight:bold;font-size:xx-large;.bluecolor:blue; 标题 1标题 2这是一个段落。这是另一个段落。这是非常重要的文本！向元素添加类24可以在 addClass() 方法中规定多个类： （一对多）$(document).ready(function() $(button).click(function() $(#div1).addClass(important blue); ););.importantfont-weight:bold;fo

14、nt-size:xx-large;.bluecolor:blue; 这是一些文本。这是一些文本。向第一个 div 元素添加类25该方法对被选元素进行添加/删除类的切换操作$(button).click(function() $(h1,h2,p).toggleClass(blue););26$(document).ready(function() $(button).click(function() alert(Background color = + ); ););这是标题这是一个段落。这是一个段落。这是一个段落。返回 p 元素的背景色27语法 ：css(propertyname,value)

15、;设置多个 CSS 属性，请使用如下语法：css(propertyname:value,propertyname:value,.);$(document).ready(function() $(button).click(function() $(p).css(background-color:yellow,font-size:200%); ););这是标题这是一个段落。这是一个段落。这是一个段落。这是一个段落。为 p 元素设置多个样式28jQuery width() 和 height() 方法width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。height() 方法设置或

16、返回元素的高度（不包括内边距、边框或外边距）。jQuery innerWidth() 和 innerHeight() 方法innerWidth() 方法返回元素的宽度（包括内边距）。innerHeight() 方法返回元素的高度（包括内边距）jQuery outerWidth() 和 outerHeight() 方法outerWidth() 方法返回元素的宽度（包括内边距和边框）。outerHeight() 方法返回元素的高度（包括内边距和边框）。$(document).ready(function() $(button).click(function() var txt=; txt+=Doc

17、ument width/height: + $(document).width(); txt+=x + $(document).height() + n; txt+=Window width/height: + $(window).width(); txt+=x + $(window).height(); alert(txt); ););29什么是遍历？jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻

18、松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。30 元素是 元素的父元素，同时是 的子元素 左边的 元素是 的父元素， 的子元素，同时是 的后代。 元素是 的子元素，同时是 和 的后代。 两个 元素是同胞（拥有相同的父元素）。 右边的 元素是 的父元素， 的子元素，同时是 的后代。 元素是右边的 的子元素，同时是 和 的后代。31向上遍历 DOM 树 parent() parents() parentsUntil() $(document).ready(function() $(span).parent().css(color:red,

19、border:2px solid red);); div (曾祖父) ul (祖父) li (直接父) span div (祖父) p (直接父) span 32jQuery parents() 方法parents() 方法返回被选元素的所有祖先元素，。$(document).ready(function() $(span).parents().css(color:red,border:2px solid red);); body (曾曾祖父) div (曾祖父) ul (祖父) li (直接父) span 您也可以使用可选参数来过滤对祖先元素的搜索。$(document).ready(fun

20、ction() $(span).parents(ul).css(color:red,border:2px solid red););body (曾曾祖父) div (曾祖父) ul (祖父) li (直接父) span /对 以上所有祖先元素检索，找到ul 元素 并赋值34jQuery parentsUntil() 方法parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。下面的例子返回介于 与 元素之间的所有祖先元素。$(document).ready(function() $(span).parentsUntil().css(color:red,border:2px s

21、olid red);); body (曾曾祖父) div (曾祖父) ul (祖父) li (直接父) span 35向下遍历 DOM 树下面是两个用于向下遍历 DOM 树的 jQuery 方法： children() find()$(document).ready(function() $(div).children().css(color:red,border:2px solid red););div (当前元素) p (子) span (孙) p (child) span (孙) 36也可以使用可选参数来过滤对子元素的搜索$(document).ready(function() $(di

22、v).children(p.1).css(color:red,border:2px solid red););div (当前元素) p (子) span (孙) p (子) span (孙) 37另一种 检索后代的方法find（）$(document).ready(function() $(div).find(span.1).css(color:red,border:2px solid red);$(div).find(p.1).css(color:red,border:2px solid red););div (current element) p (子) span (孙) p (child

23、) span (孙) 38在 DOM 树中水平遍历有许多有用的方法让我们在 DOM 树进行水平遍历： siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil()用的不多，了解39缩写搜索元素的范围三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是

24、 1。下面的例子选取第二个 元素（索引号 1）40jQuery first() 方法first() 方法返回被选元素的首个元素。jQuery last() 方法last() 方法返回被选元素的最后一个元素。$(document).ready(function() $(p).eq(1).css(background-color,yellow););欢迎来到我的主页我是唐老鸭 (index 0)。唐老鸭 (index 1)。我住在 Duckburg (index 2)。我最好的朋友是米老鼠 (index 3)。41jQuery filter() 方法filter() 方法允许您规定一个标准。不匹配

25、这个标准的元素会被从集合中删除，匹配的元素会被返回。$(document).ready(function() $(p).filter(.intro).css(background-color,yellow););欢迎来到我的主页我是唐老鸭。我住在 Duckburg。我爱 Duckburg。我最好的朋友是 Mickey。42jQuery not() 方法not() 方法返回不匹配标准的所有元素提示：not() 方法与 filter() 相反。$(document).ready(function() $(p).not(.intro).css(background-color,yellow););欢

26、迎来到我的主页我是唐老鸭。我住在 Duckburg。我爱 Duckburg。我最好的朋友是 Mickey。43AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。关于 jQuery 与 AJAXjQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。提示：如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJA

27、X 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。44jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中语法：$(selector).load(URL,data,callback);data 参数规定与请求一同发送的查询字符串键/值对集合。 callback 参数是 load() 方法完成后所执行的函数名称$(document).ready(function() $(#btn1).click(funct

28、ion() $(#test).load(/example/jquery/demo_test.txt); ) 请点击下面的按钮，通过 jQuery AJAX 改变这段文本。获得外部的内容必需的 URL 参数规定您希望加载的 URL。可选的可选的45也可以把 jQuery 选择器添加到 URL 参数 例子：把 demo_test.txt 文件中 id=p1 的元素的内容，加载到指定的 元素中：$(#div1).load(demo_test.txt #p1);$(document).ready(function() $(button).click(function() $(#div1).load(/

29、example/jquery/demo_test.txt #p1); ););使用 jQuery AJAX 来改变文本获得外部内容46 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数： responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象$(document).ready(function() $(button).click(function() $(#div1).load(/example/jquery/demo_test.txt,functio

30、n(responseTxt,statusTxt,xhr) if(statusTxt=success) alert(外部内容加载成功！); if(statusTxt=error) alert(Error: +xhr.status+: +xhr.statusText); ););); 使用 jQuery AJAX 来改变文本获得外部内容47HTTP 请求：GET vs. POST两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。 GET - 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据GET 基本上用于从服务器获得（取回）数据。注释：POST 也可用于从服务器获取数据。不过，GET 方法可能返回缓存数据。POST 方法不会缓存数据，并且常用于连同请求一起发送数据。48jQuery $.get() 方法$.get() 方法通过 HTTP GET 请求从服务器上请求数据。语法：$.get(URL,callback); url （必须） callback（可选）$(document).ready(function() $(button).click(function() $.get(/example/jquery/demo_test.asp,function