主要的区别是 onfocus 事件不支持冒泡。因此,如果你想知道元素或者其子元素是否获取焦点,需要使用 onfocusin 事件。...onfocus (使用addEventListener()方法的可选参数 useCapture)的捕获监听事件来查看元素或其子元素是否获取焦点。...主要的区别是 onblur 事件不支持冒泡。因此,如果你需要查看元素或其子元素是否获取焦点,需要使用 onfocusout 事件。...6.oninput:元素获取用户输入时触发 oninput 事件在用户输入时触发,也可用于 元素的值发生改变时触发。该事件类似于 onchange 事件。...不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。
不建议两个一起写在同一个标签上。 用户输入(表单) 通过v-model实现"双向"绑定。 实际上是一个语法糖。...实例已经挂在到DOM,此时可以通过DOM API获取到DOM节点。...通过这种方法,可以以解耦合的方式实现完全不相干的两个组件传值。但是不好之处在于:多了一个全局的Vue实例。...d-form-item是最直接拿到表单校验的组件。拿取的方法:通过指定一个prop给它。...,可来实现向直系前一代祖先发送通知: onInput(e) { // 通知父组件发生了input事件 this.
detais 标签 标签向用户提供按需查看详细信息的效果。 如果需要按需向用户显示内容,简单的做法就是使用此标签。...内容可编辑 contenteditable是可以在元素上设置以使内容可编辑的属性。 它适用于DIV,P,UL等元素。...技巧 可以让span或div标签可编辑,并且可以使用css样式向其添加任何丰富的内容。 这将比使用输入字段处理它更好。 试试看! ?...,可以通过getAttribute('data-custom-attr')g来获取,但是标准方式是用dataset来获取。...output 标签 标签表示计算或用户操作的结果。
在本文中,我列出了十个我过去没用过的HTML5功能,但现在发现它们很有用,废话不多说,让我们开始吧。 detais 标签 标签向用户提供按需查看详细信息的效果。...这是一个示例https://github.com/atapas/notifyme#properties 内容可编辑 contenteditable是可以在元素上设置以使内容可编辑的属性。...Honey 运行结果: 技巧 可以让span或div标签可编辑,并且可以使用css样式向其添加任何丰富的内容。这将比使用输入字段处理它更好。试试看!...,可以通过getAttribute('data-custom-attr')g来获取,但是标准方式是用dataset来获取。...output 标签 标签表示计算或用户操作的结果。
文档处理 事件 动画效果 插件 each、data、Ajax jQuery语法 $符号事jQuery中的重要标识 //在JS中可以通过获取先获取标签,然后去使用对应的方法,在jQuery中一样,...可以先筛选元素(标签),然后再对该元素做出动态操作 格式:$(selector).action() selector:通过选择器获取元素 action:获取元素后的动作行为 jQuery对象 JS中DOM...//获取p标签 $('p') //获取div标签 $('div') id选择器 //获取id为1的元素 $('#1') 类选择器 //获取类名为class3的元素 $('.class3...attr 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop 通俗理解为:attr适用于属性为静态的情况(不经常修改动态变化的),而prop用于动态变化的情况,尤其是选择类标签...window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用 jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数) 事件委托 事件委托是通过事件冒泡的原理
$("#i1").html()的意思是:获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 ...总结一下: 1.对于标签上有的能看到的属性和自定义属性都用attr 2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用...: 事件委托 事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件,将未来添加进来的某些子标签自动绑定上事件。 ...数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。...上面是循环一个数组,通过$.each,还需要把数组传进去,我们还可以通过each来循环标签:(this指的是当前循环的那个标签对象,以后循环标签的时候,就不用自己写for循环了,用each就行了)
,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。...总结一下: 对于标签上有的能看到的属性和自定义属性都用attr 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。...window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用 jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数) 事件委托 事件委托是通过事件冒泡的原理...数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。...$("div").data("k",100);//给所有div标签都保存一个名为k,值为100 .data(key): 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data
解析模板/标签(标签属性,标签体内容,绑定事件等) 例如: //点击toggle按钮,会显示红色方块,再次点击,红色方块消失,这里就是通过控制属性的真假,通过指令作用到红色方块上来控制方块的显示隐藏...属性,可以识别字符串中的标签。...你应该通过 JavaScript 在组件的data 选项中声明初始值。...v-model的专用修饰符 .lazy - 取代 input 监听 change 事件 原本的数据绑定相当于对input框进行oninput事件监听,使用v-model.lazy之后相当于把oninput...if(this.lists[i].isChecked) return; //改变当前编辑的数据的isedit的值 this.lists[i].isEdit = false; }, //任务总数
解决方法链接:https://blog.csdn.net/wujiangwei567/article/details/41051225
如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。 $("#i1").html()的意思是:获取id值为 i1的元素的html代码。...val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置checkbox、select的值 示例: 获取被选中的checkbox或radio的值: <label for...示例: 表格中每一行的编辑和删除按钮都能触发相应的事件。...数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。...$("div").data("k",100);//给所有div标签都保存一个名为k,值为100 .data(key): 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data
解析模板/标签(标签属性,标签体内容,绑定事件等) 例如: //点击toggle按钮,会显示红色方块,再次点击,红色方块消失,这里就是通过控制属性的真假,通过指令作用到红色方块上来控制方块的显示隐藏 的标签。...你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model说白了就像监听器一样,会自动的将vue实例的值同步更新到表单中,同样的也会把表达中的值同步到vue实例中。...v-model的专用修饰符 .lazy - 取代 input 监听 change 事件 原本的数据绑定相当于对input框进行oninput事件监听,使用v-model.lazy之后相当于把oninput...if(this.lists[i].isChecked) return; //改变当前编辑的数据的isedit的值
$("#i1").html() 的意思是:获取id值为 i1 的元素的 html 代码。其中 html() 是 jQuery里的方法。...val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置checkbox、select的值 示例: 获取被选中的checkbox或radio 的值: <label for...示例: 表格中每一行的编辑和删除按钮都能触发相应的事件。...数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length-1.其他对象通过其属性名进行迭代。...$("div").data("k",100);//给所有div标签都保存一个名为k,值为100 .data(key); 描述:返回匹配的元素集合中的第一个元素的给定名称的数据存储的值通过 .data(
() 返回一个布尔值,表示当前节点是否有子节点 node.removeChild() 接受一个子节点作为参数,用于从当前节点移除该子节点 node.cloneNode() 用于克隆一个选中的节点。...它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。 注意: 不会克隆绑定到该元素上的事件; node.innerHTML 返回该元素包含的 HTML 代码。...,可获取非标准属性 console.log(d.getAttribute('aa')); node.hasAttribute() 返回一个布尔值,表示当前元素节点是否包含指定属性...,注册点击事件,添加事件处理函数 document.getElementById("btn").onclick=function () { //根据id获取图片标签,设置src属性即可...,注册点击事件,添加事件处理函数 document.getElementById("btn").onclick=function () { //根据标签名字获取文本框,所有的input标签
1、内容可编辑属性 contenteditable 是可以在元素上设置以使内容可编辑的属性。它适用于 DIV、P、UL 等元素。...td>Humantd> 3、Datalist 标签 标记指定预定义选项列表并提供自动完成功能...每一个都有自己的用例,适用于不同的布局。另一个与它们类似的选项是隐藏的 HTML 属性。如果一个元素在其上指定了隐藏,它将被隐藏。我碰巧有用于存储值的隐藏输入,所以如果您也需要它,请不要吃惊。...该元素的 datetime 属性用于将时间转换为机器可读的格式,以便浏览器可以提供通过用户日历添加日期提醒,搜索引擎可以产生更智能的搜索结果。...,通过本文的学习,你可以轻松的使用HTML原生标签能力,就能够实现以前复杂的第三方UI组件提供的功能。
大家好,又见面了,我是你们的朋友全栈君。...函数 onpropertychange事件:IE专有,disable=true的时候失效,onpropertychange是在触发对象改变任何属性时都会触发。...onchange只有在用键盘改变其值,然后在失去焦点(onblur)后才触发。 oninput 事件:JS 改变 value 值时不能触发,下拉列表中选值时,也不会触发。...修改方法: 使用 $(选择器).on(事件名, 处理函数) / $(选择器).off(事件名, 处理函数) 来替代原生JS中的 elem.attachEvent(‘on’ + 事件名, 处理函数) /...方法:监听对象添加定时器 td width="124" height="23" align="center" bgcolor="#efefef">基金名称td> td bgcolor="#FFFFFF
[开发技巧]·HTML简易实现检测输入已完成 使用"onInput(event)"检测是否在输入 使用onporpertychange="onChange(event)"检测是否内容发生改变 使用onBlur...="finnishInput(event)"检测是否失去焦点 可以通过先检测是否在输入,记下状态,如果上次在输入信息,然后失去焦点,则可以判断为输入已完成。...HTML代码如下: 出差地点: td> td> JS代码如下: var flag = 0; function onInput(e...function finnishInput(e) { if(1 == flag){ console.log("InputOk"); flag = 0; } } 经过测试,实现了判断输入是否完成的功能
) 设置或获取value属性的值 attr ( ) 设置或获取某属性的值 removeAttr ( ) 删除某属性 prop ( ) 跟attr()作用一样,但是主要针对可简写的属性 removeProp...表6-1-2 attr函数 attr函数 说明 attr ( "属性名" ) 按属性名获取某属性的值 attr ( "属性名" , 属性值) 按属性名设置某属性的值 下面我们通过具体的示例来演示...表6-1-4 css函数 css函数 说明 css( "属性名" ) 按属性名获取某属性样式的值 css( "属性名" , 属性值) 按属性名设置某属性样式的值 下面我们通过一个示例来演示css...attr函数每隔2秒改变img标签src属性的 值。 ...通过addClass函数设置的属性必须通过removeClass函数移除 D. prop函数跟attr函数很相似,但是prop函数对可简写的属性支持的更好 3.
如果需要使用 this 或者 event 来获取此A标签,建议改用 onclick 事件。...;return;} isedit = true; //获取需编辑的对象(卷标对象) var data = document.getElementById("data_"+dataId); //获取需编辑的各子对象...' >td>102td>td>stu2td>td>女td>td>编辑' onclick="edit(pageForm,'2',...(square(2,3)); //值为13 动态函数的作用:函数体是由一个字符串构成的,故函数体可动态生成。....*"} ] }; 2) 获取对象: 在javascript 中, 成员可以通过“点号”来获取。
表6-1-1 属性操作函数 属性操作函数 说明 html ( ) 设置或获取innerHTML属性的值 text ( ) 设置或获取innerText属性的值 val ( ) 设置或获取value属性的值...表6-1-2 attr函数 attr函数 说明 attr ( "属性名" ) 按属性名获取某属性的值 attr ( "属性名" , 属性值) 按属性名设置某属性的值 下面我们通过具体的示例来演示attr...表6-1-4 css函数 css函数 说明 css( "属性名" ) 按属性名获取某属性样式的值 css( "属性名" , 属性值) 按属性名设置某属性样式的值 下面我们通过一个示例来演示css函数的用法...元素 . css ( { "属性名" : 属性值 , "属性名" : 属性值 , ... ...} )6.2.2位置函数offset函数用来获取或设置元素相对于浏览器窗口的位置对象,可以通过该对象的left...通过addClass函数设置的属性必须通过removeClass函数移除 D. prop函数跟attr函数很相似,但是prop函数对可简写的属性支持的更好 3.
input元素的oninput事件和onchange事件 框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1、input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput...属性,属性值为处理事件函数的调用 oninput="handleInput()"> function handleInput(...) { // 处理事件代码 } 第二种:获取input元素,然后在元素对象上添加oninput属性,属性值为函数,函数内部为处理事件函数的调用 的区别 oninput事件是在输入框中输入时就会触发 onchange事件是在输入框输入完内容后,输入框失焦后触发 onchange事件兼容性好,主流浏览器都支持 oninput...事件IE9以下不支持,其余主流浏览器都支持,针对IE9以下的可以使用onpropertychange事件来替代 参考文献: [1] oninput 事件 [2] input输入框的input事件和change
领取专属 10元无门槛券
手把手带您无忧上云