名称 用法 描述 子代选择器 $(“ul>li”) 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”) 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等...跟CSS的选择器一模一样。...div>33 44 55 66 77 88 jquery...-1.12.4.js"> $(function () { //$("s1,s2")// 并集选择器 //$("s1 s2")// 后代选择器...//$("s1>s2")// 子代选择器 //$("li.green") //$("s1s2") //交集选择器 //$("#father
② 层级选择器 * $("A B ") 后代选择器 * $("A > B") 子选择器 ③ 属性选择器 * $("A[属性名...CRUD ① append():父元素将子元素追加到末尾 * 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾 ② prepend():父元素将子元素追加到开头...* 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点 6. 动画 1....,继续下次循环(continue) ③ $.each(object, [callback]) ④ for..of 【query 3.0 版本之后提供的方式】 * for(元素对象 of 容器对象...* 注意:1.9版本后 .toggle() 方法删除,引入 jQuery Migrate(迁移)插件可以恢复此功能。 9.
jQuery选择器 jQuery的基本用法 jQuery.js”> 后代元素,一路向下直到最后一个后代,可选参数来过滤对后后代元素的搜索 (selector).siblings() –...(selector).first() – 将匹配元素集合缩减为集合中的第一个元素。 (selector).last() – 将匹配元素集合缩减为集合中的最后一个元素。...(selector).each() 对对象进行迭代,为每个元素执行函数 (selector).toArray() 以数组的形式返回 jQuery 选择器匹配的元素 (selector).text()...在被选元素的开头插入内容 (selector).after() – 在被选元素之后插入内容 (selector).before() – 在被选元素之前插入内容 (selector).remove() – 删除被选元素(及其子元素
JQuery 基础: 1. 概念: 一个JavaScript框架。...JQuery对象和JS对象区别与转换 1. JQuery对象在操作时,更加方便。 2. JQuery对象和js对象方法不通用的. 3....后代选择器 * 语法: $("A B ") 选择A元素内部的所有B元素 2....CRUD操作: 1. append():父元素将子元素追加到末尾 * 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾...* 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点
文章目录 jQuery概念 快速入门 步骤: JQuery对象和JS对象区别与转换 选择器:筛选具有相似特征的元素(标签) 基本操作学习 事件绑定 入口函数 样式控制:css方法 分类 基本选择器...标签选择器(元素选择器) id选择器 类选择器 并集选择器 层级选择器 后代选择器 子选择器 属性选择器 属性名称选择器 属性选择器 复合属性选择器 过滤选择器 首元素选择器 尾元素选择器 非元素选择器...对class属性操作 CRUD操作: append():父元素将子元素追加到末尾 prepend():父元素将子元素追加到开头 appendTo(): prependTo(): after():添加元素到元素后边...的属性值”) 获得与指定的class属性值匹配的元素 并集选择器 语法: $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素 层级选择器 后代选择器 语法: $("A B ") 选择A元素内部的所有...对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点 案例 全选和全不选 代码如下: <!
JQuery对象和JS对象区别与转换 1. JQuery对象在操作时,更加方便。 2. JQuery对象和js对象方法不通用的. 3....获取多个选择器选中的所有元素 2. 层级选择器 1. 后代选择器 * 语法: $("A B ") 选择A元素内部的所有B元素 2....CRUD操作: 1. append():父元素将子元素追加到末尾 * 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾 2. prepend():父元素将子元素追加到开头...对象1和对象2是兄弟关系 9. remove():移除元素 * 对象.remove():将对象删除掉 10. empty():清空元素的所有后代元素。...* 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点 6. 案例
注意:jQuery选择器返回的是jQuery对象。 jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多扩展性的选择器。...【查看jQuery文档】 jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。 所以我们平时真正能用到的只是少数的最常用的选择器。...层级选择器 名称 用法 描述 子代选择器 $(“ul>li”); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有...“ul”).find(“li”); 相当于$(“ul li”),后代选择器 siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点,不包括自己本身。...(可选),如果没有后代元素,那么事件将有自己执行。
选择器 jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。...注意:jQuery选择器返回的是jQuery对象。 jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多扩展性的选择器。...层级选择器 名称 用法 描述 子代选择器 $(“ul>li”); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有...(“ul”).find(“li”); 相当于$(“ul li”),后代选择器 siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点,不包括自己本身。...(可选),如果没有后代元素,那么事件将有自己执行。
最新版本:3.2.1(2017年3月20日) (2)jquery-xxx.js 与 jquery-xxx.min.js区别 jquery-xxx.js:开发版本。给程序员看的,有良好的的缩进和注释。...语法:$(".class的属性值")获得与指定的class属性值匹配的元素 并集选择器。语法:$("选择器1,选择器2...") 获取多个选择器选中的所有元素 (2)层级选择器 后代选择器。...3、CRUD操作 1. append():父元素将子元素追加到末尾 * 对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾 2. prepend():父元素将子元素追加到开头...对象1和对象2是兄弟关系 9. remove():移除元素 * 对象.remove():将对象删除掉 10. empty():清空元素的所有后代元素 * 对象.empty():将对象的后代元素全部清空...,但是保留当前对象以及其属性节点 六、案例 1、案例需求 进行一个QQ表情的选择。
jQuery特性 隐式迭代 链式编程,在于一个方法返回的是一个jQuery对象,既然是jQuery对象就可以点出jQuery的方法来 window.onload 资源加载完成时调用 $(function...选择器 基本选择器 Id选择器 $(‘#btn’) 类选择器 $(‘.tx’) 标签选择器 $(‘li’) 并集选择器 $(‘.hf, .wsy’) 交集选择器 $(‘li.nj...’) li标签下的类名为nj的选择器 层级选择器 子代选择器 $(‘ul>li’) 后代选择器 $(‘ul li’)过滤选择器 这类选择器都带冒号 :eq(index) $(“li:eq...’) 相当于$(‘ul>li’),子类选择器 find(selector) $(‘ul’).find(‘li’) 相当于$(‘ul li’) 后代选择器 siblings(selector) $(‘...需要转换为jquery对象 }) mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 mouseenter 事件只在鼠标移动到选取的元素上时触发 以后如果有鼠标移入事件,请使用mouseenter
引用 jquery/2.1.4/jquery.min.js"> 文档就绪...$(document).ready(function(){ // 开始写 jQuery 代码... }); 选择器 #id 选择器 .class 选择器 :type 类型选择器 ("*")选取所有元素在线实例...,#id1") //组合选择器 2.层次选择器 $("#id>.classname ") //子元素选择器 $("#id .classname ") //后代元素选择器 $("#id...删除元素/内容 remove() - 删除被选元素(及其子元素) remove() 中添加参数,删除时对该元素进行过滤 empty() - 从被选元素中删除子元素 jQuery 操作 CSS addClass... 返回介于两个给定元素之间的所有祖先元素,$("span").parentsUntil("div"); 向下遍历 DOM 树 children() - 所有直接子元素 find() - 被选元素的所有后代元素
window.document window.document.bodyChapter 2 基本语法 1 编写位置 可以在html代码中直接编写js语句,也可单独将js...+事件 1.4 文档就绪函数 $(document).readY(function(){ }); 为了防止在文档加载完成前就运行jqury代码 1.5 jquery 选择器...click(function(){ $("#test2").append("hi"); }) }); #删除元素 remove() 删除元素及其子元素...div的父元素 # jQuery 后代 children() 返回所有直接子元素 find("*") 返回所有后代 find("span") 返回span...标签的后代 var open_buttion= $(obj).parent().prev().children(); # jQuery 同胞 (水平遍历)
jQuery框架,简介,优势,安装,语法,jQuery选择器,id选择器,类选择器,标记选择器,属性选择器,位置选择器,后代选择器,子代选择器,选择器对象,选择器对象遍历,页面初始化,jQuery的dom...就是说它非常请求,大小在30kb左右;具有强大的选择器和dom操作的封装,可靠的事件处理机制,有完善的ajax,jquery将所有的ajax操作封装到函数``$.ajax()`中;具有丰富的插件,完善的文档..."div:first") 匹配所有div中第一个div元素 后代选择器 $("ancestor descendant") 匹配给定的祖先元素的所有后代元素 $("#ul li") 匹配 id 为null...注意:$(A).before(B)的操作,不是将B插入A前面,而是将A插入B前面 删除HTML元素 删除HTML元素一般使用jquery中的remove()和empty() remove()的作用就是从...dom中删除被选元素以及子元素,就是如果某个元素被删除了,那么它的后代元素也都被删除。
* 通配符选择器 E 元素选择器 .class 类选择器 #id id选择器 E F 后代选择器 E + F 相邻兄弟选择器 E ~ F 通用兄弟元素选择器 E[attr] 只使用属性名 :link...应用于文档中被用户高亮的部分 jQuery中的基本选择器:id选择器,类选择器,元素选择器,后代选择器,属性选择器。...jQuery选择器匹配的元素 .add() 将元素添加到匹配元素的集合中 .addSelf() 把堆栈中之前的元素添加到当前集合中 .children() 获取匹配元素集合中每个元素的所有子元素 .closest...() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态 .eq() 将匹配元素集合缩减为位于索引的新元素 .filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 ....find() 获取当前匹配元素集合中的每个元素的后代,由选择器进行筛选 .first() 将匹配元素集合缩减为集合中的 第一个元素 .has() 将匹配元素集合缩减为包含特定元素的后代的集合 .is()
因此给他传入的参数不同,效果也是不一样的: 如果参数传递的是一个匿名函数,那么就是入口函数 如果传递的是一个字符串,那么可能是选择器/创建一个标签 如果参数是一个dom对象,那他就会把dom对象转换成JQuery...对象 dom对象和JQuery对象 dom对象:原生js选择器获取到的对象 只能调用dom方法或者属性,不能调用JQuery的属性或者方法 JQuery对象:利用JQuery选择器获取到的对象 只能调用...// ID选择器 $('#id') // class选择器 $('.class') // 标签选择器 $('div') // 并集选择器,逗号隔开,满足其一即可 $('div,p,li') // 交集选择器...,没有分隔 $('div.class') 层级选择器 // 子代选择器 $('ul>li') // 后代选择器 $('ul li') 过滤选择器 可以从获取到的元素中过滤出索引号对应的元素 // 获取索引号为...mouseover事件在鼠标移动到选取的元素及其子元素上时触发 mouseseenter mouseseenter事件只在鼠标移动到选取的元素上时触发 类操作 // 添加类 addClass(类名)
选择器 3. jQuery 事件 二、jQuery HTML 1. jQuery 获取 2. jQuery设置内容和属性 3. jQuery 添加 4. jQuery 删除 5....尺寸 三、 jQuery 遍历 1. 祖先(向上遍历) 2. 后代(向下遍历) 3. 同胞(水平遍历) 4. 过滤 四、jQuery AJAX 0. 原理 1. 加载 2. Get/Post 3....选择器 (1)元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 元素。...(3)CSS选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。...后代(向下遍历) children() - 返回被选元素的所有直接子元素。 find() - 返回被选元素的后代元素,一路向下直到最后一个后代。
,根据这个字符串查找元素节点对象 4.传入参数为DOM对象时,将DOM对象包装成JQuery对象返回 dom对象转jquery对象----》$(dom对象) jquery对象转dom对象----》jquery...选出来的是兄弟元素,不会选出子元素 基本过滤器中的:eq(index)包含儿子和后代,而:nth--child()只会找儿子,不包括后代 Dom属性操作 注意:JS中attr和prop区别 Jquery...对象转化为jquery对象,改变颜色 使用JQuery对象,改变颜色 将Jquery对象转化为dom对象...for循环.each方法 ---- 对选择器的小总结 选择器的小总结 ---- 元素筛选方法----对选择器筛选后的方法,再次进行筛选 ---- jQuery选择器总结(选择器+元素筛选) jQuery...,而:nth–child()只会找儿子,不包括后代 jQuery.contents() 函数详解 ---- Dom属性操作 注意:JS中attr和prop区别 JS中attr和prop区别 ----
第2章 选择器 jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。...jQuery选择器有很多,基本兼容了CSS所有的选择器,并且jQuery还添加了很多更加复杂的选择器。...(查看jQuery文档) jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。...层级选择器(重点) 名称 用法 描述 子代选择器 $(‘ul > li’); 使用-号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(‘ul li’); 使用空格,代表后代选择器,...’); 相当于$(‘ul li’),后代选择器 siblings(selector) $(’#first’).siblings(‘li’); 查找兄弟节点,不包括自己本身。
丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...class类的div标签 所有元素选择器: $("*") 组合选择器: $("#id, .className, tagName") 层级选择器: x和y可以为任意选择器 $("x y");// x的所有后代...)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 例子: $("div:has(h1)")// 找到所有后代中有h1标签的div.../ 找到所有后代中不含a标签的li标签 属性选择器: [attribute] [attribute=value]// 属性等于 [attribute!...示例:开关灯和模态框 CSS css("color","red")//DOM操作:tag.style.color="red" 示例: $("p").css("color", "red"); //将所有p