学习Jquery之旅

早就听说了Jquery的大名，一直没有细心的学习一下，通过阅读收集的一些资料，感觉Jquery真的很强大。决定开始自己的学习Jquery之旅。在这里不是为大家讲解Jquery（深知水平有限），只是将自己的学习成果分享给大家，共同学习和交流。

　　Jquery简介

　　我所理解的Jquery就是一个强大的Javascript类库，里面封装好了很多现有的方法和属性。可以使开发人员用很少的代码更好更快的开发出自己想实现的效果。过多的Jquery在这里就不多介绍了，想必很多人都已经看过了更详细的文档，我就不多啰嗦了。

　　Selectors （选择器）

　　JQuery中使用 $ ，可以通过元素的id, css class或 tag name很容易的获取到相应的元素。

　　(1)简单的获取元素

　　Example:

$("p") //获取所有的P元素
$("#pid") //通过 ID
$(".p") //通过css class name

　　(2)当然，他的功能不仅限于如此，还可以钻取层次结构

　　Example:

$("table > tbody > tr") //获取Table的所有行

$("#t1 > tbody > tr") //获取t1 中所有行

$(".table > tbody > tr") // 获取css类名为.table的所有行

　　(3)Jquery为了让开发人员更准确方便的选择到相应的元素，还给我们提供了强大的筛选器的功能:

　　Example:

$(“p:first”)　 //first　
$(“p:last”)　 //last　
$(“table > tbody > tr:even”)　 //even rows　　
$(“table > tbody > tr:odd”) //odd rows　　
$(“p:eq(1)”) //索引为1
$(“p:gt(2)”) //2以上的元素
$("p:lt(10)”) // 0-9　　
$(“p:empty”) //没有子孩子的p　
$(“p:parent”) //为父的p

　　(4)访问文本，并可以控制其中的值:

　　Example:

$("input[type='text']").css("color",　"red");　

　　关于selectors的作用还有很多，大家可以参看：http://docs.jquery.com/Selectors

　　访问内容

　　Examlple:

$("#span").html();　　
$(:input).val();　　
$("#name").text();

　　上面的几个方法用来获取指定元素的基本结果集，在我们使用的时候应当注意：val()方法查找有一个属性和他相关联的元素。html()查找的是指定元素中HTML中的内容。text()方法获取的是指定元素的text。

　　操作HTML标记，还有其他的一些方法，比较常用的还有css()和attr()。

　　css()方法有两个参数，一个是css的元素名，另一个是其所对应的值，通过css()可以很容易的修改一个或多个元素的css样式。

　　attr()方法可以读取或修改元素的属性。并且他可以同时设置多个元素的属性.

　　Examlple:

$("p").css("background-color", "blue");　　
$("p").css({ "background-color" : "navy", "color", "white" });　　
$("button").attr("disabled", "disabled");　

　　事件

　　Jquery能够监听元素的事件。最引人注目并且频繁使用的事件就是ready 事件。这个事件在浏览器加载完之后触发。

$(document).ready(function() { .. });

　　处理一个按钮事件：

$("#buttonid").click(function() { alert("BUTTON CLICK"); }

　　小结：Jquery可以让我们很容易的控制HTML并且对其进行样式的修改。给我们的开发带来很多方便。初学Jquery，写的不好，高手见笑。

早就听说了Jquery的大名，一直没有细心的学习一下，通过阅读收集的一些资料，感觉Jquery真的很强大。决定开始自己的学习Jquery之旅。在这里不是为大家讲解Jquery（深知水平有限），只是将自己的学习成果分享给大家，共同学习和交流。

　　Jquery简介

　　我所理解的Jquery就是一个强大的Javascript类库，里面封装好了很多现有的方法和属性。可以使开发人员用很少的代码更好更快的开发出自己想实现的效果。过多的Jquery在这里就不多介绍了，想必很多人都已经看过了更详细的文档，我就不多啰嗦了。

　　Selectors （选择器）

　　JQuery中使用 $ ，可以通过元素的id, css class或 tag name很容易的获取到相应的元素。

　　(1)简单的获取元素

　　Example:

$("p") //获取所有的P元素
$("#pid") //通过 ID
$(".p") //通过css class name

　　(2)当然，他的功能不仅限于如此，还可以钻取层次结构

　　Example:

$("table > tbody > tr") //获取Table的所有行

$("#t1 > tbody > tr") //获取t1 中所有行

$(".table > tbody > tr") // 获取css类名为.table的所有行

　　(3)Jquery为了让开发人员更准确方便的选择到相应的元素，还给我们提供了强大的筛选器的功能:

　　Example:

$(“p:first”)　 //first　
$(“p:last”)　 //last　
$(“table > tbody > tr:even”)　 //even rows　　
$(“table > tbody > tr:odd”) //odd rows　　
$(“p:eq(1)”) //索引为1
$(“p:gt(2)”) //2以上的元素
$("p:lt(10)”) // 0-9　　
$(“p:empty”) //没有子孩子的p　
$(“p:parent”) //为父的p

　　(4)访问文本，并可以控制其中的值:

　　Example:

$("input[type='text']").css("color",　"red");　

　　关于selectors的作用还有很多，大家可以参看：http://docs.jquery.com/Selectors

　　访问内容

　　Examlple:

$("#span").html();　　
$(:input).val();　　
$("#name").text();

　　上面的几个方法用来获取指定元素的基本结果集，在我们使用的时候应当注意：val()方法查找有一个属性和他相关联的元素。html()查找的是指定元素中HTML中的内容。text()方法获取的是指定元素的text。

　　操作HTML标记，还有其他的一些方法，比较常用的还有css()和attr()。

　　css()方法有两个参数，一个是css的元素名，另一个是其所对应的值，通过css()可以很容易的修改一个或多个元素的css样式。

　　attr()方法可以读取或修改元素的属性。并且他可以同时设置多个元素的属性.

　　Examlple:

$("p").css("background-color", "blue");　　
$("p").css({ "background-color" : "navy", "color", "white" });　　
$("button").attr("disabled", "disabled");　

　　事件

　　Jquery能够监听元素的事件。最引人注目并且频繁使用的事件就是ready 事件。这个事件在浏览器加载完之后触发。

$(document).ready(function() { .. });

　　处理一个按钮事件：

$("#buttonid").click(function() { alert("BUTTON CLICK"); }

　　小结：Jquery可以让我们很容易的控制HTML并且对其进行样式的修改。给我们的开发带来很多方便。初学Jquery，写的不好，高手见笑。