Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 2.jQuery介绍 jQuery是继prototype之后又一个优秀的Javascript...它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器。 jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。...:enabled 可以使用 :disabled 不可使用 :checked 选中的元素(单选框和多选框) :selected 选中的元素(下拉选) 四.属性和样式 属性,类class,html代码/文本...参数2:子元素中绑定数据是否被克隆。...4.替换 A.replaceWith(B) 使用B替换掉A A.replaceAll(B) 使用A替换掉所有的B 5.删除 empty() 清空标签体内容,删除所有子元素 remove() 将指定对象移除
注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。 语法2 ? ...注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...创建、添加、删除 jQuery方法操作元素的创建、添加、删除方法很多,则重点使用部分,如下: 语法总和 ? 注意:以上只是元素的创建、添加、删除方法的常用方法,其他方法请参详API。...清理购物车 3.商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发 4.删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品 5.清理购物车: 则是把所有的商品全部删掉...3.小的复选框点击: 如果是选中状态,则当前商品添加背景,否则移除背景 4.这个背景,可以通过类名修改,添加类和删除类 代码实现略。
当单击jq对象对应的组件后,会执行fn1,第二次单击会执行fn2..... 【注意】1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。...setTimeout(执行一次定时器) 分析发现JQuery的显示和隐藏动画效果其实就是控制display属性值 使用 show/hide方法来完成广告的显示 (3)代码实现 <!...1、$.fn.extend(object) 增强通过Jquery获取的对象的功能,属于对象级别的插件,例如:$("#id") 我们用一个案例来展示一下插件的使用。如下案例所示: //使用jQuery插件 给jq对象添加2个方法 check()选中所有复选框,uncheck()取消选中所有复选框 //1.定义jQuery的对象插件..." onclick="checkFn()"> 取消复选框选中" onclick="uncheckFn()">
如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。 :checked 选择器 :checked 查找被选中的表单元素。 <!...语法1 注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...语法2 注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...创建、添加、删除 jQuery方法操作元素的创建、添加、删除方法很多,则重点使用部分,如下: 语法总和 create append1 append2 remove 注意:以上只是元素的创建...清理购物车 商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发 删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品 清理购物车: 则是把所有的商品全部删掉
首元素选择器 * 语法: :first 获得选择的元素中的第一个元素 2. 尾元素选择器 * 语法: :last 获得选择的元素中的最后一个元素 3....选中选择器 * 语法: :checked 获得单选/复选框选中的元素 4....通用属性操作: 1.attr():获取/设置元素的属性 2.removeAttr():删除属性 3.prop():获取/设置元素的属性 4.removeProp():删除属性 * attr和prop区别...: 1.如果操作的是元素的固有属性,则建议使用pro; 2.如果操作的是元素自定义的属性,则建议使用attr * 复选框状态checked 和 下拉表列中selected...//使用jquery插件 给jq对象添加2个方法 check()选中所有复选框,uncheck()取消选中所有复选框 //定义jquery对象插件: $.fn.extend
一、元素的创建添加和删除 1、方式一:以对象的方式创建元素 append,appendTo :在被选元素所有子元素的结尾插入内容(增加子元素)。...如果要保留获取的元素,可以在 append 或者 appendTo 之前使用克隆 clone() 方法。...属性的操作 一般 val() 是获取表单的 value 属性; val(值); 设置表单的 value 属性。...2、使用 text() 行设置之后,在源码中 value 的值也改变了。...但是操作元素是否选中的 checked 属性时不合适。 2、操作元素的选中 checked 属性,推荐使用 prop 方法。
3.JQuery流行程度 jQuery现在已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。...4.JQuery好处: jQuery是免费、开源的,jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。...1、使用jquery一定要引入jquery库吗? 答案: 是2、jquery中的到底是什么? 答案: 核心函数3、怎么为按钮添加点击响应函数的?...获取多选框,每个选中的value值 $("#btn4").click(function(){ //1 获取全部选中的复选框...设置和获取起始标签和结束标签中的文本 val() 跟value属性一样。 专门用来操作表单项的value属性。
/jquery/jquery.validate.js"> (2)定义验证规则 直接在页面表单元素中通过属性实现验证规则: 的值,去掉下拉列表所有被选中的项,让所有复选框和单选框里被选中的项不再选中。...$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 4....$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 设置select: 设置select 选中的索引: $(...JS编程方式填充下拉框,请求的Action返回列表的JSON方式,取得JSON的列表后,编程遍历每个元素,并填充到原有下拉框的选项中。
:disabled" )匹配编号输入框 :checked 匹配所有被选中元素(复选框、单项按钮、select 中的option) $(" #userform :checked" )匹配“性别”中的“男...”选项和“爱好”中的“编程”选项 :selected 匹配所有选中的option 元素,单一的下拉框 $(" #userform :selected" ) 匹配“家乡”中的“北京”选项;#userform...链式操作 2.6 作业 使用jQuery+正则表达式,对表单注册进行简单的验证。...克隆:clone(),我们使用的时候就不加参数了....,没有则增加样式; 2.追加节点有4个,2个子元素街边;2个兄弟元素级别; 3.节点操作就是删除、清空、复制、替换(删改) 4.属性节点:attr() attr('name','name) 5.节点的遍历
l 使用属性过滤选择器和内容过滤选择器 具体选中元素 l 表单操作 :checked :selected 选中 表单选中元素 配合基本过滤选择器,缩小选中的范围 4.jQuery的DOM操作 使用jQuery...的九种选择器可以基本选中需要操作的对象,但是为了提高jQuery的查询效率,可以结合jQuery的内置查找函数一起使用 ①:查询 children([expr]) 获取指定的子元素 find(expr)...² 传智播客 获取div中 html和text 对比 ² 使用val() 获得文本框、下拉框、单选框选中的value ² 测试能否通过 val() 设置单选框、下拉框的选中效果...⑥:jQuery删除元素 选中要删除元素.remove() ---- 完成元素删除 选中要删除元素.remove(expr) ----- 删除特定规则元素 remove删除节点后,事件也会删除 detach...⑦:jQuery复制和替换 l 复制节点 $(“p”).clone(); 返回节点克隆后的副本,但不会克隆原节点的事件 $(“p”).clone(true); 克隆节点,保留原有事件 l 替换节点 $(
jq的遍历方式 jq对象.each(callback) 语法: jquery对象.each(function(index,element){}); index:就是元素在集合中的索引 element:就是集合中的每一个元素对象...this:集合中的每一个元素对象 回调函数返回值: true:如果当前function返回为false,则结束循环(break)。...false:如果当前function返回为true,则结束本次循环,继续下次循环(continue) $.each(object, [callback]),object为需要遍历的jq对象,回调方法中的参数与...当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2..... 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。..." onclick="checkFn()"> 取消复选框选中" onclick="uncheckFn
投票主题输入部分: :使用 Bootstrap 的栅格系统创建一行,有一定的底部外边距。...使用 $(".list").append(initList) 将生成的选项添加到 .list 容器中。 点击添加选项逻辑: 给 .add 元素绑定点击事件。...点击删除按钮逻辑: 使用事件委托,给文档绑定 .del - icon 的点击事件。 当点击删除图标时,找到其最近的 .row 元素并移除。 获取剩余选项的数量 itemCount。...添加选项: 用户点击 “添加选项” 按钮,触发 .add 元素的点击事件。 计算新选项的序号,判断是否需要显示删除按钮。 生成新选项的 HTML 并添加到 .list 容器中。...如果剩余选项数量小于等于 2,移除选项的删除按钮。 其他操作: 用户可以在 “投票主题” 输入框中输入投票主题。 用户可以勾选 “支持多选” 和 “公开投票结果” 复选框。
,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用。...在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理。...Bootstrap Paginator 它的GitHub代码地址为:https://github.com/lyonlai/bootstrap-paginator 它的使用例子介绍,可以参考:http:...//lyonlai.github.io/bootstrap-paginator/ 该控件使用的时候,引入Jquery和Bootstrap样式和类库后,通过下面的代码行即可添加使用。...var treeMenu = "tree_roledata"; $('#' + treeMenu).jstree("uncheck_all");//取消所有选中
如果想要给同一类元素做不同操作,就需要用到遍历。 语法1 ? 注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...jQuery方法操作元素的创建、添加、删除方法很多,我们重点使用部分,如下: 语法总和 ?...清理购物车 3.商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发 4.删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品 5.清理购物车: 则是把所有的商品全部删掉... // 如果小复选框选中的个数等于所有小复选框个数,则选中全选按钮 否则不选中 // .j-checkbox:checked 选中的复选框 if ($(
,因此在使用springboot的模板引擎进行渲染时,会报错误,解决方法如下: 从ajax的回调函数(success等)中取返回值 layui-table表复选框勾选的所有行数据获取 html网页什么样的字体最好看...//checkStatus.data:被选中的元素集合 //checkStatus.data.length:被选中的元素个数...//当头部工具栏的删除按钮被点击时,获取被选中元素集合,进行批量删除操作 $("#topDelBtn").click(function () {...html页面引入的jquery删掉,直接使用layui内置的jquery 删除页面引入的jquery 使用layui自带的jquery 或者: ,end: function(index, layero...('test');//这里传入的test是数据表格的id //删除被勾选的行元素集合 //checkStatus.data:被选中的元素集合
的value: myselect.options[index].value; 4:拿到选中项options的text: myselect.options[index].text; 二:jquery方法(..."); 然后直接使用val() 和 text() 方法: console.log(selectedOption.val(), selectedOption.text() ); 注意使用jQuery的方法...$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 4....$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option http://www.cnblogs.com/SAL2928...(注意中间没有空格) 3,复选框: $("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值 $("input[@type=checkbox
偶数选择器 奇数选择器 等于索引选择器 大于索引选择器 小于索引选择器 标题选择器 表单过滤选择器 可用元素选择器 不可用元素选择器 选中选择器 选中选择器 DOM操作 内容操作 属性操作 通用属性操作...除非特殊要求, 一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。 目前该版本是官方主要更新维护的版本。...选中选择器 语法: :checked 获得单选/复选框选中的元素 选中选择器 语法: :selected 获得下拉框选中的元素 DOM操作 内容操作 html(): 获取/设置元素的标签体内容 内容...如果操作的是元素的固有属性,则建议使用prop 如果操作的是元素自定义的属性,则建议使用attr 对class属性操作 addClass():添加class属性值 removeClass():删除class.../js/jquery-3.3.1.min.js"> //分析:需要保证下边的选中状态和第一个复选框的选中状态一致即可 function
案例:发布微博案例 点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。 点击的删除按钮,可以删除当前的微博留言。 <!...事件对象 jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。...中的 event 对象使用,可以借鉴 API 和 DOM 中的 event 。...jQuery 多库共存 实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现..., 如果 数据done为 false, 则 todoCount++, 否则 doneCount++ 最后修改相应的元素 text() 1.8.
jQuery是一个广泛使用的JavaScript库,用于简化HTML表单的处理和操作。在jQuery中,表单选择器是一种非常有用的选择器,用于选择表单元素并对其进行操作。...在jQuery中,表单选择器可以根据表单元素的类型、属性、状态等条件来选择元素。...例如,选择所有的表单元素,可以使用如下的表单选择器:$(":input")这将选中所有的表单元素。:text选择所有的文本输入框(type为text)。...例如,选择所有的密码输入框,可以使用如下的表单选择器:$(":password")这将选中所有的密码输入框。:checkbox选择所有的复选框(type为checkbox)。...例如,选择所有的复选框,可以使用如下的表单选择器:$(":checkbox")这将选中所有的复选框。:radio选择所有的单选框(type为radio)。
Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。Bootstrap是基于jQuery 的一个UI工具。...(指的是 单选框radio、复选框 checkbox) :selected 选择(指的是 下拉列表 select 标签中的 option 标签) 示例代码如下: 09-表单对象属性过滤选择器...>获取下拉框选中的内容,追加到selectDiv中 $("#btn4").click(function() { // 遍历的是所有选中的... 获取多选框选中的个数,追加到checkboxDiv中 4">获取下拉框选中的内容,...remove() 删除当前对象。如果之后再使用,元素本身保留,绑定的事件 或 绑定的数据 都会被移除。 detach() 删除当前对象。