前端计划第二天-jQuery基础

jQuery基础

一.jquery概念

1. Jquery是一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
2. JavaScript的缺点:控件的操作方式不统一，不同浏览器容易出观兼容问题。为了简化操作，出现了许多对JavaScript封装的函数库比如Prototype、JQuery等。
3. JQuery的优点:小巧、方便、功能强大。插件丰富、开源、免费。

二.基础知识

选择器

1. JQuery选择器用于查找满足条件的元素，比如可以使用$(“#控件id”)来根据控件id获得控件的JQuery对象。相当于getElementByid。

2. $(“TagName”)来获取所有指定签名的JQuery对象，相当于getElementsByTagName。

3. CSS选择器，同时选择拥有某个样式的多个元素：

   $(“.text”).click(function(){alert($(this).text();)});

4. 多条件选择器:$(“p,div,span.menuitem”),同时选择p标签、div标签和拥有menuitem样式的span标签。

5. 层次选择器:

   1、$(“div li”)获取div下的所有li标签(后代，子、子的子标签…)。

   2、$(“div > li”)获取div下的直接li子标签。

   3、$(“.menuitem + div”)获取样式名为menuitem之后的第一个div标签。

   4、$(“.menuitem ~ div”)获取样式名为menuitem之后的所有div标签。

6. JQuery过滤选择器

   • :first选择第一个标签。$(“div:first”)选取第一个

   • :last选取最后一个标签。$(“div:last”)选取最后一个

   • :not选取不满足选择器条件的标签。$(“input:not(.myclass)”)选取样式名不是myclass的标签。

   • :even、:odd，选取索引是奇数、偶数的标签:$(“input:event”)选取索引是奇数的。

   • :eq、:gt、:lt选取索引等于、大于、小于索引序号的标签，比如$(“input:lt(1)”)选取索引小于1的。

   • $(“:header”)选取所有的h1…h6标签。

   • $(“div:animated”)选取正在执行动画的

     标签。

7. 属性过滤选择器

   • $(“div[id]”)选取有id属性的

   • $(“div[title=test]”)选取title属性为“text”的

   • $(“div[title!=test]”)选取title属性不为“text”的

   表单对象选择器

   • $(“#form1:enabled”)选取id为form1的表单内所有启用的标签。

   • $(“#form1:disabled”)选取id为form1的表单内所有禁用的标签。

   • $(“#form1:checked”)选取所有选中的标签。(checkBox)。

   • $(“#form1:selected”)选取所有选中的选项