一、$().addClass() 作用: 向目标元素添加一个或多个类名 源码: //向目标元素添加一个或多个类名 //源码8401行 addClass: function( value...; // currentClass 对应 getClass(this),作用是获取当前元素的类名,方便加空格 jQuery( this ).addClass( value.call...//作用同上 if ( isFunction( value ) ) { return this.each( function( j ) { jQuery...if ( isValidValue ) { // Toggle individual class names i = 0; self = jQuery..., true 即 addClass(),false 即 removeClass() (2)if(isValidValue ) 这个是只有一个参数的情况 利用 hasClass 判断是否 add/removeClass
$(this).addClass(‘class’):为当前元素添加’class’类(供选择器使用 - - ) $(this).siblings(‘class’):查找当前元素的所有类名为 “class”...(同胞就是拥有相同的父元素) $(this).removeClass(‘class’):为当前元素去除’class’类,与addClass作用相反 $(this).addClass(‘class’).siblings...(‘class’).removeClass(‘class’):作用是 给当前元素添加’class’类并查找同胞元素再去除同胞元素的’class’类 addClass() siblings() removeClass...() { $(this).click(function () { //点击事件 //当点击自身的时候添加tabli,及删除同级的tabli $(this).addClass...} .item { display: none; } jquery.min.js
jQuery的选择器 一、 基本选择器 1....(可以是ID选择器、元素选择器或是类名选择器)组合在一起,两个选择器之间以逗号”,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的...jQuery对象。...prev元素之后的所有siblings元素,其中prev和siblings是个相同辈元素 使用公式: 三、过滤选择器 1.简单过滤器...@符号问题: 在jQuery升级版本过程中,jQuery在1.3.1版本中彻底放弃了1.1.0版本遗留的@符号,假如我们使用1.3.1以上的版本,那么不需要在属性前添加@符号 (“div[@name=
基础选择器 $("选择器") // 里面选择器直接写 CSS 选择器即可,但是要加引号 ? 2. 层级选择器 层级选择器最常用的两个分别为:后代选择器和子代选择器。 ?...筛选选择器 筛选选择器,顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 : ? 4....知识铺垫 jQuery 设置样式 $('div').css('属性', '值') 隐式迭代 // 遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。...selector) $(" . first").siblings("li"); 查找兄弟节点,不包括自己本身 nextAll([expr]) $(".first"). nextAll() 查找当前元索之后所有的同辈元素...2.需要得到当前小li 的索引号,就可以显示对应索引号的图片 3.jQuery 得到当前元素索引号 $(this).index() 4.中间对应的图片,可以通过 eq(index) 方法去选择 5.显示元素
类选择器,点击事件 $(".demo").click(function(){ alert() }) ?...(#tt).length>0){ } 选择器 ? image.png 属性过滤选择器 div[id] div[title=test] div[title!...image.png 层次选择器 ? image.png ?...image.png 内容过滤选择器 :contains() :has() ? image.png 可见性过滤选择器 :hidden :visible ? image.png 子元素过滤选择器 ?...image.png 表单选择器 :input :text :password :radio :checkbox :submit ? image.png ---- 表格隔行变色 ?
jquery选择器允许对html中的元素组合单个元素进行操作,jquery的选择器和css的选择器几乎大同小异,大致分为元素选择器、id选择器和类选择器。...jquery的选择器基于元素的id、类、类型、属性、属性值等查找或选择html元素,基于已经存在的css选择器,另外,jquery也支持自定义选择器。...id选择器 jquery的id选择器通过html元素中的id属性选取指定的元素,页面中的元素id必须是唯一的,所有在选择的时候需要使用#id选择器。 之后就会隐藏的段落 戳我隐藏段落 $("button").click(function(){...类选择器 类选择器,也就是.class选择器。jquery可以通过指定的class查找元素。 <!
Undefined类型:已经声明而未赋值的变量的值为”undefined”[实际上未声明的变量用typeof检测也会返回undefined] 2....二、javascript typeof运算符 typeof操作符,返回“表达式”的数据类型的字符串。...“function” 表示这个值是函数 三、JavaScript实现jQuery中的addClass()、removeClass()、hasClass() <pre name="code...function hasClass(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } function addClass...'(\\s|^)'+cls+'(\\s|$)'); ele.className=ele.className.replace(reg,' '); } } //call the functions addClass
jQuery选择器 jQuery的基本用法 jQuery.js”> 之后的所有同辈元素,由选择器进行筛选(可选)。...(selector).each() 对对象进行迭代,为每个元素执行函数 (selector).toArray() 以数组的形式返回 jQuery 选择器匹配的元素 (selector).text()...).append() – 在被选元素的结尾插入内容 (selector).prepend() – 在被选元素的开头插入内容 (selector).after() – 在被选元素之后插入内容 (selector...(selector).addClass() – 向被选元素添加一个或多个类 (selector).removeClass() – 从被选元素删除一个或多个类 (selector).toggleClass
1. jQuery选择器的介绍 jquery选择器就是快速选择标签元素,获取标签的,选择规则和css样式一样。...2. jQuery选择器的种类 标签选择器 类选择器 id选择器 层级选择器 属性选择器 示例代码: $('#myId') //选择id为myId的标签 $('.myClass') // 选择class...为myClass的标签 $('li') //选择所有的li标签 $('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签 $('input[name=first]')...// 选择name属性等于first的input标签 说明: 可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功,否则选择失败。...小结 jQuery选择器就是选择标签的 标签选择器是根据标签名来选择标签 类选择器是根据类名来选择标签 id选择器是根据id来选择标签 层级选择器是根据层级关系来选择标签 属性选择器是根据属性名来选择标签
$("*") ---------选取所有元素 2 $(this) --------选择当前HTML元素 3 $("p.a") -----选取p元素下class为a的元素..."p:first") ----选取第一个p元素 5 $("ul li:first-child") ----选取ul下第一个li元素 6 $("tr:even") -------选取偶数位置下的tr...7 $("tr :odd") --------选取奇数位置的tr
基本选择器 基本选择器是最简单的选择器,可以通过元素id、class和标签名等来直接查找DOM元素。 元素选择器 根据给定元素名匹配元素。如下选择的是所有div元素。...-- 引入jQuery --> 内容过滤选择器 选择器 描述 实例 :contains(text) 选取含有文本内容为“text”的元素。... 可见性过滤选择器 选择器 描述 实例 :hidden 选取所有不可见的元素。 $(":hideen")选取所有不可见的元素。... 属性过滤选择器 选择器 描述 实例 [attribute] 选取拥有此属性的元素。 $("div[id]")选取拥有属性id的元素。
1、 基本选择器 选择器 描述 结果 示例 #id 根据id获取元素 单个 $(“#myid”)选取id的值为myid的元素 .class 根据class获取元素 集合 $(“.myclass”)选取...,.myclass,#id等 获取对应标签元素 集合 $(“a,.myclass,#myid”)获取a、class的值为myclass以及id为myid的元素集合 2、 层次选择器 选择器 描述 结果...元素 :empty 选取不包含子元素或者文本是空的元素 集合 $(“span:empty”)选取不含子元素或者没有内容的span :has(selector) 选取有选择器所匹配的元素 集合 $(“div...:has(“p”)”)选取含有p标签的div元素 :parent 选取含有子元素或者文本的元素 集合 属性过滤 选择器 描述 结果 示例 [attribute] 选取拥有此属性的元素 集合 $(“div...集合 子元素过滤 选择器 描述 结果 示例 :nth-child 选取每个父元素下第index个子元素或者奇偶元素(这里的index是从1开始的) 集合 :first-child 选取每个父元素的第一个元素
jQuery网页脚本语言核心之一 概述: 1. 选择器是jQuery的基础 2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码 什么是jQuery选择器?...层叠样式表 良好地继承了css选择器语法,还继承了其获取页面元素便捷高效的特点 于css不同,jQuery选择器获取元素后,为该元素添加的是行为 有良好的兼容性 优势 1. ...通过 过滤选择呢亲选择元素 (1) 基本过滤选择器 (2) 可见性过滤选择器 详解: 通过css选择器选取元素 jQuery支持大多数css选择器 最常用的有:基本选择器,层次选择器和属性选择器 在jQuery...通过DOM之间的层次关系来获取元素 2. jQuery有四种常用的层次选择器: (1) 后代选择器 (2) 子选择器 (3) 相邻选择器 (4) 同辈选择器 ?...//带空格的jQuery选择器 var $t a= $(".test :hidden") ; //不带空格的jQuery选择器 var $t b= $ (".test:hidden") ; var len
1 jQuery 选择器 原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。 1.1....基础选择器 $("选择器") // 里面选择器直接写 CSS 选择器即可,但是要加引号 ? 1.2. 层级选择器 层级选择器最常用的两个分别为:后代选择器和子代选择器。 ?...筛选选择器 筛选选择器,顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 : ?...1.4 知识铺垫 jQuery 设置样式 $('div').css('属性', '值') jQuery 里面的排他思想 // 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式...// 简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
jquery用法思想 选择某个网页元素,然后对它进行某种操作 jquery选择器 jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。...').filter('.myClass'); //选择class等于myClass的div元素 $('div').eq(5); //选择第6个div元素 上面演示如何使用jquery来选择上元素,那么下面继续来演示一下选择集的过滤...DOCTYPE html> jquery/jquery...DOCTYPE html> jquery/jquery...DOCTYPE html> jquery/jquery
选取页面中元素可以使用jQuery给我们提供的$()方法,该方法需要提供选择器作为参数,方法执行完成后会返回给我们一个jQuery对象,被选取的元素就包含在该对象中。...1.1基础选择器 选择器 实列 说明 全局选择器 $('*') 选择所有元素 标签选择器 $('p') 选择所有的p元素 ID选择器 $('#top') 选择所有id属性值为top的元素 class选择器...$('.box') 选择所有clss属性值为top的元素 多重选择器 $('div, p') 选择所有的div元素和p元素 2.2 按层次结构选取元素 选择器 实列 说明 子代选择器 $('div...> p') 选择作为div元素子元素的所有p元素 后代选择器 $('div p') 选择作为div后代的所有p元素 相邻选择器 $('div + p' 选择紧邻div元素且位于其后的p元素 兄弟选择器...$('div:parent') 选择匹配元素集合中包含子元素的所有div元素(包括文本节点) 2.7 选取表单元素 jQuery提供了一些专门为表单设计的选择器,用于快速访问表单元素。
基本选择器(*) 在开发过程中,jQuery对象的定义 var $obj=$("选择的对象"); //$obj为自定义的元素名 id选择器 $("#id"); 选中的结果是该元素的jQuery对象 标签选择器...$("标签名称");jquery对象的集合,如果选择结果只有一个,那么是当前对象 类选择器 $(".类名"); jQuery对象的集合,类名是在css中定义 并集选择器 $("selector1seletor2..."); 满足selector1选择器,并且同时也满足seletor2选择器的元素的集合 注意:并集选择器中,两个选择器不可以分开,中间无空格。...全局选择器 $("*"); jQuery对象的集合,会选中所有 层次选择器(*) 后代选择器 $("selector1 selector2"); 选择selector1内部所有满足selector2的元素...选择满足选择器1元素后面的满足选择器2的元素 注意:只能选择相邻后面的一个 同辈元素选择器 $("选择器1~s选择器2"); 选择选择器1元素之后的同辈元素, 并且同辈元素满足选择器2的要求 注意:前面的同辈元素是不会被选择的
关于基本选择器包括 “*” ,“.class”,"element","#id","selector1 selementN" "*" 选择器,可以找到文档中的所有的元素,包括 head body $...//$(function(){ //$(".myclass").css("background-color","red"); 找到带有 .myclass 这个选择器的所有的 元素//...div 元素 找到带有 .biaoq这个选择器的所有的下面span元素}) “#id”选择一个具有给定id 属性的单个元素。...//$(function(){ $("#myid").css("background-color","red"); 找到带有 #myclass 这个选择器的所有的 元素//}) "selector1...selementN" 将每个选择器匹配到的元素合并后返回 // $(function(){ $(".jh div, .jh .myclass").css("border","3px solid
图片猛戳链接
jQuery是一种流行的JavaScript库,用于简化HTML文档的操作和动态交互。在jQuery中,层次选择器是一种非常有用的选择器,可以根据元素之间的层次关系选择特定的元素。...在jQuery中,层次选择器使用空格来表示元素之间的层次关系。下面是一些常用的层次选择器:后代选择器(Descendant Selector)用于选择所有指定元素的后代元素。...例如,选择所有class为"container"的div元素内部的p元素,可以使用如下的层次选择器:$("div.container p")这将选中所有class为"container"的div元素内部的...子元素选择器(Child Selector)用于选择指定元素的直接子元素。...无论是处理DOM元素还是实现动态交互,jQuery的层次选择器都是非常有用的工具。
领取专属 10元无门槛券
手把手带您无忧上云