(可以是ID选择器、元素选择器或是类名选择器)组合在一起,两个选择器之间以逗号”,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的...注意:多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个匹配的元素合并后一起返回。...匹配所有给定元素的第一个子元素 示例:(“ul li:first-child”) //匹配ul元素中的第一个子元素li :...匹配ul元素中的最后一个子元素li :only-child 说明:如果某个元素是它父元素中唯一的子元素,那么将会被匹配,如果父元素中含有其他元素,...示例:(“ul li :nth-child(even)”) //匹配ul中索引值为偶数的li元素 四、属性选择器 属性选择器就是通过元素的属性作为过滤条件进行筛选对象
子元素过滤选择器 — 重点 在每个父元素中进行分组,查找指定的子元素,下标从 1 开始 (1). :first-child 第一个子元素 语法: $('li:first-child'); (2)....:last-child 最后一个子元素 语法: $('li: last -child'); (3)....:nth-child(index) 第 index 个子元素 语法: $('li:nth-child(2)'); 奇数个: $('li:nth-child(odd)'); 偶数个: $('li:nth-child...:only-child 只有一个子元素的元素 语法:$('li:only-child'); 12. 属性选择器 (1)....无法为后添加的元素执行绑定 (2). on()函数的第二种使用方法——委托给父元素进行事件代理 ①. $('parent').on('事件名称', '子元素选择器', fn) A.
”) 属于其父元素的最后一个 元素的所有 元素 :nth-child(n) $(“p:nth-child(2)”) 属于其父元素的第二个子元素的所有 元素 :nth-last-child...(n) $(“p:nth-last-child(2)”) 属于其父元素的第二个子元素的所有 元素,从最后一个子元素开始计数 :nth-of-type(n) $(“p:nth-of-type(2)...3.过滤选择器(重点) 基本过滤器: $("li:first") //第一个li $("li:last") //最后一个li $("li:even") //挑选下标为偶数的li...$("li:odd") //挑选下标为奇数的li $("li:eq(4)") //下标等于 4 的li(第五个 li 元素) $("li:gt(2)") //下标大于 2 的li...(元素或文本)的所有元素 3.3 可视选择器 Visibility Filters $("li:hidden") //匹配所有不可见元素,或type为hidden的元素 $("li:visible
或者type为hidden的元素 演示样例 描写叙述:查找隐藏的 tr HTML 代码: Value 1 匹配其父元素下的第N个子或奇偶元素 ‘:eq(index)’ 仅仅匹配一个元素,而这个将为每个父元素匹配子元素。...2)”) 结果: [ li>Karlli>, li>Taneli> ] :first-child 匹配第一个子元素 ‘:first’ 仅仅匹配一个元素。...而此选择符将为每一个父元素匹配一个子元素 演示样例描写叙述:在每一个 ul 中查找第一个 li HTML 代码: li>Johnli> li>Karlli>...匹配最后一个子元素 ‘:last’仅仅匹配一个元素,而此选择符将为每一个父元素匹配一个子元素 演示样例描写叙述:在每一个 ul 中查找最后一个 li HTML 代码: li>John
特征 熟悉的语法:cheerio实现了jQuery核心的一个子集。 cheerio删除了从jQuery库中和不同浏览器不一致的东西,揭示其真正华丽的API。...像jQuery中,它是对DOM中选择目标选择器的主要方法,但又不同于jQuery是建立在顶部的 CSSSelect 库,它实现了大部分的Sizzle选择器。...示例: $('.apple') // 选择器定位到class 为apple的目标 $('ul .pear') // 选择器定位到 ul 中 class 为 pear 的目标 $('li[class...=orange]') // 选择器定位到 li 中 class 为arange的目标 看到上述中的选择器的API是不是和jQuery中很相似。....attr(name[, value]) 这个方法可以获取和设置属性,第二个参数是可选的。当第二个参数不存在时表示获取属性的值,当有带有第二个参数时,表示设置属性的值。
//概述 匹配第一个子元素 类似的(:first)匹配第一个元素,而次选择符将为 每个父元素匹配一个子元素· 描述 在每一个ul中查找第一个li HTML代码 li>John...,第一个参数为当前元素的索引值,第二个参数为原先的属性值· name描述: 返回文本中所有图像的src属性值· jQuery代码 $("img").attr("src") properties...properties 作为属性的"名、值对"对象 key,value 1·属性名称 2·返回属性值的函数·第一个参数为当前元素的索引值·第二个参数为原先的属性值· 参数name描述 选中复选框为,...对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个,当参数为负数时为反向选取·比如-1为倒数第一个,具体可以看一下实列 类似的有get(index),不过get...· //和个方法用于缩小匹配的范围·用逗号分隔多个表达式· expr //字符串值·包含供匹配当前元素集合的选择器表达式· jQuery objext //现有的jQuery对象·以匹配当前的元素
) ) 在on的第二参数中提供了一个selector选择器,简单的来描述下 参考下面3层结构 目标节点... 上述ul有N个子元素li,如果需要响应每一个li的事件,那么常规的方法就是需要给所有的li都单独绑定一个事件监听,写法符合逻辑,但繁琐。...event.pageY:获取鼠标当前相对于页面的坐标 通过这2个属性,可以确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(左边)与 (顶边)的距离,简单来说是从页面左上角开始,即是以页面为参考点...") }); alert需要执行的条件:必须有用户点击才可以。...如果它们不是由目标元素直接触发的,那么它就不会进行任何处理 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。
案例:查找id为da3的元素 html代码: jquery代码: $("#...= value] 匹配所有不含有特定的属性 [attribute ^= value] 匹配给定的属性以某值开始的元素 [attribute $= value] 匹配给定的属性以某值结尾的元素 [attribute...*= value] 匹配有包含某些值的特定元素 [selector1][selector2] 同时满足多个条件使用 $("div[id]"); <div...:first-child 匹配每个父元素下的第一个子元素 :last-child 匹配每个父元素下的最后一个子元素 :only-child 匹配父元素中只有唯一的子元素,如果父元素中有多个子元素,就不会被匹配...attr(name); 获取属性值 attr(properties); 以“名/值对”对象添加属性 attr(key,value); 为所匹配的元素设置属性值 attr(key, function(index
each( callback ) 以每一个匹配的元素作为上下文来执行一个函数 举例:1 复制代码代码如下: $("span").click(function){ $("li").each(function...li>"); }); jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。 设置默认的全局AJAX请求选项。...","号分割多个expr,用于实现多个条件筛选. ilter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。...子元素过滤选择器 $("ul li:nth-child(2)"), $("ul li:nth-child(odd)"), 匹配父元素的第n个子元素 $("ul li:nth-child(3n + 1)...") 匹配父元素的唯一1个子元素 表单元素选择器 $(":input") 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button $(":text") 匹配所有类型为
先创建元素点,创建元素节点使用Jquery的工厂函数 li1=("li>li>") 代码返回$li1就是一个由DOM对象包装成的JQuery对象。...2、创建文本节点 使用JQuery的工厂函数$()同样能够创建文本节点,创建文本节点的JQuery代码如下: li2=("li>苹果li>"); 代码返回$li2就是一个由...("li title='芒果'>芒果li>") 该方法将查找元素ul然后将新建的li元素作为ul子节点,且作为ul的第一个子节点插入到ul中。 ...='西瓜’>西瓜li>").prependTo("ul"); 该方法将新建的元素li插入到查找到的ul元素中作为ul的第一个子节元素。 ...closest()方法()用来取得最近的匹配元素,首先检查当前元素是否匹配如果匹配则直接返回,否则继续向上查找父元素中符合条件的元素返回,如果没有匹配的元素则返回空JQuery对象。
当鼠标移出这个元素时,会触发指定的第二个函数。...expr,用于实现多个条件筛选 filter(fn) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。...$(”ul li: nth - child(2)”), $(”ul li: nth - child(odd)”), 匹配父元素的第n个子元素 $(”ul li: nth - child(3n + 1)...dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。...当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over,离开时置为out。
中的window对象,把元素利用包装成jQuery对象,就可以调用jQuery的方法 代码展示: 的选择器采用了层次选择器,且在选择的li中加入了判定条件,用[]包裹 // 文本修改的两种方法有text和html // 这里获得值...,第二个是属性值 $('#test-ul li[class=javascript]').css("color","red"); // 当需要修改多个属性时,用{}包括起来...,里面用“,”隔开,并且以“:”的形式赋值 $('#test-ul li[class=javascript]').css({"color":"blue","backgroundColor.../index.html 结束语 关于jQuery的内容我们仅做出相关介绍,后期我会出一期jQuery的常用操作,希望可以为你带来帮助!
='x']").css("color","red"); // 选取 href 属性以 www 开头的元素 $("[href^='www']").css("color","red");...// 选取 href 属性以 com 结尾的元素 $("[href$='com']").css("color","red"); // 选取 href 属性包含 a 的元素 $("..."); // 下标为 2 的 li $("li:eq(2)").css("color","red"); // 下标大于 1 的 li $("li:gt(1)").css(...$("div").fadeTo(1000,0.5); }); 链 链是允许在同一个元素上在一条语句中运行多个 jQuery 方法,可以把动作/方法链接在一起...first() 过滤第一个元素 last() 过滤最后一个元素 eq(index) 过滤到下标为 index 的元素 not() 除了什么之外的元素 is() 返回布尔,判断是不是这种元素 <button
class="item">jQuery事件大全li> li>jQuery的插件开发" class="item">基于jQuery的插件开发...li> li>jQuery" class="item">Wordpress & jQueryli>...](复合型属性过滤器,同时满足多个条件) 将title以"jQuery"开始,并且class="item"的a标签隐藏,那么jQuery事件大全" class="item...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素,:last-child表示最后一个子元素。...——5.2 :only-child 当某个元素有且仅有一个子元素时,:only-child才会生效。
$("div:not(:animated)")匹配当前没有执行动画的元素 :target 选择由文档URI的格式化识别码表示的目标元素 若URI为http://example.com/#foo...box开始的所有元素 [attr$=value] 获取属性值以value结尾的元素 $("div[class$=er]")获取class属性值以er结尾的所有元素 [attr*=value...n个子元素。...计数从最后一个元素开始到第一个 :nth-of-type(index/even/odd/公式)) 选择同属于一个父元素之下,并且标签名相同的子元素中的第n个子元素 :first-of-type 选择所有相同的元素名称的第一个子元素...自定义选择器 $.expr[":"].方法名称 = function(obj) { // 自定义选择器代码 return 匹配HTML元素的条件; }; 用户可以利用jquery.expr
选取页面中元素可以使用jQuery给我们提供的$()方法,该方法需要提供选择器作为参数,方法执行完成后会返回给我们一个jQuery对象,被选取的元素就包含在该对象中。...class属性值恰好等于top的p元素) tag[attr|="value"] $('p[class|="top"]') 选择所有class属性值为连接符分隔的字符串并且该字符串以top开头的p元素和class...选择所有class属性值为连接符分隔的字符串并且该字符串以center开头的p元素和class属性值恰好等于center的p元素 var $p7 = $('p[class|="center"]'...选择器的a元素 :target $(':target') 选择处于目标状态的元素(锚链接目标元素) :hidden $(':hidden') 选择处于隐藏的状态 :visible $(':visible...$('div:parent') 选择匹配元素集合中包含子元素的所有div元素(包括文本节点) 2.7 选取表单元素 jQuery提供了一些专门为表单设计的选择器,用于快速访问表单元素。
下的子元素; :last:同上了,只是是最后一个而已; :first- child:为每个父元素匹配第一个子元素,如li:first-child返回每个ul的第一个li元素。...可以这样理解,页面中的元素有相同的父元素 的,并且里面又包含li元素的,那么就取第一个li元素,每个子类集合都要进行判断,直到找出所有符合要求的li元素; :last-child:这个也与上面相对了,...如:[*]li:nth-child(2)返回li元素,并且该元素是其父元素的第二个子元素; :nth-child(even|odd):返回偶数或奇数的子节点; :nth-child(An+B):返回满足表达式...An+B的所有子节点,比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素; :even:页面范围内的处于偶数位置的元素,如:li:even返回全部偶数li元素; :odd:页面范围内的处于奇数位置的元素...; :eq(n):第n个匹配的元素(n从0开始),如:li:eq(3)返回整个页面的第四个li元素,ul li:eq(1)返回页面中第一个ul元素下的第二个li元素,注意:只匹配一次就返回了; :gt
标记语⾔: 由标签构成的语⾔(注意在后面经常会使用到这个标签) 例如以下: 我是⼀级标题 我是⼆级标题 我是三级标题 这里的h1,h2就是标签;...li> li>1111li> li>2222li> li>3333li> 提交 其中的标签的选择器就是如下所示的...最⼤的区别) 4.通配符选择器 * { color: red; } 注意:置⻚⾯所有元素, 颜⾊为红⾊ 5.复合选择器 ul li a { color: blue; } 注意:这里的的标签是有先后顺序的...,我们在代码中就是这个jQuery的文件了,那么我们就可以使用这个jQuery来操作JavaScript了; 2.jQuery的基础语法知识 jQuery 语法是通过选取 HTML 元素, 并对选取的元素执...⾏某些操作 $(selector).action() 注意: $() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素
2、jQuery对象与DOM对象: jQuery对象与DOM对象是不一样的,看下面例子: 需求:我们要获取页面上这个id为test的p元素,然后给这个文本节点增加一段文字:“hello world”...:red">替换第二段的内容').replaceAll('p:eq(1)') 结果就是“第二段”被替换成了“替换第二段的内容”,并且文字为红色。...3、closest()方法: 以选定的元素为中心,往内查找可以通过find、children方法。...区别有以下3点: 起始位置不同:.closest开始于当前元素 .parents开始于父元素 遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,...还有一种方式,就是动态创建P标签加入到合集,然后插入到指定的位置,但是这样就改变元素的本身的排列了,语法如下: $('li').add('新的p元素').appendTo(目标位置) 6
课程目标 掌握jQuery常用API的使用 了解jQuery的设计思想 jQuery基本介绍 为什么要学jQuery 【01-让div显示与设置内容.html】 使用JS操作DOM的时候,会遇到以下的一些缺点...{});就是典型的DOM对象转jQuery对象 jQuery对象转换成DOM对象: var $li = $(“li”); //第一种方法(推荐使用) $li[0] //第二种方法 $li.get(0)...【练习:隔行变色案例.html】 【练习:开关灯案例】 选择器 什么是jQuery选择器 jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。...”); 获取同一类标签的所有元素 并集选择器 $(“div,p,li”); 使用逗号分隔,只要符合条件之一就可。...交集选择器 $(“div.redClass”); 获取class为redClass的div元素 子代选择器 $(“ul>li”); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器