jquery attr方法 jquery attr() 收藏 0

jQuery 控制属性和样式

标记的属性

each()遍历元素：each(callback)方法主要用于对选择器进行遍历，它接受一个函数为参数，该函数接受一个参数，指代元素的序号。

对于标记的属性而言，可以利用each()方法配合this关键字来获取或者设置选择器中每个元素相对应的属性值；

jQuery代码:

HTML代码:

理解:首先利用$(\”image\”)获取页面中所有图片的集合,然后通过each()方法遍历所有图片,通过this关键字对图片进行访问,获取图片的id,

并设置图片的title属性。其中each()方法的函数参数index为元素所处的序号(从0开始计数)。

jQuery代码:

HTML代码:

//使用jQuery中插件机制

获取属性的值

attr(name)

注意: 因为没有遍历,$(\”em\”).attr(\”title\”) 实际上获取的是第一个<em>元素的title属性值

$(\”em\”).attr(\”title\”) 等同于$(\”em:eq(1)\”).attr(\”title\”)

$(\”em\”).get(0).title 也是获取第一个<em>元素的title属性值, 而$(\”em\”).get(0)已经转换成DOM对象, 因此就不能使用jquery对象的attr方法

设置属性值

attr(name,value)

jQuery代码：

HTML代码:

通过位置选择器:gt(0),当单击第1个按钮时后面的两个按钮将同时禁用;

attr()方法还接受函数作为参数attr(name,fn),它的第2个参数为一个函数,该函数接受一个参数,为元素的序号,返回值为字符串;

jQuery代码

HTML代码:

用attr()方法接受属性列表

删除属性

removeAttr(name)删除属性相当于HTML的标记中不设置该属性, 并不是取消了该标记的这个特点。

小结：

$().attr(属性名称); //获得属性信息值

$().attr(属性名称,值); //设置属性的信息

$().removeAttr(属性名称); //删除属性

$().attr(json对象); //同时为多个属性设置信息值, json对象的键值对就是名称和值

$().attr(属性名称,fn); //通过fn函数执行的return返回值对属性进行赋值

获取属性的第二种方式:

设置元素的样式

添加、删除CSS类别

用addClass()方法添加CSS类别

用removeClass()方法删除CSS类别

希望某些元素的样式风格在某个类别之间切换,时而addClass()类别,时而removeClass()类别;

用toggleClass()方法在类别间动态切换 toggle 切换

实例:jQuery制作交替变幻的表格

直接获取、设置样式

jQuery提供css()方法来直接获取、设置元素的样式风格。使用方法与attr()几乎一模一样。

通过css(name)来获取某种样式风格的值；$(\”p\”).css(\”color\”);

通过css(properties)列表来同时设置元素的多种样式；$(\”p\”).css({ color: \”#ff0011\”, background: \”blue\” });

通过css(name,value)来设置元素的某种样式；$(\”p\”).css(\”color\”,\”red\”);

通过css(name,function(index, value))设置一个样式属性的值

css()样式操作特点：

此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置, value是原先的属性值。

1 样式获取，jquery可以获取行内、内部、外部的样式。dom方式只能获得行内样式

2 复合属性样式需要拆分为\”具体样式\”才可以操作

例如： background 需要拆分为 background-color background-image 等进行操作

border： border-left-style border-left-width border-left-color 等

margin： margin-left margin-top 等

也可以将样式属性写成驼峰式: backgroundColor, 可以不加引号。

在json对象中, 带横线的css属性(如font-size)必须加引号;

如：

标准格式：

css还支持获取属性值的方法, 保持原来的属性值(width()和css()两种方法)

与下面的语句等同：

以下代码为<p>标记添加了mouseover和mouseout事件，当这两个事件触发时通过css(name,value)来修改标记的颜色。

另外还可以通过hasClass(name)方法来判断某个元素是否设置了某个CSS类别，如何设置了则返回true，否则为false。

等同于$(\”li:last\”).is(\”.myClass\”)

在jQuery中其实hasClass方法内部调用的就是is()方法,只不过代码可读性更高一些;

小结：

class属性值操作

$().attr(\’class\’,值);

$().attr(\’class\’);

$().removeAttr(\’class属性\’); //删除class的属性

class具体快捷操作方法：

$().addClass(class属性值); //给class属性追加信息值

$().removeClass(class属性值); //删除class属性中的某个信息值

$().toggleClass(class属性值); //开关效果，有就删除，没有就添加

css样式操作

$().css(name,value); //设置

$().css(name); //获取

$().css(json对象); //同时修改多个css样式

CSS样式操作-宽高

width() 取得第一个匹配元素当前计算的宽度值(px)。

width(val) 为每个匹配的元素设置CSS宽度(width)属性的值; 如果没有明确指定单位(如：em或%), 默认使用px

height(100) height(\”100px\”) 后面含有单位的必须加引号

height() 取得第一个匹配元素当前计算的高度值

height(val) 为每个匹配的元素设置CSS高度(hidth)属性的值; 如果没有明确指定单位(如：em或%), 默认使用px

height(100) height(\”100px\”) 后面含有单位的必须加引号

前端面试题《JQuery》

$() 函数是 jQuery() 函数的别称，$()函数用于将任何对象包裹成 jQuery对象，接着被允许调用定义在jQuery对象上的多个不同方法。甚至可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jQuery对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解jQuery。

jQuery支持不同类型的选择器，例如ID选择器、class选择器、标签选择器。鉴于这个问题没提到ID和class，可以用标签选择器来选择所有的div 元素。jQuery代码：$(\”div\”)，这样会返回一个包含所有5个div标签的jQuery 对象。

这对于很多java零基础学jQuery的初学者来说是一个棘手的问题，其实是个简单的问题。$(this) 返回一个jQuery对象，你可以对它调用多个 jQuery方法，比如用text()获取文本，用val()获取值等等。而this代表当前元素，它是JavaScript关键词中的一个，表示上下文中的当前DOM元素。你不能对它调用 jQuery方法，直到它被 $() 函数包裹，例如 $(this)。

除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的jQuery版本, 那么它就不会再去下载它一次，因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对DOM进行了一轮查找，性能方面更加出色。

可以用 jQuery方法appendTo()将一个HTML元素添加到DOM树中。这是jQuery提供的众多操控DOM的方法中的一个。可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。

（1）get()取得所有匹配的DOM元素集合；

（2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素；

（3）append(content)向每个匹配的元素内部追加内容；

（4）after(content)在每个匹配的元素之后插入内容；

（5）html()/html(var)取得或设置匹配元素的html内容；

（6）find(expr)搜索所有与指定表达式匹配的元素；

（7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数；

（8）empty()删除匹配的元素集合中所有的子节点；

（9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法；

（10）attr(name)取得第一个匹配元素的属性值。

获取页面的元素；修改页面的外观；改变页面大的内容；响应用户的页面操作；为页面添加动态效果；无需刷新页面，即可以从服务器获取信息；简化常见的javascript任务。

jQuery选择器支持CSS里的选择器，jQuery选择器可用来添加样式和添加相应的行为，CSS中的选择器是只能添加相应的样式。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com