壹 ❀ 引 Jquery中addClass与removeClass是两个使用高频的方法,对于为dom元素增删class类非常方便:但如果不用JQ,使用js怎么模拟它们呢?本文主要记录下自己的实现思路.  贰 ❀ 从classList属性入手 我们随便获取一个dom对象,打印出它的对象属性,可以看到管理class类的主要有classList属性与className属性,我们先从classList属性下手. 1.classList属性 classList属性的值为DOMTokenList对象,关于

.addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector").addClass("className1 className2"); .removeClass("className")方法是用来给指定的元素移除类名,也就是说给指定元素移除样式: 可以同时移除多个类名,空格符隔开 $("selector")

function getByClass(oParent,sClass){ if(oParent.getElementsByClassName){ return oParent.getElementsByClassName(sClass); }else{ var arr=[]; var aEle=oParent.getElementsByTagName('*'); var re=new RegExp('\\b'+sClass+'\\b'); ;i<aEle.length;i++){ if(re.t

function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' '); } function addClass(ele, cls) { if (!hasClass(elem, cls)) {

alloc:分配内存. init:初始化. new:代替上面两个函数:分配内存,并且初始化. 注意: 1.在实际开发中很少会用到new,一般创建对象时我们一般是 [[className alloc]init]: 2.区别只在于alloc分配内存的时候使用了zone,它是给对象分配内存的时候,把关联的对象分配到一个相邻的内存区域内,以便于调用时消耗很少的内存,提升了程序处理速度. 3.采用new方法只能采用默认的init方法完成初始化,采用alloc的方式可以用其他定制的初始化方法(其他initX

通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性获取的不是class名称的数组,而是一个含有空格的字符串,这就使得多class操作变得很麻烦.同样的jQuery开发者也考虑到这种情况,增加了一个.addClass()方法,用于动态增加class类名 .addClass( className )方法 .addClass( className ) :

.html()方法 获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容,具体有3种用法: .html() 不传入值,就是获取集合中第一个匹配元素的HTML内容 .html( htmlString )  设置每一个匹配元素的html内容 3..html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数 .text()方法 得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内

-------------------------------------------------------+++---------------------------------------------------------+++++ ------------------------------------------------------- 月光宝盒与你的jQuery --------------2016.8.6 19:22 ------------------------------

我们知道HTML样式定义的三种方式: <link/>外部引入也就是定义 CSS 中的 <style/>嵌入式样式 style特性地定义 给一个HTML元素设置css属性,如: var head= document.getElementById("head"); head.style.width = "20px"; head.style.height = "10px"; head.style.display = "

jQuery相关资料 官网: jQuery官网 在线API: jQuery在线API W3School:W3School-jQuery教程(中文版哦) 下载jQuery:jQuery各版本下载 jQurey3.0: jQuery 3.0 更新 参考书:<锋利的jQuery>.<jQuery技术内幕-深入解析jQuery架构设计与实现原理> 课程内容介绍 1 jQuery基本使用和jQuery选择器 2 jQuery的DOM操作 3 jQuery事件.插件 1 jQuery的基本使用

写在前面 本文写作基于jQuery 1.9.1版本,源码分析系列目录:http://www.cnblogs.com/chyingp/archive/2013/06/03/jquery-souce-code-study.html jQuery中class操作相关的方法 jQuery中共提供了四个操作class的方法,除了toggleClass外,其他从方法名就可以知道方法是干嘛的,下文会分别举具体例子 .addClass(className):添加className .removeClass(cl

1.样式属性操作     1)设置样式属性操作         ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, “red”); ②设置多个样式(也可以设置单个) // 参数为 {}(对象) $(selector).css({“color”: “red”, “font-size”: “30px”}); 2)获取样式属性操作 // 参数表示要获取的 样式属性名称 $(selector).css(“font-si

jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标记图片的地址. 操作特性的DOM方法主要有3个,getAttribute方法.setAttribute方法和removeAttribute方法,就算如此在实际操作中还是会存在很多问题,这里先不说.而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题 jQuer

  1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用.      $(document).ready(function() {   内容  });   1.jQuery对象与DOM对象   jQuery对象与DOM对象是不一样的   普通处理,通过标准JavaScript处理:   var p = document.g

一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

Jquery(一)——样式篇1.$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码, 因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. 2.jQuery对象与DOM对象 DOM对象:var p = document.getElementById('imooc'); jQuery对象:var $p = $('#imooc');  $p是一个类数组对象 3.jQuery对象转化

1.$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. <script type="text/javascript"> $(document).ready(function() { }); </script> 2.jQuery对象与DOM对象是不一样的 通过标准的JavaScript操作DO

进入官方网站获取最新的版本 http://jquery.com/download/    中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScript库,核心依然是JavaScript,不仅兼容了CSS3,还兼容各种浏览器--> <!--1.容易上手 2.强大的选择器 3.解决浏览器的兼容 4.完善的事件机制 5.出色三维Ajax封装 6.丰富的UI--> <!--链式操作,回调函数,迭代器,延迟对象,对象--> 这里需

showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>showhide</title> <link rel="stylesheet" href="../css/base.css"> <style> body{ width

jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能.我们可以用jQuery的同时也能混合JavaScript原生代码一起使用.通过jQuery生成的对象是一个做了包装处理的对象,如果要用jQuery对象自己的方法,就需要满足这个对象是通过jQuery生成的. 在很多场景中,我们需要jQuery与DOM能够相互的转换,它们都是操作的DOM元素,jQuery是

在JavaScript中,对于 if else 的逻辑判断你肯定非常熟悉,本文罗列了几种你不一定知道的简写方式,仅供参考. 例子: 已知小明考了68分,小于60分为不及格,大于60分为及格,问:小明是否通过了考试? 1.传统的写法 if(score < 60){ alert('不及格'); }else{ alert('及格'); } 这没什么好说的,最基本的if else语法.可读性应该是最好的. 2.利用三目运算符来进行判断 score < 60 ? alert('不及格') : alert