【jQuery系列0】初识jQuery之属性

接触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) : 一个函数,返回要设置的值。

时间: 2024-10-23 22:38:35

【jQuery系列0】初识jQuery之属性的相关文章

jQuery 2.0发布,不再支持IE6/7/8

有时发现jQuery库引用的都对,javascript代码写的也没问题,可是jquery就是出现问题,额--我发现换个jquery库就没问题了,长时间不关注jquery的问题而已: 很多人都没有使用最新的jQuery库,导致突然换成2.0版本时,出现了一些没有关注的问题! 关于jQuery 2.0不再对IE6/7/8三个版本进行支持,我认为,使用jquery1.9版本好了,(我测试jquery1.11版本都是是支持IE8,2.0版本开始就不支持了! ). 等以后抛弃了IE8,我想那个时候,我们的

PJax在jQuery 3.0无法运行问题修复

PJax在jQuery 3.0无法运行 [现象] 页面报错:Uncaught TypeError: Cannot read property 'push' of undefined [原因] jQuery3.0开始去除了$.event.props Breaking change: jQuery.event.props and jQuery.event.fixHooks removed jQuery's event handling performance increased thanks to

jQuery 3.0 的变化

时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本.有两个版本 jQuery compat 3.0 和 jQuery 3.0. jQuery compat 3.0 对应之前的 1.x, 兼容更多的浏览器,对于IE支持到 8.0 版本 jQuery 3.0 对应之前的 2.x,关注更新的浏览器,对于IE支持到 9.0 版本 此外, 3.0还增加了对 Yandex 浏览器的支持,一款来自俄罗斯的浏览器. 1.简化了 show/hide 之前的 show/hide 是大兼容,比如

初识jQuery,八字真言“选择元素,对其操作”

jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jquery.com/download/ jQuery库有两个版本: 我只是使用这个jQuery库,所以我就只下载了生产版本,足以. 二.开始我的第一个Demo 1.html文件 <!DOCTYPE html> <html> <head> <meta charset=&quo

jQuery 3.0 的 Data 浅析

jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery .这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20).一路走来,颇为不易. 文章目录 Data浅析 Data在jQuery内部的使用 1.x.x 和 2.x.x 的比较 一.Data浅析 jQuery 3.0 中的 Data 是内部使用的,定义为一个“类”.一共用它创建了两个对象,dataPriv 和 dataUser.Data 有 1 个对象属性(ex

初识JQuery(1)-选择器

初识jquery 在学习jquery之前,就有看过一些相关的视频,才知道它是可以写很少的代码就可以完成很多事的.记得第一写轮播图的时候,首先就百度了篇轮播图的实现,当时还不知道自己百度的其实不是原生的JS代码,而是用jquery完成的,当时也是初识JS,然后就一脸懵逼的看了视频,结果好像还看懂了,于是跟着他的代码像做着世界上最伟大的事一样的敲着代码,编译的时候却没反应,经过一些了解后才发现这是用传说中的jquery完成的.尽管第一次接触jquery不是为接触而接触的,但是也意识到了他强大的功能.

jQuery 3.0 的 Data

jQuery 3.0 的 Data Snandy If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ends of strings that somebody else pulls. jQuery 3.0 的 Data 浅析 jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery .这个版本从14年10月开始,其中发布

初识JQuery AJAX

初识JQuery AJAX APP开发群:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

初识jQuery源码

为了深入学习下jQuery,最近打算看看源码,刚开始看这个我内心其实是拒绝的...第一印象就是好难理解,没办法硬骨头总是要去啃得,看了好多分析源码的文章博客,第一篇当然是Aaron的jQuery源码解读系列的开篇之整体架构.介绍的还是比较详细的,推荐~当然要抱着怀疑的眼光去看,不一定人家写的就是对的,敲出来验证下才是王道,这篇文章后的评论也可以看看,是大家对于该文章某些地方的质疑. 看完这篇文章其实我是半懂的状态,后来又看到一篇总结的博文,大概是在此基础上总结的. 点这里 我并不想重复的记录下相