JQ初学总结一

Jquery是最火的JavaScript库，大部分web开发都会用到就jquery，而作为初学者看了一些jq的用法总结自己的学习以增强自己的认知。

普通的javascript的缺点是：每种控件的操作方式可能不统一，不同浏览器下也会有区别。用javasript编写跨浏览器的程序非常麻烦。而是用jquery可以很好的做到兼容大多数浏览器：ie、firefox、谷歌。

但别认为jq是一种新的语法，因为JQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术，Jquery本身就是一堆JavaScript函数。要知道用JQ能实现的我们也可以自己编写javascript+dom实现，只是jq帮我们封装了一堆函数，使用者直接调用要实现的函数即可；

JQuery的优点：尺寸小、使用简单方便（Write Less, Do More，吃得少干得多。链式编程（$("#div1").draggble().show().hide().fly()）、隐式迭代（自动对于多个元素进行迭代方法调用））、屏蔽浏览器差异跨浏览器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件丰富、开源、免费。

下面说说jq的简单使用：

一、页面元素加载完毕事件：

$(document).ready(function() {

    alert("加载完毕！");

});//注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样的事件。

也可以简写为$(functions（）｛ alert("加载完毕！");｝)；

在dom树中有一个onload事件也是实现页面加载完后执行。

但两者又有区别：1）、onload只能注册一次。（window.onload=function(){....}）后注册的会取代先注册的函数。而ready可以多次注册都会被执行；

                       2）、onload是在所有dom元素创建完毕、图片、css等都加载完毕后才会被触发。JQ ready却是在dom元素创建完毕后就触发。ready的方式可以提高页面的响应速度；在JQ中也可以用$(window).load(function(){....});来实现dom 的onload那种事件调用的时机。（*在JQ中采用$(domObj)方式把dom对象转化为JQ对象load是JQ自己的内部的函数）

 

二、选择器

1、基本选择器

JQuery选择器用于查找满足条件的元素，比如可以用$("#Id")来根据控件id获得控件的jQuery对象，相当于dom中的getElementById；

$("TagName")来获取所有指定标签名的jQuery对象，相当于getElementsByTagName；

$(function() {

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

              $("div").html("天朝是一个民主自由的国家");

          });

      });

（*当使用匿名函数嵌套过多的时候可以把匿名函数写在外面用一个变量指向他，推荐这样使用 这样可以避免命名函数与jq中的内部函数名冲突 引发未知错误，但如果你喜欢也是可以将命名函数传进去的）

上面是id 和标签选择器，在jq选择器也可以组合选择（下面也会提到），jq中是选择器跟css中的选择器非常相似而且大部分是可以想通的。正如上面提到的.

在jq中也有对于元素类的选择器。用法跟css的一样$(".className").click(...),获得类名为className的对象。

JQ中还有非常多的选择器下面简单写一下：

  多条件选择器：$("p,div,span.menuitem")，同时选择p标签、div标签和拥有menuitem样式的span标签元素（类似于CSS选择器）；

l层次选择器：

   （1）$("div li")获取div下的所有li元素（后代，子、子的子……);

   （2）$("div > li")获取div下的直接li子元素;

   （3）$(".menuitem + div")获取样式名为menuitem之后的第一个div元素（不常用）;

   （4）$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素（不常用）;

在此得注意空格不能多写和少写不然找不到元素的。

2、过滤选择器

:first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first");

:last 选取最后一个元素。$("div:last")选取最后一个<div>

:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>

:even、:odd，选取索引是奇数、偶数的元素：$("input:even")选取索引是奇数的<input>（可以做表格奇偶行的背景不同）

:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>

:header选取所有的h1……h6元素

:animated正在执行动画的元素。

组合选择器是按照表达式从前向后进行数据过滤

3、属性过滤选择器：

$("div[id]")选取有id属性的<div>

$(“div[title=test]”)选取title属性为“test”的<div>，JQuery中没有对getElementsByName进行封装，用$(“input[name=abc]”)。

$("div[title!=test]")选取title属性不为“test”的<div>

还可以选择开头、结束、包含等，条件还可以复合。

用$(":radio[name=groupName]")可以获得同一组的radiobutton 然后在可以进行操作。

4、表单对象选择器（过滤器）：

$("input:checked")选取所有选中的元素（Radio、CheckBox）

$("select option:selected")选取所有选中的选项元素（下拉列表）

$(“:input”)选取所有<input>、<textarea>、<select>和<button>元素。和$(“input”)不一样， $(“input”)只获得<input>。$("input,textarea,select,button")等价于$(":input")

$(":text")选取单行文本框，等价于$("input[type=text]")

$(“:password”)选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

即使没有这些表单选择器，也能用属性过滤器实现。如:选择页面的radio元素$("input[type=radio]")