前言 在页面上动态添加div元素，比如用户在添加多个银行卡的时候，可以动态添加和删除div元素 使用场景 用户点添加按钮，能添加一项div,点删除按钮可以删除一项 前端结合bootstrap实现 jquery.../jquery.min.js"> 添加和删除事件 绑定添加和删除事件 clone() 复制一个元素 append() 在元素后面追加一个新的元素 remove() 移除元素 //...添加 $("#cards").on("click", ".glyphicon-plus", function () { // clone() 复制上一个div.panel var newObj
jQuery 概述 js库：即library，封装好的函数。里面有很多预先封装好的方法。 jQuery就是为了更方便快速操作DOM，里面封装了很多方法，后续用jQuery对象调用这些方法即可。.../ $('div')是一个jQuery 对象 $('div'); console.dir($('div')); 控制台输出： jQuery 对象只能使用 jQuery...转化为jQuery： //直接获取元素即可 $('div'); ---- jQuery常用API jQuery选择器 jQuery 基础选择器 原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，...$(“选择器”) //里面选择器直接写 CSS 选择器即可，但是要加引号 获取方式与原生js无异： jQuery 层级选择器 jQuery设置样式的方法： $('div').css('属性', '值...//1. events: 一个或多个用空格分隔的事件类型，如"click"或"mouseover" 。 //2. selector: 元素的子元素选择器。
jQuery 官网：https://www.jquery.com 1.2、JQuery快速入门 开发思路 编写 HTML 文档。 引入 jQuery 文件。 使用 jQuery 获取元素。...jQuery 官网：https://www.jquery.com。 要想使用，必须要引入该文件。...("div"); alert(jsDiv.innerHTML); //alert(jsDiv.html()); JS对象无法使用jQuery里面的功能 // 将 JS 对象转换为jQuery对象 let...",function(){ $("#btn1").off("click"); }); 2.4、时间的切换 事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系。...对象.each() 方法。 $.each() 方法。 for of 语句。 3、JQuery选择器 3.1、基本选择器 选择器：类似于 CSS 的选择器，可以帮助我们获取元素。
* * jQuery ready可以使用多次，多个页面加载将依次执行。...后续的学习中，“基本选择器”使用的频率最大，我们先预先学习一下。...1.4.1 基本选择器 jQuery后续的学习中，“基本选择器”使用的频率最大，我们先预先学习一下。...复合属性选择器，多个属性同时过滤。...div> 步骤2：添加js代码 <script type="text/javascript" src="..
var domObject2 = $('div').get(0) 2.1 jQuery选择器 2.1.1 基础选择器 名称 用法 描述 ID选择器 $(’#id’) 获取指定ID的元素 全选选择器 $(...’*"’) 匹配所有元素 类选择器 $(".class") 获取同一类class的元素 标签选择器 $(“div”) 获取同一类标签的所有元素 并集选择器 $(“div,p,li”) 选取多个元素 交集选择器...$s(“Ii.current”) 交集元素 2.1.2 层级选择器 名称 用法 描述 子代选择器 $(“ul>li”); 使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素 后代选择器...$('div').each(function(index, domEle) {}); 是dom对象不是jQuery对象，需要转换成jquery对象才能使用方法 $.each(obj,function...(**在后面添加) $('ul').append(li); 添加元素(在前面添加) $('ul').prepend(li); 外部添加(在前面添加) $('div').before(div); 外部添加
3.jQuery选择器总结 ①：对象访问核心方法 each(function(){}) 遍历集合 size()/length属性 返回集合长度 index() 查找目标元素是集合中第几个元素 ②：CSS...$("tr").first() ③：九种选择器重点 l 基本选择器和层级选择器 锁定元素 l 使用属性过滤选择器和内容过滤选择器 具体选中元素 l 表单操作 :checked :selected 选中...表单选中元素 配合基本过滤选择器，缩小选中的范围 4.jQuery的DOM操作 使用jQuery的九种选择器可以基本选中需要操作的对象，但是为了提高jQuery的查询效率，可以结合jQuery的内置查找函数一起使用...CSS样式属性 css(properties) 传递key-value对象，设置多个CSS样式属性 设置class属性 addClass(class) 添加一个class属性 removeClass([...5.jQuery事件 ①：事件绑定 传统js 一般一个对象只能绑定某种事件一个函数 jQuery 支持对同一个对象，同一个事件可以绑定多个函数 绑定事件函数到对象有两种写法 写法一 $("div").click
jQuery内容： 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax 下载链接：jQuery官网 中文文档：jQuery AP中文文档 jQuery...// DOM对象使用DOM的方法 jQuery基础语法 $(selector).action() 查找标签 基本选择器 id选择器： $("#id") 标签选择器： $("tagName") class...选择器： $(".className") 配合使用： $("div.c1") // 找到有c1 class类的div标签 所有元素选择器： $("*") 组合选择器： $("#id, .className...)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 例子： $("div:has(h1)")// 找到所有后代中有h1标签的div...}); // jQuery对象可以使用新添加的check()方法了。
#id") 标签选择器： $("tagName") class选择器： $(".className") 配合使用： $("div.c1") // 找到有c1 class类的div标签 所有元素选择器：...)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 例子： $("div:has(h1)")// 找到所有后代中有h1标签的div...对象，当我们通过模糊筛选得到多个标签时（这些标签以数组的形式返回）得到的就是标签需要使用$(' ')转为jQuery对象，只有jQuery对象才能使用以下方法。...3.6.4阻止后续事件执行 使用场景：当一个标签绑定了多个事件而我们只希望指定的事件被触发时使用。...}); // jQuery对象可以使用新添加的check()方法了。
2. jQuery基本使用 2.1 对象获取 2.1.1 基本选择器 //基本选择器 //使用js进行获取 var btns = document.getElementsByTagName("button...该错误的出现意味着jQuery的文件未加载成功 console.log($btns); console.log($btns2); 2.1.2 属性及伪类选择器 使用css2提供的属性选择器及css3提供的伪类选择器可以更快捷的选择元素...//jquery提供的css方法可以解析json格式数据 可以使用json形式填入多个样式修改 $d1.css({"width":"200px","height":"200px",...//jquery提供的css方法可以解析json格式数据 可以使用json形式填入多个样式修改 $d1.css({ "width": "200px", "height": "200px...针对通过动态添加到页面中的元素进行事件绑定（此处先做了解，动态增删时演示案例） 语法：$(已存在的父元素).on(事件名,子元素选择器,函数) //给删除标签添加点击事件 $('table').on(
JQuery 中的 for 循环 在 JQuery 中，for 循环通常用于遍历匹配到的元素集合。我们通过 JQuery 的选择器选取一组元素，然后使用 for 循环遍历它们，执行特定的操作。...然后，我们使用 for 循环遍历了这些元素，并对每个元素执行了一些操作，比如添加类名和修改文字内容。 这是一个简单的示例，但展示了 for 循环在 JQuery 中的基本用法。...使用 each() 方法 each() 方法是 JQuery 中用于遍历集合的一种强大方式。它遍历一个 JQuery 对象的每个元素，为每个元素执行提供的函数。...-- 具有 item 类的元素 --> div class="item">div> 在这个例子中，我们使用了 each() 方法，它接受一个函数作为参数，该函数会在集合的每个元素上被调用...总结 for 循环是一种在 JQuery 中遍历元素的基本方式，但在处理 JQuery 对象时，使用 each() 方法和其他遍历方法更为灵活和方便。
var div = $(“div”)[0]; 方法二 : 使用jQuery的get(index)取原生对象 var div2 = $(“div”).get(0); jQuery获取元素 jQuery...层级选择器 后代选择器： $("div .c1") //空格分隔 子代选择器： $("div>span") 过滤选择器，需要结合其他选择器使用。...index - 选择器的 index 位置 element - 当前的元素 $.each () 函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理 $.each(Object...$("div").click(function(){}); this 表示事件的触发对象，在 jquery 中可以使用，注意转换类型。...this 为原生对象只能使用原生的属性和方法，可以使用 $(this) 转换为 jquery 对象，使用 jquery 方法。
DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery里的方法,卵用会报错 约定：如果获取的是jQuery对象,那么在变量前面加上$ var $...选择器和筛选器) 3.1 选择器 3.1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div") , 3.1.2...$("div").find(".test") // find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。...写插件时，最核心的方两个方法 $.extend(object) //为JQuery 添加一个静态方法。...$.fn.extend(object) //为JQuery实例添加一个方法。
() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 2....网页上有 5 个 div> 元素，如何使用 jQuery来选择它们？（答案） 另一个重要的 jQuery 问题是基于选择器的。...jQuery 支持不同类型的选择器，例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class，你可以用标签选择器来选择所有的 div 元素。...() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 2....网页上有 5 个 div> 元素，如何使用 jQuery来选择它们？（答案） 另一个重要的 jQuery 问题是基于选择器的。
() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 2....网页上有 5 个 div> 元素，如何使用 jQuery来选择它们？（答案） 另一个重要的 jQuery 问题是基于选择器的。...jQuery 支持不同类型的选择器，例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class，你可以用标签选择器来选择所有的 div 元素。...jQuery 代码：$(“div”)，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。更详细的解答参见上面链接的文章。...8. jQuery 里的 each() 是什么函数？你是如何使用它的？（答案如下） each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。
jQuery就是一个由JavaScript编写的轻量库，简单的说就是封装了一些JavaScript的操作，所以使用jQuery比使用原生的JavaScript可以达到用更少的代码做更多的事的效果。...一、初识jQuery： 1、使用方法： 去官网http://jquery.com/download/下载jQuery的包，然后放到项目中存放js代码的目录下，最后在需要用jQuery的HTML中用使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方。 ?...四、DOM操作： 1、jQuery创建节点： var div = $("div>我是文本节点div>") $body.append(div) 这段代码就会在html的body中添加一个div节点，...哈哈 div> div> 嘻嘻 div> 五、jQuery的遍历： jQuery的遍历有很多种方式，下面来看一下都如何使用。
div> //使用JQuery获取元素对象 var div1 = $("#div1"); alert(div1.html()) var div2...);//可以将其当做数组来使用 //对$divs 中所有的div让其标签体内容变为"bbb" // $divs.html("bbb"); // JQuery --> JS :...获取多个选择器选中的所有元素 $(function () { // ...包含多个属性条件的选择器 $(function () { //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框 //定义jquery对象插件： $.fn.extend
= $("选择器"); $("#id值"); val();" - javaScript和jquery区别 - 注意事项: "使用jquery的方式获取的对象称为...jquery对象, 使用js的方式获取的对象称为dom(js)对象, 两者的方法和属性不能混用, 使用jquery的方法和属性时,必须保证对象是jquery对象...事件和事件源的绑定 "要保证页面加载成功后,才能使用jq的事件" - jquery对象.事件名称(function(){}); - jQuery的选择器 - 基本选择器:★...- * 所有 - # id - .class - 标签选择器(标签名) - 多个选择器用","号隔开 a,b - 层次选择器:★ - a b:选择a的b...: 基本选择器: * #id .class 标签名称 多个选择器之间使用逗号 层次选择器: a b a>b a+b a~b 基本过滤选择器
.add() 创建一个新的对象，元素添加到匹配的元素集合中。 .add(selector) selector 一个字符串表示的选择器表达式。...$("p").add("div") .add(html) html HTML片段添加到匹配的元素集合中。 ...$('li').add(' new paragraph') .add(elements) elements 一个或多个元素添加到匹配的元素集合。....add(jquery object) 一个现有的jquery 对象添加到匹配的元素集合。 ....each() 遍历一个jQuery对象，为每一个匹配的元素执行一个函数。
jQuery内容 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax 下载链接：jQuery官网 jQuery版本 1.x：兼容IE678,使用最为广泛的...).action() 查找标签 1、选择器 id选择器 $("#id") 标签选择器 $("tagName") class选择器 $(".className") 配合使用 $("div.c1") //...)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 例子： $("div:has(h1)")// 找到所有后代中有h1标签的div...// 为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); }); 注意：jQuery 的方法返回一个 jQuery 对象，遍历...}); // jQuery对象可以使用新添加的check()方法了。
$("标签名称") 9.2 所有选择器 所有选择器：选取页面中所有的DOM对象 $("*") 9.3 组合选择器 组合选择器是多个被选中对象间使用逗号隔开后形成的选择器，可以组合 id、class、标签名等...函数 $(选择器).empty() ：将jQuery对象数组中所有 DOM 对象的子对象删除，不删除本身这个dom对象 13.2.5 append函数（常用） 为数组中所有 DOM 对象添加子对象 $(...选择器).append(" 我动态添加的 div ") 可以增加任意的页面元素 13.2.6 html函数 设置或返回被选元素的内容（相当于JS中innerHTML）。...重点：可以将普通数组对象、dom对象转换为 jQuery对象来使用 each()的语法二进行遍历。 但是 json对象不可以转变为 jQuery对象，只能使用语法一遍历，不可以使用语法二。...使用jQuery函数，实现Ajax请求。 15.1 关于jQuery函数使用Ajax请求的介绍。 jQuery 提供多个与 AJAX 有关的方法。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
