jquery的一点点认识

概述

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
jQuery，顾名思议，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

属性

attr(name|properties|key,value|fn)

设置或返回被选元素的属性值。

参数name 描述:
返回文档中所有图像的src属性值。

$("img").attr("src");

为所有图像设置src和alt属性。

jquery 代码：

$("img").attr({ src: "test.jpg", alt: "Test Image" });

为所有图像设置src属性。

jquery 代码：

$("img").attr("src","test.jpg");

把src属性的值设置为title属性的值。

jquery 代码：

$("img").attr("title", function() { return this.src });

removeAttr(name)

从每一个匹配的元素中删除一个属性

将文档中图像的src属性删除

HTML 代码：

<img src="test.jpg"/>

jquery 代码：

$("img").removeAttr("src");

结果：

[ <img /> ]

addClass(class|fn)

为每个匹配的元素添加指定的类名。

为匹配的元素加上 'selected' 类

jquery 代码：

$("p").addClass("selected");
$("p").addClass("selected1 selected2");

给li加上不同的class

HTML 代码：

<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>

jquery 代码：

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

removeClass([class|fn])

从匹配的元素中删除 'selected' 类

jquery 代码：

$("p").removeClass("selected");

删除匹配元素的所有类

jquery 代码：

$("p").removeClass();

删除最后一个元素上与前面重复的class

jquery 代码：

$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

html([val|fn])

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

返回p元素的内容。

jquery 代码：

$('p').html();

设置所有 p 元素的内容

jquery 代码：

$("p").html("Hello <b>world</b>!");

使用函数来设置所有匹配元素的内容。

jquery 代码：

$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

text([val|fn])

取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

返回p元素的文本内容。

jquery 代码：

$('p').text();

设置所有 p 元素的文本内容

jquery 代码：

$("p").text("Hello world!");

使用函数来设置所有匹配元素的文本内容。

jquery 代码：

$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

val([val|fn|arr])

获得匹配元素的当前值。

获取文本框中的值

jquery 代码：

$("input").val();

设定文本框的值

jquery 代码：

$("input").val("hello world!");

设定文本框的值

jquery 代码：

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

总结

这篇主要讲解了，对jquery属性的了解。