[jQuery原理] jQuery属性操作相关方法

属性操作相关方法

attr()

设置或者获取元素的属性节点值

attr: function (attr, value) {// 1.判断是否是字符串if(njQuery.isString(attr)){// 判断是一个字符串还是两个字符串if(arguments.length === 1){return this[0].getAttribute(attr);}else{this.each(function (key, ele) {ele.setAttribute(attr, value);});}}// 2.判断是否是对象else if(njQuery.isObject(attr)){var $this = this;// 遍历取出所有属性节点的名称和对应的值$.each(attr, function (key, value) {// 遍历取出所有的元素$this.each(function (k, ele) {ele.setAttribute(key, value);});});}return this;
},

prop()

设置或者获取元素的属性值

prop: function (attr, value) {// 1.判断是否是字符串if(njQuery.isString(attr)){// 判断是一个字符串还是两个字符串if(arguments.length === 1){return this[0][attr];}else{this.each(function (key, ele) {ele[attr] = value;});}}// 2.判断是否是对象else if(njQuery.isObject(attr)){var $this = this;// 遍历取出所有属性节点的名称和对应的值$.each(attr, function (key, value) {// 遍历取出所有的元素$this.each(function (k, ele) {ele[key] = value;});});}return this;
},

css()

设置获取样式

css: function (attr, value) {// 1.判断是否是字符串if(njQuery.isString(attr)){// 判断是一个字符串还是两个字符串if(arguments.length === 1){return njQuery.getStyle(this[0], attr);}else{this.each(function (key, ele) {ele.style[attr] = value;});}}// 2.判断是否是对象else if(njQuery.isObject(attr)){var $this = this;// 遍历取出所有属性节点的名称和对应的值$.each(attr, function (key, value) {// 遍历取出所有的元素$this.each(function (k, ele) {ele.style[key] = value;});});}return this;
},

val()

获取设置value的值

val: function (content) {if(arguments.length === 0){return this[0].value;}else{this.each(function (key, ele) {ele.value = content;});return this;}
},

hasClass()

判断元素中是否包含指定类

hasClass: function (name) {var flag = false;if(arguments.length === 0){return flag;}else{this.each(function (key, ele) {// 1.获取元素中class保存的值var className = " "+ele.className+" ";// 2.给指定字符串的前后也加上空格name = " "+name+" ";// 3.通过indexOf判断是否包含指定的字符串if(className.indexOf(name) != -1){flag = true;return false;}});return flag;}
},

addClass()

给元素添加一个或多个指定的类

addClass: function (name) {if(arguments.length === 0) return this;// 1.对传入的类名进行切割var names = name.split(" ");// 2.遍历取出所有的元素this.each(function (key, ele) {// 3.遍历数组取出每一个类名$.each(names, function (k, value) {// 4.判断指定元素中是否包含指定的类名if(!$(ele).hasClass(value)){ele.className = ele.className + " " + value;}});});return this;
},

removeClass()

删除元素中一个或多个指定的类

removeClass: function (name) {if(arguments.length === 0){this.each(function (key, ele) {ele.className = "";});}else{// 1.对传入的类名进行切割var names = name.split(" ");// 2.遍历取出所有的元素this.each(function (key, ele) {// 3.遍历数组取出每一个类名$.each(names, function (k, value) {// 4.判断指定元素中是否包含指定的类名if($(ele).hasClass(value)){ele.className = (" "+ele.className+" ").replace(" "+value+" ", "");}});});}return this;
},

toggleClass()

没有则添加,有则删除

toggleClass: function (name) {if(arguments.length === 0){this.removeClass();}else{// 1.对传入的类名进行切割var names = name.split(" ");// 2.遍历取出所有的元素this.each(function (key, ele) {// 3.遍历数组取出每一个类名$.each(names, function (k, value) {// 4.判断指定元素中是否包含指定的类名if($(ele).hasClass(value)){// 删除$(ele).removeClass(value);}else{// 添加$(ele).addClass(value);}});});}return this;
}

[jQuery原理] jQuery属性操作相关方法相关推荐

jQuery attr removeAttr 属性操作
jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...
[jQuery原理] jQuery事件操作相关方法
事件操作相关方法 on(type, callback) 注册事件 1.注册多个相同类型事件, 后注册的不会覆盖先注册的 2.注册多个不同类型事件, 后注册的不会覆盖先注册的 on: function ...
前端HTML调用jQuery库，属性操作:更换图片、添加字体样式（前端：HTML搭配jQuery系列教程六）
属性操作:更换图片.改变字体样式 1.更换图片: 在jQuery中,我们可以使用attr()方法来获取元素的某一个HTML属性值. 语法: $().attr("属性名") 说明:获 ...
jquery对标签属性操作
jquery中添加属性和删除属性: $("#2args").attr("disabled",'disabled'); $("#2args") ...
前端提高篇(八十六)：jQuery的class属性操作addClass()与removeClass()、hasClass()、toggleClass()
1.addClass()与removeClass()基本使用 addClass:添加class:removeClass:移除class,返回this对象,支持链式操作 $('div').addClas ...
[jQuery原理] jQuery入口函数
入口函数测试传入 '' null undefined NaN 0 false 会返回一个空的jQuery对象给我们 console.log($()); console.log($('')); con ...
[jQuery原理] jQuery基本结构
1.jQuery的本质是一个闭包 2.jQuery为什么要使用闭包来实现? 为了避免多个框架的冲突 3.jQuery如何让外界访问内部定义的局部变量 window.xxx = xxx; 4.jQuer ...
jQuery原理第五天
addClass <!--* @Author: 码小余* @Date: 2020-06-27 08:23:36* @LastEditTime: 2020-06-27 08:26:43* @Fil ...
jQuery原理第四天
insertAfter 实现insertAfter需要用到原生JavaScript的nextSibling属性元素.insertAfter.指定元素 ==>将元素添加到指定元素外部的后面 in ...

[jQuery原理] jQuery属性操作相关方法

属性操作相关方法

[jQuery原理] jQuery属性操作相关方法相关推荐

最新文章

热门文章