在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。...，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开始和结束的。...当你点击一个输入框，或者你切换到别的输入框，selection 是会跟着变化的，而光标就是在selection里面，叫做range，是一个片段区域，和selection一样，有开始点和结束点，当我们对文字按下左键向右拉的时候...DOCTYPE html> 在可编辑div中定位和设置光标...创建表情文本节点进行插入 var emojiText = document.createTextNode(emojiInput.value); // 如果文本框的子元素大于
类似于 CSS 通过选择器来操作 HTML 文档中的元素。那么，同样的道理，js 也需要有个中间媒介来操作 HTML 文档中的元素，这个媒介就是 DOM。...但有一点需要注意下，元素修饰的文本内容也会被创建成一个节点，作为这个元素的子元素加入 DOM 树中。 这种 DOM 树的概念跟 Android 中的视图树很类似。...并且，并不是一个元素的所有文本内容作为一个 Text 对象，如果文本内容被其他元素标签分割开了，那么这些文本内容会被分割成多份节点，都作为元素的子元素拼接在 DOM 树中。...如果考虑以后维护方便（把 CSS 从 js 中分离出来）的话，推荐使用类的方式来操作。...小结 获取元素的内容（包括标签）可用 html()，创建元素时用 $ ("xxx")，如果元素只有一个子元素，那么获取文本内容时可直接用 text()，添加子元素时用 append()。
1、ios端兼容input光标高度 问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上 当点击输入的时候，光标的高度和父盒子的高度一样。...例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。 ?...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位...失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件 解决办法： div class="list-warp"> div class="title...会导致刚提交的代码（特别是js）效果要半个小时左右才生效。
1、ios端兼容input光标高度 问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上 当点击输入的时候，光标的高度和父盒子的高度一样。...例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。 ?...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候...弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件 解决办法： div class="list-warp"> div class...会导致刚提交的代码（特别是js）效果要半个小时左右才生效。
file]一样； :checkbox：可以选择复选框，和input[type=checkbox]一样； :radio：可以选择单选框，和input[type=radio]一样； :focus：可以选择当前输入焦点的元素...=radio]:checked')； :enabled：可以选择可以正常输入的、 等，也就是没有灰掉的输入； :disabled：和:enabled正好相反，选择那些不能输入的...()//查找所有直接子元素 $('div').find('li')//所有后代元素 操作DOM 修改Text和HTML jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本...无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作 操作表单 jQuery对象统一提供val()方法获取和设置对应的value属性、 和js中的 .value()作用一样...用于修改css比较方便 如果是js还需要遍历的 添加class属性 在做过了几个案例中很多都需要添加class属性 addClass()添加属性 显示和隐藏DOM jQueryshow()和hide
前端操作input 的焦点功能 经常会用到，你会用到以下功能吗？ 选中input框中的某几个字母，监听该事件，获取选中的字母内容。 input的焦点向左移动一个，就像封面图一样，在括号中输入内容。...2） 拼接 input 旧值和 按钮新值 3） 设置 input 新的焦点位置，即老位置+按钮值长度 + 按钮功能需要变动的长度 4） 解决IE下点击按钮时，input焦点永远为0的行为。...具体代码如图： 输入：HTMLInputElement 输出：鼠标停留在 input 框中的位置。 2）js的substring方法。 获取到 input 光标的位置后，在中间插入新值即可。...绝对值函数此处用的是|()|，点击后需要向前移动两位。 故在这类函数的div上增加属性 cursor-position, 值是-1， -2等数字。 4）设置新的坐标位置。...输入：光标位置 输出：当前元素 另外：在IE下点击按钮获取光标位置时，浏览器默认为以当前最近元素为事件源。input会丢失光标，方法返回的永远是0。
email 定义用于 e-mail 地址的字段。 file 定义文件选择字段和 "浏览..." 按钮，供文件上传。 hidden 定义隐藏输入字段。 image 定义图像作为提交按钮。...number 定义用于输入数字的字段。 password 定义密码字段（字段中的字符会被遮蔽）。 radio 定义单选按钮。 reset 定义重置按钮（重置所有的表单值为默认值）。...div>p 子元素 选择所有父级是div> 元素的元素 2 element+element div+p 相邻兄弟 选择所有紧接着div>元素之后的元素 2 element1~element2...选择所有访问过的链接 1 :active a:active 伪类 选择活动链接 1 :hover a:hover 伪类 选择鼠标在链接上面时 1 :focus input:focus 伪类 选择具有焦点的输入元素...3 :root :root 选择文档的根元素 3 :empty p:empty 伪元素 选择每个没有任何子级的p元素（包括文本节点） 3 :enabled input:enabled 伪类 选择每一个已启用的输入元素
常用事件 click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） ready...= $("#div1") // 鼠标点击 $li.click(function(){ // this指的是当前发生事件的对象...，但是它是一个原生js对象 // this.style.background = 'red'; // $(this) 指的是当前发生事件的jquery对象...: this指的是当前发生事件的对象，但是它是一个原生js对象 $(this) 指的是当前发生事件的jquery对象 2....小结 jQuery常用事件: click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发
混合选择 eg： $('#selected-plays > li') 子元素选择符 > 查找ID为selected-plays元素的子元素（>）中所有的列表项 ---- jQuery 事件 什么是事件...; }); 获得焦点事件 当元素获得焦点时，发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。...下面实例中，元素获得焦点，将其CSS样式做出修改。...下面实例中，元素失去焦点，将其CSS样式做出修改。...方法获得输入字段的值： $(“#btn1”).click(function(){ alert(“值为: “ + $(“#test”).val()); //警告框弹出test 标签输入的文本值
渲染引擎：取得网页的内容（html,xml,图片等），整理信息（如加入css），以及网页的显示方式，并输出到显示器或打印机； JS引擎：解析和执行JS代码实现网页动态效果。 ...ps：最开始时渲染引擎和JS引擎没有特别的区分开来，发展到现在，JS引擎越来越独立。故一般说内核指的就是渲染引擎。...important;color:blue"> 点击这里,鼠标光标焦点转至输入框中 光标焦点转至输入框中”。...关于display:inline-block;可点击此处查看 8.CSS选择器： id选择器(#test) 类选择器(.test) 标签选择器(h1,p,div) 相邻兄弟选择器(div+p) 子选择器
4.键盘事件对象中的keyCode属性可以得到相应键的ASCLL码值 使用keyCode属性判断用户按下哪个键 // 键盘事件对象中的keyCode属性可以得到相应键的... 搜索框获得焦点：使用js里面的focus()方法 注意：触发获得焦点事件，可以使用 元素对象.focus() ... 1.4 案例：模拟京东快递单号查询 要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。... con盒子（innerText）做为内容 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子 div class="search"> div class="...con">123div> 输入您的快递单号" class="jd"> div>
input 当输入框进行输入的时候 触发的事件 change 当元素的值发生改变时 触发的事件 blur 当输入框失去焦点的时候 触发的事件 change 和 blur 最本质的区别...： 如果输入框为空，失去焦点后，change不会触发，但是blur会触发 过滤案例 { // item.indexOf(this.myText)：输入框中输入的字符串在筛选元素中的索引...，光标移走不会触发区别blur 注意： this的指向问题，如果想要this指向的对象始终是一个对象，比如始终指向Vue对象，可以通过 var _this=this来指代，或者使用箭头函数 var a...而 v-on:click.self.prevent 只会阻止对元素自身的点击 <!
+ Home: 如果不支持光标键循环，则将焦点移动到当前menu或menubar 的第一个子项。 + End: 如果不支持光标键循环，则将焦点移动到当前menu 或menubar 的最后一个子项。...NOTE 如果在菜单容器上设置aria-owns ，来包含不是该容器DOM子元素的元素，那么这些元素将按照它们被引用的顺序出现在读取顺序中，并且在所有DOM子元素之后。...示例 按钮示例：将可点击的HTML div 和 span 元素作为可访问命令和切换按钮的示例。 数值调节按钮 数值调节按钮是个将值限定在离散数值集合或范围的输入组件。...如果数值编辑按钮的文本框允许直接编辑其值，支持以下键。 适用于设备平台的标准单行文本编辑键（请参阅下面的注释）。 可打印字符: 在文本框中输入字符。...任何其他字符输入不会更改文本字段的内容和按钮的值。 NOTE 操作过程中焦点仍在文本字段上。 适用于设备平台的标准单行文本编辑键： 包括输入键，光标移动，选择和文本操作。
一、事件冒泡与阻止事件冒泡 事件冒泡：当一个元素触发某个事件的时候，会把这个事件传播到其父元素，一直到顶层元素。 阻止事件冒泡：在被触发事件的子元素中添加 return false; 即可。...文本框的获取焦点事件的触发： // 方式一 文本框元素.focus(); // 方式二 文本框元素.trigger("focus"); // 方式三 文本框元素.triggerHandler("focus..."); PS：方式一和方式二，都可以获取文本框的焦点，并且触发浏览器的默认行为（光标闪烁）；而方式三，可以获取文本框的焦点，但是不能触发浏览器的默认行为。...还有一个问题，就是 jQuery 中 val(); 在没有参数时时读取数值，不能链式编程；在有参数的时候是设置，可以链式编程。...所以方法的内部实现，在 return this; 之前还要做个判断，如果有参数才返回调用对象，否则不返回。 案例：五星好评 <!
（提交表单时）,change（元素值（适用于表单字段）发生改变时）,focus（元素获得焦点）,blur（元素失去焦点）事件； 文档/窗口事件：load（元素已加载触发，在jQuery1.8中废除。...ajax中也有load()方法）,resize（调整浏览器窗口大小时触发）,scroll（滚动指定的元素）,unload（jQuery1.8中废弃）事件。 另： hover()：模拟光标悬停事件。...例如:$('p').remove('.test1'); empty()：从被选元素中删除子元素（被选元素没有被删除，相当于留了一个外壳） 4.获取/设置css类: addClass()：向被选元素中添加一个或多个类...2.遍历--后代（子元素一下都是后代元素）： children()：返回被选元素的直接子元素 find()：返回被选元素的所有子元素（一直遍历到最后一个子元素） 3.遍历--同胞（siblings；兄弟元素...所以存在一个问题：如果其它js框架使用了$符号，或者书写的js代码中定义了$作为变量或者函数名，这时候就会产生冲突。
可以在收藏夹中显示出你的图标 关闭输入法 永远都会带着框架...div>(division)用来定义大段的页面元素，会产生转行 用来定义同一行内的元素，跟div>的唯一区别是不产生转行 是 ns 的标记，ie 不支持，相当于 在打开的子窗口刷新父窗口的代码里如何写...,可以实现焦点往下移动,但对于按钮也起同样的作用,一般的客户在输入完 资料以后,跳到按钮后,最好能直接按”回车”进行数据的提交.因此,对上面的方法要进行一下 修改,应该对于”提交”按钮不进行焦点转移...重置”应该要被执行 判断是否为空,是因为对于 HTML 上的”链接”也应该被执行，这种情况发生的情况不多，可以使用”tabindex=-1″的方式来取消链接获得焦点。
这里提供一个常用的解决方法：找到要删除的子元素，然后使用 parentNode 属性来查找其父元素： var child=document.getElementById("p1"); child.parentNode.removeChild...不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。...form formid 规定 label 字段所属的一个或多个表单。...file]一样； :checkbox：可以选择复选框，和input[type=checkbox]一样； :radio：可以选择单选框，和input[type=radio]一样； :focus：可以选择当前输入焦点的元素...此外，jQuery还有很多有用的选择器，例如，选出可见的或隐藏的元素： $('div:visible'); // 所有可见的div $('div:hidden'); // 所有隐藏的div ======
JS中进行大量样式的设置。...offsetLeft 获取元素距离浏览器左边的距离 备注：如果父元素进行了relative/absolute定位，offsetTop/offsetLeft就是相对父元素的顶部和左边的距离，如果父元素默认定位...，返回一个布尔值 children 获取元素所有的子元素节点集合/数组 childNodes 获取元素所有的子节点集合/数组 firstChild 获取元素第一个子节点 firstElementChild...获取元素第一个子元素节点 lastChild 获取元素最后一个子节点 lastElementChild 获取元素最后一个子元素节点 previousSibling 获取元素前一个兄弟节点 previousElementSibling...焦点事件：常用于表单元素标签 onfocus 获取焦点事件【获得光标事件】 onblue 失去焦点事件 onchange 内容修改事件， 事件的绑定方式： 1.标签属性绑定 2.dom元素绑定
rel="Shortcut Icon" href="favicon.ico"> 在文件的根目录放进去这个图片，后缀修改成ico就可以了 可以在收藏夹中显示出你的图标 div>(division)用来定义大段的页面元素，会产生转行 用来定义同一行内的元素，跟div>的唯一区别是不产生转行 是 ns 的标记，ie 不支持，相当于div>...form1″ method="post" action="mailto:****@***.com" enctype="text/plain"> 在打开的子窗口刷新父窗口的代码里如何写...– if(event.keyCode==13) event.keyCode=9; –> 这样的处理方式,可以实现焦点往下移动,但对于按钮也起同样的作用,一般的客户在输入完 资料以后,...跳到按钮后,最好能直接按"回车"进行数据的提交.因此,对上面的方法要进行一下 修改,应该对于"提交"按钮不进行焦点转移.而直接激活提交.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
