1. jQuery选择器 - 选择器都是以 $() 开头的 基础选择器 选择器 描述 id选择器 指定id元素 class选择器 遍历css类元素 element元素 遍历HTML元素 *选择器 遍历所有元素...odd").css("background-color", "#bbbbff"); 子元素伪类选择器 子元素伪类选择器就是选择某一个元素下面的子元素的方式，在jQuery中，子元素伪类选择器分为两大类..."整数或odd或even" :only-child 选择父元素中唯一的子元素(该父元素只有一个子元素) 区分元素类型的 选择器 说明 :first-of-type 选择同元素类型的第一个子元素 :last-of-type...选择同元素类型的随后一个子元素 :nth-of-type 选择同元素类型的第n个或奇偶元素,n的值为"整数或odd或even" :only-of-type 匹配父元素中特定类型的唯一子元素(该父元素可以有多个子元素...返回键盘代码 jQuery的事件处理 1. jQuery常用的事件方法 鼠标操作事件 方法 描述 mousedown() 鼠标的键被按下 mouseenter() 当鼠标指针进入目标时 mouseleave
jQuery选择器 jQuery的基本用法 jQuery.js”> 单击鼠标时运行脚本 dblclick：当双击鼠标时运行脚本 mousedown：当按下鼠标按钮时运行脚本 mousemove：当鼠标指针移动时运行脚本 mouseout：当鼠标指针移出元素时运行脚本...(selector).each() 对对象进行迭代，为每个元素执行函数 (selector).toArray() 以数组的形式返回 jQuery 选择器匹配的元素 (selector).text()...).before() – 在被选元素之前插入内容 (selector).remove() – 删除被选元素（及其子元素） (selector).empty() – 从被选元素中删除子元素 (selector...() – 对被选元素进行添加/删除类的切换操作 (selector).css() – 设置或返回样式属性 jQuery Ajax 操作函数 .ajax() – 执行Ajax异步请求 .get() –
除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.6.3.....first() .last() .eq(0) 3.2 基本选择器 1.id选择器 $("#id名") 2.类选择器 $(".类选择器名")来访问相应的使用类样式的元素 3....二.jQuery高级选择器 针对上次课有点复杂的选择器，或之前没有接触过的选择器。...='baidu']") 选择href属性不等于baidu的所有元素(包括没有href的元素) $("a[href!...=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素 $('li[class!
(没有子节点) selector:parent 获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent"); selector1:has(selector2...该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。...该方法会删除与节点相关联的所有数据和事件处理程序。 replaceAll(target); 用集合的匹配元素替换每个目标元素。...鼠标事件: click() 单击 dblclick() 双击 hover() 悬停 mousedown() 按下 mouseup() 抬起 mouseenter...addClass(className) //判断有没有指定的类，有，返回true，否则返回false hasClass(className) /
”) 后代选择器，选择ancestor的所有子孙节点 $(”#main > *”) 子选择器，选择parent的所有子节点 $(”label + input”) 临选择器，选择prev的下一个临节点 $...字符的元素 ( ” i n p u t [ i d ] [ n a m e (”input[id][name(”input[id][name =’man’]”) 匹配同时符合多个选择器的所有元素 子元素过滤选择器...: only - child”) 匹配父元素的唯一1个子元素 表单元素选择器 $(”: input”) 匹配所有的表单输入元素，包括所有类型的input, textarea, select 和 button..." 12、解决自定义方法或其他类库与jQuery的冲突 很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突...之后应用 Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。
尽管如此，jQuery仍然被广泛使用，并且对于一些特定场景和项目仍然是一个有价值的工具。...获取元素//$(选择器)$('div')//获取页面中的所有div元素,返回的是jQuery对象get()参数为索引，返回值是原生对象eq()参数为索引，返回值为jQuery对象操作类名hasClass...，没有就增加查找元素parent()找到该元素的父级元素next()找到该元素紧挨的下一个兄弟节点prev()找到该元素紧挨的上一个兄弟节点nextAll()找到该元素下面所有兄弟节点传入选择器，找下面符合选择器的兄弟节点...prevAll()找到该元素上面所有兄弟节点传入选择器，找上面符合选择器的兄弟节点siblings()找到该元素的所有兄弟元素children()找到该元素的所有子元素find()通过参数类名找该元素下面的元素效果...:50, fontSize:20, paddingLeft:10})// 若传一个对象 就是批量设置remove()删除该元素及其子元素empty()删除该元素的子元素插入元素append()作为元素的最后一个子节点插入
$("#id名") 获取指定的ID元素 类选择器 $(".class名") 获取同一类class元素 标签选择器 $("标签名")...获取同一类标签的所有元素 并集选择器 $("div,p,li") 使用逗号分隔,只要符合条件之一就会被选择 交集选择器 $("div.redClass") 获取class...下面是两个用于向下遍历DOM树的jQuery方法: children() 返回被选元素的所有直接子元素.该方法只会向下一级对DOM树进行遍历...."); 返回类名为"1"的所有元素,并且它们是的直接子元素....它们允许您基于其在一组元素中的位置来选择一个特定的元素.
选择DOM元素 如果熟悉jQuery，就会知道 $('.class') 和 $('#id') 选择器有多么重要。它们根据与之关联的类或 ID 选择 DOM 元素。...但是当你没有引用 jQuery时，你仍然可以在谷歌开发控制台中进行同样的操作。...也可以使用 $$(tagName) 或 $$(.class), 注意双元符号，根据特定的选择器选择DOM的所有元素。这也将它们放入数组中，你也可以通过指定数组中该元素的位置来从中选择特定的元素。...getEventListeners($(‘selector’)) 返回一个对象数组，其中包含绑定到该元素的所有事件。你可以展开对象来查看事件: ?...例如: getEventListeners($(‘firstName’)).click[0].listener 将显示与 ID 为 'firstName' 的元素的单击事件关联的侦听器。
jQuery 核心函数 # 2.1 选择器 # 2.1.1 基本选择器 # 1....子代选择器 需求描述：选择 ul 下的所有 span 子元素，设置其背景为红色 我是ul的span1 我是li1 我是li1的span1...addClass() 方法描述：为每个匹配的元素添加指定的样式类名。...注意：如果存在（不存在）就删除（添加）一个样式类 需求描述：当单击按钮的时候，隐藏 div，再次单击按钮的时候，显示 div .hide { width: 100px; height...， mousemove 事件就会被触发，任何 HTML 元素都可以接受此事件。
除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。...体积大一些 jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。...语法：$("html标签名")获得所有匹配标签名称的元素 id选择器。语法：$("#id的属性值")获得与指定id属性值匹配的元素 类选择器。...语法：$("A B ")选择A元素内部的所有B元素 子选择器。语法：$("A > B")选择A元素内部的所有B子元素 （3）属性选择器 属性名称选择器。...当我们用鼠标点击屏幕上的一个表情之后，该表情就会附在发言框的后面。 2、代码实现 <!
提示：如果您使用jQuery，则可以输入$($0)以访问此元素上的jQuery API。 使用控制台中操作的最后一个值 使用 $_ 引用在控制台执行的前一操作的返回值 ?...使用 CSS 选择器查找元素 按 cmd+f（在Windows中是 ctrl+f）打开“Elenemts”面板中的搜索框。...按住 Shift 键进入控制台 要编写跨越控制台多行的命令，请按 shift+enter。准备就绪后，在脚本末尾按 Enter 键即可执行该操作： ?...cmd+shift+o（在 Windows 中是 ctrl+shift+o）显示当前文件中的符号（属性，函数，类）。 ctrl+g 去特定的路线。 ?...调试DOM修改 右键单击某个元素并在子树修改上启用 Break：每当脚本遍历该元素的子元素并修改它们时，调试器将自动停止以让您检查发生了什么。 ?
标题图 目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight...选择器 $("h2").css("background","#08F"); 类CSS选择器 过滤选择器 基本选择器 #id $(‘#test’) id为test .class $(“.test”) class...下元素名是的子元素 $(‘.one + div’)：class为one的下一个元素 $(‘#two ~ div’)：id为two的元素后面的所有兄弟元素 过滤选择器...语法特点是使用“:” 分类如下： 基本 过滤选择器 属性 过滤选择器 子元素 过滤选择器 可见性 过滤选择器 内容 过滤选择器 表单对象属性 过滤选择器 $(" li:first" )：选取所有...onmouseover鼠标移到某元素之上 onmouseout鼠标移开 onmousedown鼠标被按下 visibility visible可见的 hidden不可见的 JavaScript改变样式
() .prevAll() 选中某个属性 = 某个值的标签，只要键值对存在 $('img[alt=aa]').css('background','green') 下面的环境都是父子集 has选中了谁的子级是...xx，父级执行了命令 find选中子集执行了命令 下面的选择器很重要 .parent()选择元素的父元素 可以先用一个this，然后找到这个元素的父级。....children()选择元素的所有子元素 括号里面放具体的哪一个子集。...和mouseleave事件指定处理函数 mouseover()鼠标进入（进入子元素也触发） mouseout()鼠标离开（离开子元素也触发） mouseenter()鼠标进入（进入子元素不触发） mouseleave...验证两组不一样的时候，鼠标先进入父级，再进入子级，然后没有再次触发，验证成功。如果是直接进入子级的话，因为子级和父级是一体的，会触发。 <!
返回一个新创建的JQuery对象； 另：JQuery中定义的许多方法返回值都是JQuery对象(方法的调用者)；JQuery中函数:.each() JQuery中方法：**.each()没有符号; JQuery...方法的4种不同调用方式： 参数是字符串表示的CSS选择器：$('.class')返回当前文档中匹配到的元素集。...第二个参数是可选的，值为一个元素或JQuery对象；这时返回的是特定元素的子元素中匹配到的元素集； 参数是Element、Document或Window对象，返回这些对象封装成的JQuery对象； 参数是...；map的返回值为新的包含回调函数所有返回值的JQuery对象； index() : 参数为一个元素或字符串(当做CSS选择器使用)，返回值为该元素在此JQuery对象中的索引值，找不到返回-1； is...; //触发没有命名空间的单击处理程序； $('p').trigger('click','true'/[]); //第二个参数为触发的处理程序的参数，传入数组时为多个参数； 4
一、jQuery选择器 在CSS3选择器标淮草案定义的选择器语法中，jQuery支持相当完整的一套子集，同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是 jQuery选择器。...被过滤的元素的文本是由textContent或innerText属性来决定的—这是原始文档文本，不带标签和注释 :disabled 匹配禁用的元素 :empty 匹配没有子节点、没有文本内容的元素...例如，下面这个选择器选取的元素在其父节点的子元素中排行第1或第2等，只要它们含有“JavaScript”单词，就不包含元素。...选择器组匹配的元 素只要匹配该选择器组中的任何一个选择器就行。对我们来说，一个简单选择器也可以认为是一个选择器组。...你会注意到这些选取方法中的多数提供的功能与选择器语法的功能是一样的。 提取选中元素最简单的方式是按位置提取。
子选择器以“>”表示，子选择器是指定父元素包含下的子元素。...:not()表示否定伪类选择器，TA可以排除掉特定元素，TA和jQuery中的:not选择器用法一模一样。 及其以下的浏览器不支持目标伪类选择器)。...目标伪类选择器是形如E:target,TA匹配E的所有元素，并且匹配元素被相关的URL指向，目标伪类选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才被执行。 ※当在浏览器中打开这个文件，在URL后面附加”#demo1“，以锚点方式链接到时，该元素的样式就会发生相应的变化
简洁写法: $(function(){ // jQuery functions go here }); jQuery选择器 我们通过JQuery选择器来选择⼀些HTML元素.然后对元素进⾏操作....JQuery选择器基于已经存在的CSS选择器,除此之外,还有⼀些⾃定义的选择器. jQuery中所有选择器都以 开头：()....删除元素和内容，⼀般使⽤以下两个jQuery⽅法： remove():删除被选元素（及其⼦元素） empty():删除被选元素的⼦元素。...代码示例： 删除被选元素（及其子元素） 我是⼀个div 删除 div 元素 $(function...元素上移除 toggleClass(): 切换元素的类，即如果元素已经有该类，则移除；如果没有，则添加。
选择符与遍历 (): 函数接受css选择符作为参数，充当一个工厂函数，返回对应元素的JQuery对象。...3种基本的选择符: 标签名 $(‘p’) ID $(‘#myid’) 类 $(‘.myClass’) 子元素组合符>: $(‘#myid > li’)选择id为myid的元素的所有列表项(li...否定式伪类: $(‘#myid li:not(.myClass)’)选择id为myid的元素中不属于myClass类的所有列表项(li)....事件捕获和事件冒泡：事件捕获是从父节点开始将事件传递给子节点，而事件冒泡则正好相反。JQuery采取事件冒泡的策略。 事件对象：事件发生时执行的函数可以把事件对象作为参数。...event.target属性：保存发生事件的目标元素 event.stopPropagation(): 阻止事件继续冒泡 event.preventDefault(): 阻止事件的默认操作 $(
通过 __proto__ 可以查看该对象的的原型（即jQuery本身）所具有的属性和方法。 2.2 jQuery选择器 jQuery选择器类似CSS选择器的机制的一种操作HTML元素的方式。...基本选择器 层级选择器 基本过滤选择器 内容选择器 可见性选择器 属性选择器 子元素选择器 表单选择器 2.2.1 基本选择器 jQuery中基本的选择器，常用的分别为：标签选择器、类选择器和ID选择器...$("div:not(:animated)")匹配当前没有执行动画的元素 :target 选择由文档URI的格式化识别码表示的目标元素 若URI为http://example.com/#foo...:last-of-type 选择所有相同的元素名称的最后一个子元素 :only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素 :nth-last-of-type(index/even...过滤方法： 语法 说明 eq(index) 获取第N个元素 filter(expr|obj|ele|fn) 使用选择器、对象、元素或函数完成指定元素的筛选 hasClass(class) 检查当前的元素是否含有某个特定的类
1.2、jQuery特点 jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。...在其核心，jQuery重点放在从HTML页面里获取元素并对其进行操作。如果你熟悉CSS，就会很清楚选择器的威力，通过元素的特性或元素在文档中的位置去描述元素组。...选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class...在jQuery中，可以获取同一类名的多个HTML元素，编写方式同CSS，即在类名的前面加上点号。...语法：$(".className") 本例通过类名来获取元素，因为使用同一个类样式的元素可能有多个，所以通过类名来获取元素返回的将是一个数组对象，即jQuery中的包装集，然后对此包装集中的元素进行相关操作
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
