接触jQuery是从做项目开始的,当时只知道我们的项目里边用到了jquery、ajax等等,一听高大上的感觉,但是哪里用到了作用是什么并不清楚,直到看了jquery视频才恍然大悟:原来这就是jquery,我还一直以为那就是单纯的js呢!
jQuery简介
jQuery,即JavaScript和查询Query,它是继prototype之后又一个优秀的JavaScript库,它兼容多浏览器,核心理念是“写得更少,做得更多”,由美国人于2006年1月在纽约的barcamp发布,吸引了世界各地众多的JavaScript高手加入,目前已成为最流行的JavaScript库。jQuery的语法设计使开发更便捷,它有很多功能,例如操作文档对象、选择DOM元素、事件处理、动态特效等,还提供了API让开发者自行编写插件,通过插件来扩展它的功能,其模块化的使用方式使开发更灵活。
属性
1.基本属性
attr(name)
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。
例如:
var object=$("div").attr("width");
attr(key,fn):为所有匹配的元素设置一个计算的属性值。
key (String) : 属性名称
fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值
示例
把src属性的值设置为title属性的值。
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").attr("title", function() { return this.src });
attr(key,value):为所有匹配的元素的key属性设置一个value值。
例如:为所有的div设置一个width为100px的属性值
$("div").attr("width","100px");
也可以一次设置多个属性
同时改变alt 属性 和 添加 title属性, 我们可以使用一个“名/值”形式的对象 (JavaScript object literal)传递给这个方法。 每个 key-value 对象将增加或者修改一个属性:
$(‘#greatphoto‘).attr({
alt: ‘Beijing Brush Seller‘,
title: ‘photo by Kelly Clark‘
});
当设置多个属性,包含属性名的引号是可选的,警告: 当设置样式名(“class”)属性时,必须使用引号!
removeAttr(name):从每一个匹配的元素中删除一个属性
2.CSS类属性
addclass(class):为每个匹配的元素添加指定的类名。
addclass(function(index,class)):为每个匹配的元素添加指定的类名。
function(index, class) (Function) : 此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值
实例:
$(‘ul li:last‘).addClass(function() {
return ‘item-‘ + $(this).index();
});
removeclass(class),removecalsss(function(index,class));分别于addcalss相反
togglecalss(class):如果存在(不存在)就删除(添加)一个类,来回切换
togglecalss(calss,switch):如果开关switch参数为true则加上对应的class,否则就删除
class (String) :CSS类名
switch (Boolean) :用于决定元素是否包含class的布尔值。
实例:每点击三下加上一次 ‘selected‘ 类
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
togglecalss(function(index,class),[switch]):从所有匹配的元素中删除全部或者指定的类。
function(index, class) (Function) : 返回class名的一个函数,接受两个参数,index为元素在集合中的索引位置,class为原先元素的class值。
switch (可选)(Boolean) : 用于决定元素是否包含class的布尔值。
示例
根据父元素来设置class属性
jQuery 代码:
$(‘div.foo‘).toggleClass(function() {
if ($(this).parent().is(‘.bar‘) {
return ‘happy‘;
} else {
return ‘sad‘;
}
});
3.html属性
html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
html(function(index, html)):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
4.文本属性
text():取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
text(val)
设置所有匹配元素的文本内容
text(function(index,text))
设置所有匹配元素的文本内容
5.值属性
val():得第一个匹配元素的当前值
val(val):设置每一个匹配元素的值。
val(fn):设置每一个匹配元素的值,fn (Funtion) : 一个函数,返回要设置的值。