attr()方法
,jQuery 中用 attr()方法来获取和设置元素属性, attr 是 attribute(属性)的缩写, 在 jQuery DOM 操作中会经常用到 attr()
attr()有 4 个表达式
attr(传入属性名): 获取属性的值
attr(属性名, 属性值): 设置属性的值
attr(属性名, 函数值): 设置属性的函数值
attr(attributes): 给指定元素设置多个属性值, 即:{属性名一: "属性值一" , 属性名二: "属性值二" , ... ... }
removeAttr()删除方法
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性(attribute)
优点:
attr,removeAttr 都是 jQuery 为了属性操作封装的, 直接在一个 jQuery 对象上调用该方法, 很容易对属性进行操作, 也不需要去特意的理解浏览器的属性名不同的问题
.html()方法
获取集合中第一个匹配元素的 HTML 内容 或 设置每一个匹配元素的 html 内容, 具体有 3 种用法:
.html() 不传入值, 就是获取集合中第一个匹配元素的 HTML 内容
.html( htmlString ) 设置每一个匹配元素的 html 内容
.html( function(index, oldhtml) ) 用来返回设置 HTML 内容的一个函数
注意事项:
.html()方法内部使用的是 DOM 的 innerHTML 属性来处理的, 所以在设置与获取上需要注意的一个最重要的问题, 这个操作是针对整个 HTML 内容(不仅仅只是文本内容)
.text()方法
得到匹配元素集合中每个元素的文本内容结合, 包括他们的后代, 或设置匹配元素集合中每个元素的文本内容为指定的文本内容., 具体有 3 种用法:
.text() 得到匹配元素集合中每个元素的合并文本, 包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
.text( function(index, text) ) 用来返回设置文本内容的一个函数
注意事项:
.text()结果返回一个字符串, 包含所有匹配元素的合并文本
.html 与. text 的异同:
.html 与. text 的方法操作是一样, 只是在具体针对处理对象不同
.html 处理的是元素内容,.text 处理的是文本内容
.html 只能使用在 HTML 文档中,.text 在 XML 和 HTML 文档中都能使用
如果处理的对象只有一个子文本节点, 那么 html 处理的结果与 text 是一样的
火狐不支持 innerText 属性, 用了类似的 textContent 属性,.text()方法综合了 2 个属性的支持, 所以可以兼容所有浏览器
.val()方法
.html()方法 获取集合中第一个匹配元素的 HTML 内容 或 设置每一个匹配元素的 html 内容, 具体有 3 种用法:
.html() 不传入值, 就是获取集合中第一个匹配元素的 HTML 内容
.html( htmlString ) 设置每一个匹配元素的 html 内容
.html( function(index, oldhtml) ) 用来返回设置 HTML 内容的一个函数
注意事项:
.html()方法内部使用的是 DOM 的 innerHTML 属性来处理的, 所以在设置与获取上需要注意的一个最重要的问题, 这个操作是针对整个 HTML 内容(不仅仅只是文本内容)
.text()方法
得到匹配元素集合中每个元素的文本内容结合, 包括他们的后代, 或设置匹配元素集合中每个元素的文本内容为指定的文本内容., 具体有 3 种用法:
.text() 得到匹配元素集合中每个元素的合并文本, 包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
.text( function(index, text) ) 用来返回设置文本内容的一个函数
注意事项:
.text()结果返回一个字符串, 包含所有匹配元素的合并文本
.html 与. text 的异同:
.html 与. text 的方法操作是一样, 只是在具体针对处理对象不同
.html 处理的是元素内容,.text 处理的是文本内容
.html 只能使用在 HTML 文档中,.text 在 XML 和 HTML 文档中都能使用
如果处理的对象只有一个子文本节点, 那么 html 处理的结果与 text 是一样的
火狐不支持 innerText 属性, 用了类似的 textContent 属性,.text()方法综合了 2 个属性的支持, 所以可以兼容所有浏览器
- // 选择一个表单, 修改 value 的值
- $("input[type='text']").val('修改表单的字段')
- // 多个 select 被选择, 返回["1", "2"]
- $("p").text( $("#multiple").val() )
indexOf 方法获取到指定的字符在字符串中第一次出现的位置, 如果没有找到则返回 - 1, 不返回 - 1 则说明该字符串含有制定字符
addClass( className )方法
.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
注意事项:
.addClass()方法不会替换一个样式类名. 它只是简单的添加一个样式类名到元素上
简单的描述下: 在 p 元素增加一个 newClass 的样式
- <p class="orgClass">
- $("p").addClass("newClass")
那么 p 元素的 class 实际上是 class="orgClass newClass" 样式只会在原本的类上继续增加, 通过空格分隔
.removeClass( )方法
它的作用是从匹配的元素中删除全部或者指定的 class
.removeClass( [className ] ): 每个匹配元素移除的一个或多个用空格隔开的样式名
.removeClass( function(index, class) ) : 一个函数, 返回一个或多个将要被移除的样式名
注意事项
如果一个样式类名作为一个参数, 只有这样式类会被从匹配的元素集合中删除 . 如果没有样式名作为参数, 那么所有的样式类将被移除
- //.removeClass() 方法允许我们指定一个函数作为参数, 返回将要被删除的样式
- $('.right> div:first').removeClass(function(index,className){
- //className = aa bb imoocClass
- // 把 div 的 className 赋给下一个兄弟元素 div 上作为它的 class
- $(this).next().addClass(className)
- // 删除自己本身的 imoocClass
- return 'imoocClass'
- })
.toggleClass( )方法
jQuery 提供一个 toggleClass 方法用于简化这种互斥的逻辑, 通过 toggleClass 方法动态添加删除 Class, 一次执行相当于 addClass, 再次执行相当于 removeClass
.toggleClass( )方法: 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类, 取决于这个样式类是否存在或值切换属性. 即: 如果存在 (不存在) 就删除 (添加) 一个类
.toggleClass( className ): 在匹配的元素集合中的每个元素上用来切换的一个或多个 (用空格隔开) 样式类名
.toggleClass( className, switch ): 一个布尔值, 用于判断样式是否应该被添加或移除
.toggleClass( [switch ] ): 一个用来判断样式类添加还是移除的 布尔值
.toggleClass( function(index, class, switch) [, switch ] ): 用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数. 接收元素的索引位置和元素旧的样式类作为参数
注意事项:
toggleClass 是一个互斥的逻辑, 也就是通过判断对应的元素上是否存在指定的 Class 名, 如果有就删除, 如果没有就增加
toggleClass 会保留原有的 Class 名后新增, 通过空格隔开
- // 给所有的 tr 元素加一个 class="c" 的样式
- $("#table tr").toggleClass("c");
因为本身他们没有 c 这个 class 所以这句话是每个都添加 c 如果本身有的话, 拿这句话就是删除所有 c 我这样理解
- // 给所有的偶数 tr 元素切换 class="c" 的样式
- // 所有奇数的样式保留, 偶数的被删除
- $("#table tr:odd").toggleClass("c");
因为本身每个都有 c 这个 class 了 所有所有的偶数他们也有 c 啊
, 所以他们的 toggleClass 方法就是删除所有偶数的 c, 而不是偶数的就不会删除
同样的如果本身没 c 效果就相反了
- $("#table tr:even").toggleClass("c", true);
- //true, 那么这个样式类将被添加;
- //false, 那么这个样式类将被移除
加 switch 就好理解了 不加的时候是自己判断 有就删, 无则加
而加了 switch
如果是 true 不管你有还是没有那就是加
如果是 false 不管你有还是没有就是删
同样的 只是这样理解 只要明白即使是有然后还是 true 不要去想他会加两个就行了 删同理
.CSS() 方法: 获取元素样式属性的计算值或者设置元素的 CSS 属性
获取:
.css( propertyName ) : 获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames ): 传递一组数组, 返回一个对象结果
设置:
.css(propertyName, value ): 设置 CSS
.css( propertyName, function ): 可以传入一个回调函数, 返回取到对应的值进行处理
.css( properties ): 可以传一个对象, 同时设置多个样式
注意事项:
浏览器属性获取方式不同, 在获取某些值的时候都 jQuery 采用统一的处理, 比如颜色采用 RBG, 尺寸采用 px
.css()方法支持驼峰写法与大小写混搭的写法, 内部做了容错的处理
当一个数只被作为值 (value) 的时候, jQuery 会将其转换为一个字符串, 并添在字符串的结尾处添加 px, 例如 .css("width",50}) 与 .css("width","50px"})一样
对于样式的设置, 我们学了 addClass 与 css 方法, 那么两者之间有什么区别?
可维护性:
.addClass()的本质是通过定义个 class 类的样式规则, 给元素添加一个或多个类. css 方法是通过 JavaScript 大量代码进行改变元素的样式
通过. addClass()我们可以批量的给相同的元素设置统一规则, 变动起来比较方便, 可以统一修改删除. 如果通过. css()方法就需要指定每一个元素是一一的修改, 日后维护也要一一的修改, 比较麻烦
灵活性:
通过. css()方式可以很容易动态的去改变一个样式的属性, 不需要在去繁琐的定义个 class 类的规则. 一般来说在不确定开始布局规则, 通过动态生成的 HTML 代码结构中, 都是通过. css()方法处理的
样式值:
.addClass()本质只是针对 class 的类的增加删除, 不能获取到指定样式的属性的值,.css()可以获取到指定的样式值.
样式的优先级:
css 的样式是有优先级的, 当外部样式, 内部样式和内联样式同一样式规则同时应用于同一个元素的时候, 优先级如下
外部样式 < 内部样式 < 内联样式
.addClass()方法是通过增加 class 名的方式, 那么这个样式是在外部文件或者内部样式中先定义好的, 等到需要的时候在附加到元素上
通过. css()方法处理的是内联样式, 直接通过元素的 style 属性附加到元素上的
通过. css 方法设置的样式属性优先级要高于. addClass 方法
总结:
.addClass 与. css 方法各有利弊, 一般是静态的结构, 都确定了布局的规则, 可以用 addClass 的方法, 增加统一的类规则
如果是动态的 HTML 结构, 在不确定规则, 或者经常变化的情况下, 一般多考虑. css()方式
来源: http://www.bubuko.com/infodetail-2696569.html