前言 这是前端的JavaScript和JQuery的基础使用，对于日常使用来说，这些代码足够了。我写代码的时候经常忘记，写下常用的代码，用的时候直接看这些，免得再去百度了。...而且change可以作用于select元素，input只用于input元素。...//js原生方法 object.addEventListener("change", myFunc); function myFunc(){} //jquery $(selector).change(function...标签事件处理 以下是获取select的列表项的选中的项的值 $("#select").children('option:selected')是select元素的选中的子元素 // js var select...").change(function (e) { console.log($("select").children('option:selected').val()) }); 快速获取选中的option
网上搜了一下，没发现太好用的，于是就自己写了一个。基于jQuery，无限级联动，支持下拉列表框和列表框。...//列表框的change事件。...另外本着单一职责和低耦合的原则，还有更通用一点的需求，也是应该把获取列表框的选项的功能放在外部处理。 在页面里直接获取选项，可以用ajax，也可以用其他的方式。...由于没有把这个功能放在内部实现，所以就做了一个很简单的演示，模拟一个假数据。根据上一个列表框的选择值，来设定下一个列表框的text。这样是想有一个比较明显的区分。 ...比如在修改记录时，字段值是 沈阳市、和平区、某某街道、某某社区，那么就应该把列表框的默认选项给设置上。但是选项是动态生成的，而且还是ajax获取的，这个问题想了好几天，截止到现在才有了一个明确的思路。
，最终研究了vue的源码中有关select元素的部分找到了答案，下面简单介绍我踩的关于select的一个坑： 使用场景：有两个select元素，一个select元素变动时，动态修改另一个select中填充的内容...，并默认选择第一项，问题来了，每次当我提交form数据时发现：从slave元素对应的数据没有更新到响应vue对象相关属性，奇怪的是当我使用jquery获取该select的val()方法获取的是最新的数据...，那么问题就来了：为什么元素的值发生了变动却没有更新到vue对象相关属性？...this.listener); 看到了吧，只有select的change事件才会触发select元素的value值更新到vue对象相关属性，但我在使用select时从select的内容是我使用js...我这里给出我的解决方案：在使用js代码追加内容到从select后，使用更改从select对应的vue对象属性来实现默认选择第一项。
================================================== 16. jQuery中的each函数 each() 方法规定为每个匹配元素规定运行的函数。 ...针对表单元素，jQuery还有一组特殊的选择器： :input：可以选择，，select>和； :file：可以选择jQuery还有很多有用的选择器，例如，选出可见的或隐藏的元素： $('div:visible'); // 所有可见的div $('div:hidden'); // 所有隐藏的div ======...其他事件 focus：当DOM获得焦点时触发； blur：当DOM失去焦点时触发； change：当、select>或的内容改变时触发； submit：当...标签的async属性和defer属性 async:规定异步执行脚本(仅适用于外部脚本) defer:规定是否对脚本执行进行延迟，直到页面加载为止 - 设置async，设置/不设置defer
系列文章请看jQuery Mobile专栏。jquery.mobile.changepage是过时的jQuery Mobile 1.4.0及将被删除在1.5.0。...使用pagecontainer部件的change()法代替。 注意该方法是在内部使用的页面加载和转换作为一个结果，点击一个链接或提交表单时。...跳转外部页面全部没有效果，必须是内部的DIV页面才有效果。...强制刷新页面, 即使当页面容器中的dom元素已经准备好时，也强制刷新。只在changePage()的to参数是一个可用地址的时候。 reverse：布尔类型，默认false。...默认情况下此参数为认：undefined，取决于元素的@data-role属性。 showLoadMsg：布尔类型，默认true。设定加载外部页面时是否显示loading信息。
Chosen的使用 Chosen是jquery下的一个下拉框插件。它能美化select选择框使其他变的更好看、更方便,同时它更扩展筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。...inherit_select_classes false 是否继承 select 元素的 class，如果设为 true，Chosen 将把 select 的 class 添加到容器上 max_selected_options...select> selected:标识选项“选中与否” disabled：禁止选中 4、触发事件 Chosen 会在源 select> 元素上触发事件。...option:selected")) //获取所有被选中元素 }) 事件 描述 change Chosen 触发标准的 change 事件，同时会传递 selected or deselected...通过在 select> 元素上触发特定事件可以调用 Chosen 的监听函数。
表5-1-1 jQuery事件 jQuery事件 说明 ready( fn ) 页面加载完毕时发生的事件 blur( [ [data] , fn ] ) 元素失去焦点时发生的事件 change(...鼠标悬浮到某元素上时发生的事件 mouseup( [ [data] , fn ] ) 松开鼠标按钮时发生的事件 scroll( [ [data] , fn ] ) 页面滚动时发生的事件 select(...表5-1-5 jQuery其他事件 其他事件 说明 change( [ [data] , fn ] ) 元素的值发生改变时发生的事件 select( [ [data] , fn ] ) input...元素的选取事件 submit( [ [data] , fn ] ) 表单提交事件 下面我们通过一个示例来演示change和select事件的用法，参考代码如下所示。...用来移除某元素上绑定的事件，该函数常见的用法如下所示： 1.
事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。...来代替，相当于原生js中的window 1.1.3 jQuery 对象和 DOM 对象 用原生 JS 获取来的对象是 DOM 对象 jQuery 方法获取的元素是 jQuery 对象。...('属性名'); //更改 attr('属性名','属性值'); 4.1.3 数据缓存 data() 可以在指定的元素上存取数据，但不会修改DOM元素结构。...4.3 元素操作 4.3.1 遍历元素 隐式迭代是对同一类元素做同一件事情，但是要做不同事情的话还是需要使用遍历 $('div').each(function(index, domEle) {...li); 外部添加(在前面添加) $('div').before(div); 外部添加(在后面添加) $('div').after(div); 删除元素 $('ul').remove();//整个ul
表5-1-1 jQuery事件 jQuery事件 说明 ready( fn ) 页面加载完毕时发生的事件 blur( [ [data] , fn ] ) 元素失去焦点时发生的事件 change( [ [...鼠标悬浮到某元素上时发生的事件 mouseup( [ [data] , fn ] ) 松开鼠标按钮时发生的事件 scroll( [ [data] , fn ] ) 页面滚动时发生的事件 select(...表5-1-5 jQuery其他事件 其他事件 说明 change( [ [data] , fn ] ) 元素的值发生改变时发生的事件 select( [ [data] , fn ] ) input元素的选取事件...submit( [ [data] , fn ] ) 表单提交事件 下面我们通过一个示例来演示change和select事件的用法，参考代码如下所示。...无参，表示移除元素上绑定的所有事件 $("p").die(); //移除段落元素的所有事件 2.
jQuery获取Select选择的Text和Value: $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发...很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。...(option); }); 复制代码 jQuery获取Select选择的Text和Value: 语法解释： $("#select_id").change(function(){//code...});..."selected", true); //设置Select的Text值为jQuery的项选中 jQuery添加/删除Select的Option项： 语法解释： $("#select_id")...select[name=items] option[selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].selectedIndex
现象 使用了 jQuery 1.10 的版本，想实现 checkbox 的全部选中和全部取消选中，使用了 attr 的方法，如下： $(elem).attr(“checked”) 测试过程中发现，第一次从未选中状态变为选中...，再从选中变为未选中，是可以的。...但是第二次界面上就没有任何变化了，但是查看元素，发现 checked 属性实际上已经改变了。这是什么情况呢？...原因 看一下官方对这个函数的解释 .attr() Get the value of an attribute for the first element in the set of matched...文档还特别对 attr() 和 prop() 进行了对比，总体来说 jQuery 1.6 版本之后，为了保证函数在不同环境下表现的一致性，建议对于获取 DOM 元素的固有属性，使用 prop() 方法，
jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。...') //选择id为为ul1元素下的所有li下的span元素 $('input[name=first]') // 选择name属性等于first的input元素 对选择集进行过滤 $('div').has...提交表单 表单验证 规则: var re = new RegExp(‘规则’,’可选参数’) var re =/规则/参数; 事件冒泡 作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个父级元素上...，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...()和insertAfter()：在现存元素的外部，从后面放入元素 before()和insertBefore()：在现存元素的外部，从前面放入元素 删除节点:remove()或empty() $
技术来更改页面内容，这意味着： 你不能依赖DOMContentLoaded和jQuery.ready()这两个函数来触发相关事件（这两个事件在刷新整个页面的时候才会触发，但是你可以使用[InstantClick...链接指向需要一段时间加载的非HTML内容 链接指向的页面与当前页面标签内的css样式和脚本不同 链接触发JavaScript的操作 部分链接已在内部列入黑名单，且无法列入白名单： 链接有target...把父元素内部的所有链接列入黑名单，只需要向该父元素添加data-no-instant属性。...20140308" data-instant-track> 如果它是内联脚本或样式，InstantClick将检查元素内容中的更改。...即使页面已经立即加载，也会显示进度条，在将来这将更改。你可以在github讨论。 当访问者缩放页面或旋转其设备时，该栏的大小和位置会自动调整，因此即使您的网站未针对移动设备进行优化，也会正常工作。
（该方法也可以获取 H5 自定义属性） 1.1.3 数据缓存 data() data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。...元素操作 jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。...遍历元素 jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。...jQuery 尺寸操作 jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。...案例： 品优购电梯导航（上） 当我们滚动到 今日推荐 模块，就让电梯导航显示出来 点击电梯导航页面可以滚动到相应内容区域 核心算法：因为电梯导航模块和内容区模块一一对应的 当我们点击电梯导航某个小模块，
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况 change([[data],fn]) $('p').change(); 当元素的值发生改变时，会发生 change...当用于 select 元素时，change 事件会在选择某个选项时发生。...标签放到 省的select下面 // jQuery的html方法已经对ie8的 select设置innerHTML的bug做了相关处理。...$("#proSel").html(strHTMLArray.join('')); // 给省的select标签绑定change事件 $('#proSel').change(function...3.1 事件对象的属性介绍 event.type 获取到事件的类型 event.target 获取到触发事件的元素。jQuery对其封装后，避免了各个浏览器不同标准的差异。
一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 ...但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。...使用这种模式的操作方法，一共有四对 1 .insertAfter()和.after()：在现存元素的外部，从后面插入元素 2 .insertBefore()和.before()：在现存元素的外部，从前面插入元素...'); 3 $('ul').append('list item'); 七、工具方法 除了对选中的元素进行操作以外，jQuery还提供一些工具方法(utility)，不必选中元素...而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例(即选中元素)后使用。
Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作 就是封装了JavaScript，能够简化我们写代码的一个JavaScript库 为什么要使用Jquery？...在内部还是调用document.getElementById()这些方法。我们真正在使用的时候直接写上我们自定义规则的字符串就可以获取对应的控件了。...这里写图片描述 Jquery是对JavaScript的封装，那么Jquery在得到HTML标签后，也有对应的方法来获取标签的内容，动态创建、删除、修改标签。...从而在网页上做出动态的效果 追加 append()：追加到父元素之后 prepend()：追加到父元素之前 after()：追加到兄弟元素之后 before()：追加到兄弟元素之前 查询层次关系 我们发现在选择器上就有层次关系的选择器...我们来使用这个方法来获取当前的时间，对这个方法熟悉一下： 调用load方法的jquery对象，返回结果自动添加到jQuery对象代表的标签中间 如果带参数就自动使用post，不带参数自动使用get。
即使是执行live()函数之后新添加的元素，只要它匹配当前jQuery对象的选择器，绑定的事件处理函数仍然对其有效。 要删除通过live()绑定的事件，请使用die()函数。...即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。 要删除通过on()绑定的事件，请使用off()函数。...使用该函数可以手动触发执行元素上绑定的事件处理函数，也会触发执行该元素的默认行为。...21，change change事件会在文本内容或选项被更改时触发。该事件仅适用于和以及select>。...对于text和textarea元素，该事件会在元素失去焦点时发生(文本内容也发生了更改)。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
