下班之前终于搞定了使用$.ajax增加的动态元素获取不到的问题，原来是使用.on方法（老版本是.live），这里记录一下，顺便赞一下jQuery，通过使用getJSON,.append,.empty等， 唯一的一点就是版本太多了，最新版本支持的浏览器对于中国用户来说是个噩梦。 我是用法 $('#parent').on("click", "#child", function() {});//#parent是非ajax方式生成的，#child是ajax回来的数据 append到#parent的 我的代码 $('#taskComments').on("mouseenter", "#taskComment", function(){
前文回顾 riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法； riot.js教程【一】简介； 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可以使用 ，（有时候你需要对这些东西做一些特殊的处理才能用） 使用Jquery 如果你想在riot标签内部访问dom元素 你可能需要了解一下riot标签生命周期相关的知识 你会注意到，mount方法还没执行的时候 ，dom元素是不会被创建的 这就意味着，mount方法之前访问DOM元素，是不会成功的 请看如下代码： <example-tag> Do I even Exist? jquery是一点问题都没有的； 再看下面的代码（两种检索方式都是支持的，第一种就是jquery检索DOM） <example-tag> Do I even Exist ； 可以是一个简单的object； 也可以是动态变化的数据存储（flux store） 在标签内部，你可以使用如下方法访问这些输入参数 <my-tag> <!
Do I even Exist? jquery是一点问题都没有的； 再看下面的代码（两种检索方式都是支持的，第一种就是jquery检索DOM） <example-tag>
Do I even Exist ； 可以是一个简单的object； 也可以是动态变化的数据存储（flux store） 在标签内部，你可以使用如下方法访问这些输入参数 <my-tag> <!
代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿！
使用: <script src="<em>jquery</em>-3.5.1/<em>jquery</em>-3.3.1.min.js"></script> 注意: 如果<script> 在body前面,应该使用 jQuery 子代选择器 .one>.two 两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。 (没有子节点) selector:parent 获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent"); selector1:has(selector2 $('div:gt(2)') // 选择所有的div元素，除了前三个 $('div:animated') // 选择当前处于动画状态的div元素 创建元素: 创建元素节点：var 作为它的最后一个子元素 2) $A.appendTo(B) 将A追加到B的末尾，作为它的最后一个子元素 3) prepend() $A.prependTo(B)
： 不分元素类型的 选择器 说明 :first-child 选择父元素的第一个子元素 :last-child 选择父元素的随后一个子元素 :nth-child(n) 选择父元素下的第n个或奇偶元素,n的值为 "整数或odd或even" :only-child 选择父元素中唯一的子元素(该父元素只有一个子元素) 区分元素类型的 选择器 说明 :first-of-type 选择同元素类型的第一个子元素 :last-of-type 选择同元素类型的随后一个子元素 :nth-of-type 选择同元素类型的第n个或奇偶元素,n的值为"整数或odd或even" :only-of-type 匹配父元素中特定类型的唯一子元素(该父元素可以有多个子元素 ");//设置HTML内容 }); }); </script> 对元素的值进行操作 在jQuery中，使用val()方法返回或设置被选元素的value属性。 提供css()方法，用来获取或设置匹配的元素的一个或多个样式属性。
:only-child 只有一个子元素的元素 语法：$('li:only-child')； 12. 属性选择器 (1). 无法为后添加的元素执行绑定 (2). on()函数的第二种使用方法——委托给父元素进行事件代理 ①. $('parent').on('事件名称', '子元素选择器', fn) A. JQuery 中的函数第三部分：动画函数 — 隐藏和显示动画 隐藏和显示函数通过使用定时器修改目标元素的 width / height / opcaity 三个样式的值来实现动画 (1). $(..). JQuery 中的函数第三部分：动画函数 — 折叠展开/收起动画 折叠展开/收起动画函数通过使用定时器修改目标元素的height 一个样式的值来实现动画： (1). $(..).slideUp( ) JQuery 中的函数第三部分：动画函数 — 淡入/淡出动画 淡入/淡出动画函数通过使用定时器修改目标元素的 opacity 一个样式的值来实现动画： (1). $(..).fadeIn( )
（javaScriptQuery）JavaScript 代码库 官方网站：http://jquery.com/ 3、目前 jQuery 有三个大版本： 1.x：兼容ie678,使用最为广泛的，官方只做 使用前的准备 ? JQ中常用的选择器 一、基本选择器 1、id选择器 通过元素id获取相关元素 ? 2、元素选择器 获得body内的相关元素，如div、input等 ? 3、类选择器 通过元素类名获取相关元素，eq（）方法获取元素，下标从0开始 ? 4、通用选择器 找到每一个元素 ? 5、分组选择器 找到匹配任意一个类的元素。 ? 二、层级选择器 1、ancestor descendant 在给定的祖先元素下匹配所有的后代元素 ? 2、parent > child 在给定的父元素下匹配所有的子元素 ? 三、子元素选择器 1、:nth-child 匹配其父元素下的第N个子或奇偶元素 ‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。
jQuery获取： jQuery.parent(expr)，找父亲节点，可以传入 expr 进行过滤，比如 $("span").parent() 或者 $("span").parent(".class" ) jQuery.parents(expr)，类似于 jQuery.parents(expr) ，但是是查找所有祖先元素，不限于父元素 jQuery.children(expr)，返回所有子节点，这个方法只会返回直接的孩子节点 ，而 jQuery.find()，的返回结果，不会有初始集合中的内容，比如 $("p").find("span") ，是从 元素开始找 ，等同于 $("p span") JS获取： ; //获得s的最后一个子节点 JS获取节点父级，子级元素：JS的方法会比JQUERY麻烦很多，主要则是因为FF、谷歌浏览器会把你的换行也当作DOM元素：空的text元素，目前IE也是这样 原生的JS获取ID为test的元素下的子元素。
元素开始找 ，等同于 $("p span") JS获取： ; //获得s的最后一个子节点 JS获取节点父级，子级元素：JS的方法会比JQUERY麻烦很多，主要则是因为FF、谷歌浏览器会把你的换行也当作DOM元素：空的text元素，目前IE也是这样 原生的JS获取ID为test的元素下的子元素。
多个选择器同时使用 selector1,select2 例如 ： $("#xxid ,.xxxclass") 同时选择id 和 class匹配两类元素 练习1： ² 通过each() 在每个div元素内容前 ancestor元素下边的所有元素 $("form input") parent > child 获取parent元素下边的所有直接child 子元素 $("form > input") prev + next 获取紧随pre元素的后一个兄弟元素 $("label + input") prev ~ siblings 获取pre元素后边的所有兄弟元素 $("form ~ input") 练习2： ² 将 $("div:has(p)").addClass("test"); 含有p子元素的div :parent 选取含有子元素或文本节点的元素 $("td:parent") 所有不为空td元素选中 练习4： 区别 eq :first-child 选取第一个子元素 :last-child 选取最后一个子元素 :only-child 选取唯一子元素，它的父元素只有它这一个子元素 练习7： ² 选择id属性mytable
:contains :empty :has :parent 匹配包含给定文本的元素 匹配所有不包含子元素或者文本的空元素 匹配含有选择器所匹配的元素的元素 匹配含有子元素或者文本的元素 5.可见性选择器 *= value] 匹配有包含某些值的特定元素 [selector1][selector2] 同时满足多个条件使用 $("div[id]"); <div :first-child 匹配每个父元素下的第一个子元素 :last-child 匹配每个父元素下的最后一个子元素 :only-child 匹配父元素中只有唯一的子元素，如果父元素中有多个子元素，就不会被匹配 children(); 获取子元素 find(); 用于查找表达式 next(); 获取下一个元素 nextAll(); 获取下一个所有元素 parent(); 获取父元素 parents(); 获取所有匹配元素的祖先元素的集合 prev(); 获取前一个元素 prevAll(); 获取之前所有同辈元素 siblings(); $("div").siblings() add(); $("p").add("span") $("
选择器是 jQuery 最基础的东西，本文中列举的选择器基本上囊括了所有的 jQuery 选择器，也许各位通过这篇文章能够加深对 jQuery 选择器 的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写 jQuery 代码的效率。 属性来获取元素 2、层级选择器（重点） ancetor descendant ：选取祖先元素下的所有后代元素（多级） parent > child ：选择父元素下的所有子元素（一级） prev + :empty：获取内容为空的元素 :has(selector) ：获取内容包含指定选择器的元素 :parent ：获取内容不为空的元素（特殊） 5、可见性选择器 :hidden：获取所有隐藏元素 :visible :nth-child(index/even/odd) 从 1 算起，匹配子元素等于 index/even/odd 的元素 :first-child ：获取第一个子元素 :last-child ：获取最后一个子元素
三个版本的jQuery测试，看看浏览器在1秒内能够执行多少次。 可以看到，ID选择器遥遥领先，然后是标签选择器，第三是Class选择器，其他选择器都非常慢。 3. 理解子元素和父元素的关系 下面六个选择器，都是从父元素中选择子元素。 (1)$('.child', $parent) 这条语句的意思是，给定一个DOM对象，然后从中选择一个子元素。 它比最快的形式大约慢50%。 (4)$('#parent > .child') jQuery内部使用Sizzle引擎，处理各种选择器。 为了获取这个属性，必须连续两次调用jQuery，第一次是$(this)，第二次是attr('id')。 事实上，这种处理完全不必要。
这里是三条最常见的jQuery选择语句： $('.elem') $('.elem', context) context.find('.elem') 我们用1.4.2、1.4.4、1.6.2三个版本的jQuery 可以看到，ID选择器遥遥领先，然后是标签选择器，第三是Class选择器，其他选择器都非常慢。 3. 理解子元素和父元素的关系 下面六个选择器，都是从父元素中选择子元素。 (1) $('.child', $parent) 这条语句的意思是，给定一个DOM对象，然后从中选择一个子元素。 它比最快的形式大约慢50%。 (4) $('#parent > .child') jQuery内部使用Sizzle引擎，处理各种选择器。 为了获取这个属性，必须连续两次调用jQuery，第一次是$(this)，第二次是attr('id')。 事实上，这种处理完全不必要。
这里是三条最常见的jQuery选择语句： $(‘.elem’) $(‘.elem’, context) context.find(‘.elem’) 我们用1.4.2、1.4.4、1.6.2三个版本的 可以看到，ID选择器遥遥领先，然后是标签选择器，第三是Class选择器，其他选择器都非常慢。 3. 理解子元素和父元素的关系 下面六个选择器，都是从父元素中选择子元素。 (1) $(‘.child’, $parent) 这条语句的意思是，给定一个DOM对象，然后从中选择一个子元素。 它比最快的形式大约慢50%。 (4) $(‘#parent > .child’) jQuery内部使用Sizzle引擎，处理各种选择器。 为了获取这个属性，必须连续两次调用jQuery，第一次是$(this)，第二次是attr(‘id’)。 事实上，这种处理完全不必要。
三个版本的jQuery测试，看看浏览器在1秒内能够执行多少次。 可以看到，ID选择器遥遥领先，然后是标签选择器，第三是Class选择器，其他选择器都非常慢。 3. 理解子元素和父元素的关系 下面六个选择器，都是从父元素中选择子元素。 (1) $('.child', $parent) 这条语句的意思是，给定一个DOM对象，然后从中选择一个子元素。 它比最快的形式大约慢50%。 (4) $('#parent > .child') jQuery内部使用Sizzle引擎，处理各种选择器。 为了获取这个属性，必须连续两次调用jQuery，第一次是$(this)，第二次是attr('id')。 事实上，这种处理完全不必要。
虽然JQuery更便利，但我还是喜欢用原生的API。 2 文档元素选取 2.1 ID选择器 通过ID选取元素是最简单和常用的选取元素的方法，ID选择器性能优于其它选择器。 var next = node.nextElementSibling; 查看示例程序 3.2.5 前一兄弟元素-previousElementSibling 返回前一兄弟元素。 var innerHTML = parent.innerHTML; // 获取节点的内容 parent.innerHTML = "三十课"; //替换节点的内容 查看示例程序 var outerHTML = parent.outerHTML; // 获取节点及内容 parent.outerHTML= "三十课"; //替换节点及其内容 查看示例程序 parent.appendChild(h2); 查看示例程序 7.2 节点前插入-insertBefore 在父节点上调用本方法 第一参数表示待插入的节点 第二参数是父节点中已经存在的子节点，新节点插入到该节点的前面
通过jquery自身的方法获取页面元素的对象，就是jquery对象。 匹配给定的元素，合并一起 层次选择器： ancestor descendant 根据祖先元素匹配所有后代的元素 祖先和后代的关系 parent > child 根据父元素匹配所有的子元素 父子的关系 ) 获取包含给定文本的元素 :empty 获取所有不包含子元素或文本的空元素 如： :has(selector) 获取含所选择器的所有元素 :parent 获取含有子元素或文本的元素 *= value] 匹配有包含某些值的特定元素 [selector1][selector2] 同时满足多个条件使用 子元素过滤选择器： :nth-child 从1开始的，匹配每个父元素下第n个元素 :first-child 匹配每个父元素下的第一个子元素 :last-child 匹配每个父元素下的最后一个子元素 :only-child 匹配父元素中只有唯一的子元素，如果父元素中有多个子元素，就不会被匹配
jQuery大部分功能需要根据文档的DOM模型来工作，首先需要正确地解析到整个文档的DOM模型结构。使用jQuery需要在整个文档被浏览器完全加载后才开始进行。 ; }) }); $是在jQuery中使用的变量名，可以使用 jQuery.noConflict()避免冲突，它的返回值就是jQuery对象。 jQuery.noConflict(); $j = jQuery.noConflict(); jQuery对象与DOM对象之间的转换 使用 $()得到的是一个jQuery对象。 ) :focus 获取焦点元素 :first-child/:last-child 选择第一个/最后一个元素 :first/:last 截取第一个/最后一个符合条件的元素 ("pre+next") 直接兄弟元素 仅有一个子元素的元素 :empty 空元素，即无内容也无元素 :parent 非空元素 节点漫游 1.
JQuery选择器 编写任何javascript程序都需要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如”拥有title属性并且值中包含test 在DOM编程中我们只能使用有限的函数根据id或者TagName获取DOM对象。 而在JQUERY中则完全不同，JQUERY提供了异常强大的选择器用来帮助我们获取页面上的对象,并且将对象以JQUERY包装集的形式返回。 "$"符号在JQUERY中代表对JQUERY框架集的引用。 [i].innerHTML = 'div' + i;//通过索引访问到的元素不是JQuery对象，而是DOM对象} JQuery包装集 在此介绍一些基本的JQuery包装集及使用 ready()方法 >
slice(start, [end]) 从匹配元素集合中取得一个子集，和内建的数组的slice方法相同。 add(expr) 把与表达式匹配的元素添加到jQuery对象中。 .innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而 对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个 < div > 元素的内容。 ，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。 = ['#f00', '#0f0', '#00f'][i] }) //为三个不同的p元素单击事件分别设定不同的处理 jQuery中几个自定义的事件： （1）hover(fn1, fn2)：一个模仿悬停事件
弹性网卡（ENI）是绑定私有网络内云服务器 的一种弹性网络接口 ，可在多个云服务器间自由迁移。您可以在云服务器上绑定多个弹性网卡 ，实现高可用网络方案；也可以在弹性网卡上绑定多个内网 IP ，实现单主机多 IP 部署...
扫码关注腾讯云开发者
领取腾讯云代金券
云服务器
测试服务 WeTest
文件存储
命令行工具
SSL 证书