概念:DOM 文档对象模型(必考),jQuery Dom应该是之前的DOM加了个jQuery的封装。...//首先$(".gameList li:eq(1)").clone():克隆; //第二步:追加到$(".gameList")最后;...--li序号:2--> div> 克隆<!...语法 功能 attr() 获取属性节点 attr({name1:value1,..n,nameN:valueN}) 设置属性节点的多个属性的值 removeAttr(属性名) 删除指定的属性节点...,没有则增加样式; 2.追加节点有4个,2个子元素街边;2个兄弟元素级别; 3.节点操作就是删除、清空、复制、替换(删改) 4.属性节点:attr() attr('name','name) 5.节点的遍历
4.jQuery的DOM操作 使用jQuery的九种选择器可以基本选中需要操作的对象,但是为了提高jQuery的查询效率,可以结合jQuery的内置查找函数一起使用 ①:查询 children([expr...($newNode) 内部开始位置追加 l 外部插入: $node.after($newNode) 在存在元素后面追加 -- 兄弟 $newNode.insertBefore($node) 在存在元素前面追加...⑥:jQuery删除元素 选中要删除元素.remove() ---- 完成元素删除 选中要删除元素.remove(expr) ----- 删除特定规则元素 remove删除节点后,事件也会删除 detach...⑦:jQuery复制和替换 l 复制节点 $(“p”).clone(); 返回节点克隆后的副本,但不会克隆原节点的事件 $(“p”).clone(true); 克隆节点,保留原有事件 l 替换节点 $(...5.jQuery事件 ①:事件绑定 传统js 一般一个对象只能绑定某种事件一个函数 jQuery 支持对同一个对象,同一个事件可以绑定多个函数 绑定事件函数到对象有两种写法 写法一 $("div").click
(){ //1.删除节点的操作;删除某个节点:现在要删除艾泽拉斯; //$(".gameList li:eq(1)").remove(); //2.清空节点内容:是删除吗?...//首先$(".gameList li:eq(1)").clone():克隆; //第二步:追加到$(".gameList")最后; $(".gameList").prepend($...--li序号:2--> div> 克隆<!...语法 功能 attr() 获取属性节点 attr({name1:value1,..n,nameN:valueN}) 设置属性节点的多个属性的值 removeAttr(属性名) 删除指定的属性节点 <!...,没有则增加样式; 2.追加节点有4个,2个子元素街边;2个兄弟元素级别; 3.节点操作就是删除、清空、复制、替换(删改) 4.属性节点:attr() attr('name','name) 5.节点的遍历
获得jQuery对象,底层使用数组进行维护的,可以存放多个对象。 //然后通过get()可以从jquery对象转换成 dom对象。参数:数组的下标,可以省略。如果省略下标获得dom 数组。...,删除,包裹 1.内部插入 A.append(B) ,将B插入到A内部的后面。...(追加到后面) A.prepend(B) ,将B插入到A内部的前面。(追加到前面) A.appendTo(B) , 将A插入到B内部的后面。...(追加到后面) A.prependTo(B) 将A插入到B内部的前面。...,将A插入到B后面 3.复制 clone(event [,deepEven]) 参数1:表示是否克隆事件 参数2:子元素中绑定数据是否被克隆。
实例: $("div>****div>").appendTo('body'); prependTo(content)方法,跟appendTo(content)的使用方法一致,一个是追加到最后,一个是追加到最前...").replaceAll("p"); 2.10 清空子元素 empty()方法,删除匹配的元素集合中所有的子节点 $("p").empty(); 2.11 删除节点 remove()方法从DOM...中删除所有匹配的元素。...// 删除所有的p标签 $("p").remove(); 2.12 复制节点 clone([Even[,deepEven]])方法可以对节点进行克隆。...deepEven:一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。 $("b").clone().prependTo("p"); 3.
,只不过一个是在最后追加子节点,一个是在最前面追加子节点(prev vs after) 2.2 追加到appendTo(content)方法 参数:content: 用于被追加的内容选择器,String...实例: $("div>****div>").appendTo('body'); prependTo(content)方法,跟appendTo(content)的使用方法一致,一个是追加到最后,一个是追加到最前...DOM中删除所有匹配的元素。...// 删除所有的p标签 $("p").remove(); 2.12 复制节点 clone([Even[,deepEven]])方法可以对节点进行克隆。...deepEven:一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。 $("b").clone().prependTo("p"); 上传视频标签文本框特效案例: <!
为什么要学jquery 使用javascript开发过程中,有许多的缺点: 查找元素的方法单一,麻烦。 遍历数组很麻烦,通常要嵌套一大堆的for循环。 有兼容性问题。...完全没有兼容性问题。 * 4. 实现动画非常简单,而且功能更加的强大。 * 5. 代码简单、粗暴。...jquery的版本问题 官网下载地址:http://jquery.com/download/ jQuery版本有很多,分为1.x 2.x 3.x 1.x和2.x版本jquery都不再更新版本了,现在只更新...交集选择器 $(“div.redClass”); 获取class为redClass的div元素 总结:跟css的选择器用法一模一样。.../*如果想克隆事件 false true克隆事件*/ var $cloneP = $('p').clone(true); 添加&移动节点 /*追加自身的最后面 传对象和html
为什么要学jquery 使用javascript开发过程中,有许多的缺点: 查找元素的方法单一,麻烦。 遍历数组很麻烦,通常要嵌套一大堆的for循环。 有兼容性问题。...完全没有兼容性问题。 * 4. 实现动画非常简单,而且功能更加的强大。 * 5. 代码简单、粗暴。...jquery的版本问题 官网下载地址:http://jquery.com/download/ jQuery版本有很多,分为1.x 2.x 3.x 1.x和2.x版本jquery都不再更新版本了,现在只更新...交集选择器 $(“div.redClass”); 获取class为redClass的div元素 总结:跟css的选择器用法一模一样。.../*如果想克隆事件 false true克隆事件*/ var $cloneP = $('p').clone(true); 添加&移动节点 /*追加自身的最后面 传对象和html格式代码
DOM操作的内容 jQuery的DOM DOM转jQuery对象 DOM样式添加 jQuery元素属性设置 toggle切换 编辑html()与text()区别 DOM添加图片 纯dom添加元素 克隆元素...规划网页布局的标签:如〈table〉、〈tr〉、〈td〉、〈p〉、〈div〉等,其作用是描述网页内容的布局结构。...),不同类的结点对Web信息提取的重要度不同。...元素属性设置 设置单个属性: jQuery 对象.css(name,value); //其中name为样式名称,value为样式的值 同时设置多个属性: jQuery 对象.css({name:value...我是克隆体X——X号精钢狼 div id="show">div> jquery-3.4.1.min.js">
jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。 Ajax操作支持。...jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。...k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性 $('#p1').attr('id') "p1" $('#p1').attr('username...,在3.x版本的jQuery中则没有这个问题。...empty()// 删除匹配的元素集合中所有的子节点。
, 克隆节点包含原节点的属性和子元素 此节内容有大量的练习,建议大家做写,增强代码的熟练度。...最新版本 2.1.1,这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性) jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js jquery-...> ⑦:jQuery复制和替换 l 复制节点 $(“p”).clone(); 返回节点克隆后的副本,但不会克隆原节点的事件 $(“p”).clone(true); 克隆节点,保留原有事件 l 替换节点...事件 ①:事件绑定 传统js 一般一个对象只能绑定某种事件一个函数 jQuery 支持对同一个对象,同一个事件可以绑定多个函数 ?...id=1" id="dellink">删除资料 div>信息div> 七、jQuery的Ajax编程 1.回顾传统Ajax开发步骤 ①:创建xmlHttpRequest
(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 删除节点 remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素...当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用。...empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)。 复制节点 clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本....追加样式:addClass() 移除样式:removeClass() — 从匹配的元素中删除全部或指定的 class 切换样式:toggleClass() — 控制样式上的重复切换...语法:bind(type, [data], fn) 参数type:含有一个或多个事件类型的字符串。
jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。 Ajax操作支持。...jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。...attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性...,在3.x版本的jQuery中则没有这个问题。...empty()// 删除匹配的元素集合中所有的子节点。 例子: 点击按钮在表格添加一行数据。 点击每一行的删除按钮删除当前行数据。
方法,就算如此在实际操作中还是会存在很多问题,这里先不说。...而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题。...5、克隆节点clone(): 克隆可以理解为复制,用法如下: //clone处理一 $("div").clone() //只克隆了div结构,事件丢失 //clone处理二 $("div").clone.../p> div> unwrap()方法就是删除一个元素的父元素,作用与wrap()刚好相反。...直到找到一个匹配的就停止查找,parents一直查找到根元素,并将匹配的元素加入集合 结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的
事件委托 动画效果 jQuery jQuery封装了JS代码,使JS的编写更加简单,类似python的模块,在前端中叫“类库”,同时也兼容多个浏览器,提供了更多的功能,写的更少,功能却更多(write...文档处理 添加到指定元素内部的后面 $(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B 添加到指定元素内部的前面 $(A).prepend(B)// 把...empty()// 删除匹配的元素集合中所有的子节点。 替换 replaceWith() replaceAll() 克隆 clone()// 参数 案例: // clone方法不加参数true,克隆标签但不克隆标签带的事件 $("#b1").on("click", function...() { $(this).clone().insertAfter(this); }); // clone方法加参数true,克隆标签并且克隆标签带的事件 $("#b2").on("
jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。 Ajax操作支持。...jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。...attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性...bug,在3.x 版本的 jQuery 中则没有这个问题。...empty()// 删除匹配的元素集合中所有的子节点。 替换 replaceWith() replaceAll() //把所有的。。。替换成。。。 克隆 clone()// 参数 克隆示例 <!
jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。 Ajax操作支持。...jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。...attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性...,在3.x版本的jQuery中则没有这个问题。...练习题:全选、反选、取消 文档处理 添加到指定元素内部的后面 $(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B 添加到指定元素内部的前面 $(A).prepend
从这个版本开始,jQuery的性能达到了Prototype、Mootools以及 Dojo等同类JavaScript库的水平。...jQuery 1.5 (2011年1月31日):该版本修复了83个bug,解决了460个问题。...jQuery 1.8.3 2012年11月14日 jQuery 1.8.3 发布,修复 bug 和性能衰退问题、IE8中的HTML相关Bug、jQuery 1.8.2在IE9中调用ajax失败的问题 jQuery...而jQuery3修复了大量的bug,增加了新的方法,同时移除了一些接口,并修改了少量接口的行为,不1和2是不同的API。 更轻更快:2.0版本文件与1.9.1相比小了12%。...$("p").appendTo("div"); //p节点追加到div内后 $("p").prepend("Hello"); //每个p节点内前面追加内容 $("p").prependTo
绝大多数时候,妈妈再也不用担心我的JS兼容问题了(由于浏览器bug等因素,jQuery也无法100%地实现跨浏览器兼容,官方对这些少数API一般也作了特殊说明,而且这种情况极少遇到,因此可以忽略不计)。...class="foo bar">Hello CodePlayerdiv>'); // 包含一个临时的div元素,其内嵌一个子节点p元素 六:元素的筛选 // 以下方法都返回一个新的jQuery...属性 find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象 children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象 $("selector...( $B ); // 在$A内部的末尾位置追加$B $A.appendTo( $B ); // 将$A追加到$B内部的末尾位置 $A.prepend( $B ); // 在$A内部的开头位置追加$B $...(); // 删除$A,但保留其绑定的事件、附加数据等 $A.clone(); // 克隆一个$A 九:动画处理 $("selector").show(); // 显示隐藏的元素,默认不带过渡动画效果