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的简单使用：

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

$(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本身的内部的函数）

 

2、选择器

一、基本选择器

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元素（不经常使用）;

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

二、过滤选择器

: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正在执行动画的元素。

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

三、属性过滤选择器：

$("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 而后在能够进行操做。

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

$("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]")