介绍 jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。...jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。...var div = $(“div”)[0]; 方法二 : 使用jQuery的get(index)取原生对象 var div2 = $(“div”).get(0); jQuery获取元素 jQuery...= $("div>div>"); //创建元素 div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性 var...index - 选择器的 index 位置 data- 当前的数据 jQuery事件处理 文档加载完毕 原生 JavaScript 方法：window.onload jQuery: //语法一 $(
$(“div”).addClass(“one”); 移除样式类 //name:需要移除的样式类名 removeClass(“name”); //例子，移除div中one的样式类名 $(“div”).removeClass...(“one”); 判断是否有某个样式类 //name:用于判断的样式类名，返回值为true false hasClass(name) //例子，判断第一个div是否有one的样式类 $(“div”).hasClass...toggleClass(name); //例子 $(“div”).toggleClass(“one”); 【案例：tab栏切换案例.html】 【案例：旋转木马.html】 jQuery操作属性 attr...操作 设置单个属性 //第一个参数：需要设置的属性名 //第二个参数：对应的属性值 attr(name, value); //用法举例 $(“img”).attr(“title”,”哎哟，不错哦”);...”).empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码） $(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的 等价于 $("div.c1") 补充： .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素...终止each循环 return false； 伏笔... .data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。....data(key, value): 描述：在匹配的元素上存储任意相关数据。...$("div").data("k");//返回第一个div标签中保存的"k"的值 .removeData(key): 描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。...$("div").removeData("k"); //移除元素上存放k对应的数据 示例： 模态框编辑的数据回填表格 插件(了解即可) jQuery.extend(object) jQuery的命名空间下添加新的功能
终止each循环 return false； 3.9.2.data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。....data(key, value): 描述：在匹配的元素上存储任意相关数据。这里存储的值是不可见的。...$("div").data("k",100);//给所有div标签都保存一个名为k，值为100 .data(key): 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data...$("div").data("k");//返回第一个div标签中保存的"k"的值 .removeData(key): 描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。...$("div").removeData("k"); //移除元素上存放k对应的数据 示例： 模态框编辑的数据回填表格 3.9.3插件（了解） jQuery.extend(object) jQuery的命名空间下添加新的功能
1 jQuery快速入门 1.1 什么是jQuery 它是一个开源的JavaScript类库 。...jQuery类。...选择器 功能描述 示例 [attr] 获取具有指定属性的元素 $("div[class]")获取含有class属性的所有div>元素 [attr=value] 获取属性值等于value的元素 $("div...语法 说明 attr(name) 取得第一个匹配元素的属性值，否则返回undefined attr(properties) 将一个键值对形式的对象设置为所有匹配元素的属性 attr(name, value...]) 停止所有在指定元素上正在运行的动画 参数params表示一组包含动画最终属性值的集合。
很多老的项目都是jQuery开发的，所以jQuery还会运行很长时间。...描述 ID选择器 $("#id"); 获取指定ID的元素 全选选择器 $('*'); 匹配所有元素 类选择器 $(".class"); 获取同一类class的元素 标签选择器 $("div"); 获取同一类标签的所有元素...// 但是获取值，只会返回第一个元素的值。...，那么返回第一个元素的内部文本 console.log($div.text());// jQuery获取选择元素的内部文本。...可以通过 原型上的click方法进行绑定点击事件。
示例解析： 上边的效果是点击文档中所有a标签时将弹出对话框（alert），其中，$("a") 是一个jQuery选择器，$本身表示一个jQuery类，所有$()是构造一个jQuery对象，click(...jQuery代码及功能： function jq(){ $(":text:first").hide(); } 运行：当点击id为test的元素时，隐藏form1表单中的type为text的第一个...attr (name) 获取第一个匹配对象的属性 jQuery jQuery代码及功能...： function js(){ alert($("img").attr("src")); } 返回 test.jpg attr (prop) 为第一个匹配对象的设置属性，prop为hash...").attr({ src: "test.jpg", alt: "Test Image" }); } 运行结果相当于 attr
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。...GET – 从指定的资源请求数据 POST – 向指定的资源提交要处理的数据 GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。 POST 也可用于从服务器获取数据。...jQuery $.get() 方法 $.get() 方法通过 HTTP GET 请求从服务器上请求数据。...下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据： 第一个 AJAX 请求开始时运行的函数 ajaxStop() 规定所有的 AJAX 请求完成时运行的函数 ajaxSuccess() 规定 AJAX 请求成功完成时运行的函数 load() 从服务器加载数据
jQuery的包装对象(jQuery.fn原型对象)提供了attr�(name, value)方法可以读取和设置属性内容。...p标签的属性k的值 console.log($('p:first').attr('k')); // 3 // 读取第一个p标签的id属性值，不存在此属性返回undefined...attr(name,value)简单设置属性的方法，接受两个字符串参数，第一个是属性名，第二个是属性值。...fn) 为每个匹配的元素添加指定的类名， 返回值是jQuery包装对象。...var i = 9; $(this).toggleClass("highlight", i > 3); 回调函数 参数：function(index, class) 用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数
=========== jQuery操作属性 1.attr操作(设置单个属性): 第一个参数:需要设置的属性名 第二个参数:对应的属性值 attr(name, value); 示例:...具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop() 注意: 1.1类比attr操作的css操作: jQuery通过...jQuery在进行值获取时,只会返回第一个元素对应的值. 1.3 操作样式类名(jQuery获取并设置 CSS 类): $("#div1").addClass("divClass2") //为...$.get() 该方法通过 HTTP GET 请求从服务器上请求数据....grunt、gulp grunt和gulp是使用node.js编写的,前端首选的自动化工具,gulp在书写配置上比grunt更简洁,运行的性能更高,gulp逐渐成为主流.
jQuery的包装对象(jQuery.fn原型对象)提供了attr(name, value)方法可以读取和设置属性内容。...p标签的属性k的值 console.log($('p:first').attr('k')); // 3 // 读取第一个p标签的id属性值，不存在此属性返回undefined...attr(name,value)简单设置属性的方法，接受两个字符串参数，第一个是属性名，第二个是属性值。...|fn) 为每个匹配的元素添加指定的类名， 返回值是jQuery包装对象。...var i = 9; $(this).toggleClass("highlight", i > 3); 回调函数 参数：function(index, class) 用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数
attr()⽅法⽤于获取属性值....为元素添加一个或多个类，通常用于动态控制样式的应用。...元素上移除 toggleClass(): 切换元素的类，即如果元素已经有该类，则移除；如果没有，则添加。...$(this).css("background-color", "white"); }); // 当用户离开 #inputId 输入框时，背景颜色会恢复为白色 hover(): 当鼠标悬停在元素上时触发两个不同的函数...}, error: function(error) { console.log("请求失败", error); } }); // 使用GET方法从指定URL加载数据
1.1.2 元素自定义属性值 attr() 用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。 语法 ? ...（该方法也可以获取 H5 自定义属性） 1.1.3 数据缓存 data() data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。...元素的自定义属性 我们通过 attr() console.log($("div").attr("index")); $("div").attr("index...", 4); console.log($("div").attr("data-index")); // 3....遍历元素 jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。 语法1 ?
一、jQuery选择器 在CSS3选择器标淮草案定义的选择器语法中，jQuery支持相当完整的一套子集，同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是 jQuery选择器。...=val] 匹配没有attr属性、或attr属性的值不为val的所有元素((jQuery的扩展) [attr^=val] 匹配attr属性值以val开头的元素 [attr$=val] 匹配attr...由于第一个元素的序号是0，因此实际上选中的是第1个、第3个、第5个等元素(jQuery的扩展) :file 匹配元素(jQuery的扩展) :first 匹配列表中的第一个元素...:header 匹配所有头元素:, , , , 或 (jQuery的扩展) :hidden 匹配所有在屏幕上不可见的元素:大体上可以认为这些元素的...p:nth-child(3n+1): text (JavaScript):not(:has(a)) 通常来说，指定标签类型前缀，可以让过滤器的运行更高效。
>,div>DIV2div>] .class .class //一个用于搜索的类,一个元素可以有多个类,只要有一个符合就能被匹配到· 描述: 查找所有类是“...) 1·属性名称 2·返回属性值得函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值· name描述： 返回文本中所有图像的src属性值· jQuery代码 $("img").attr(...参数class描述 删除匹配元素的所有类 jQuery代码 $("p").removeClass(); 回调函数描述: 删除最后一个元素上与前面重复的class jQuery代码 $("li:last...描述 删除匹配元素的所有类 jQuery代码 $("p").removeClass(); 回调函数的描述 删除最后一个元素上与前面重复的class jQuery代码 $("li:last")...(index，class，wsitch)[,switch] 1·用来返回在匹配的元素集合中的每一个元素上用来切换的样式类名的一个函数·接收元素的索引位置和元素旧的样式类作为参数· 2·一个用来判断样式类添加还是移除的
第5章 JQuery操作属性 5.1 attr操作 设置单个属性 // 第一个参数：需要设置的属性名 // 第二个参数：对应的属性值 // $obj.attr(name, value); // 用法举例...$('div').addClass('one'); 移除样式类 // name:需要移除的样式类名 // $obj.removeClass('name'); // 例子，移除div中one的样式类名 $...('div').removeClass('one'); 判断是否有某个样式类 // name:用于判断的样式类名，返回值为true false // $obj.hasClass(name) // 例子，...判断第一个div是否有one的样式类 $('div').hasClass('one'); 切换样式类 // name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。...获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。
查询与查询结果 $()返回值为一个jQuery对象，jQuery对象为类数组。...')) return; // 如果是隐藏元素，直接跳过 }) getter 和 setter jQuery上最简单，最常见的操作为获取(get),或者设置(set)的HTML属性。...然后返回对象，使用链式调用 获取和设置HTML属性 attr()方法为jQuery中用于HTML属性的getter/setter 一个栗子 $('form').attr('action'); // 将会获取到...form元素的action属性 $('#icon').attr('src', 'icon.gif'); // 设置src属性 $('#banner').attr({src:"bannner.gif",...').data('x', 1); // 此不在DOM上显示，会直接作为属性附上 $('div').removeData('x'); // 移出数据 var x = $('div').data('x');
获取并设置 CSS 类 6. 尺寸 三、 jQuery 遍历 1. 祖先（向上遍历） 2. 后代（向下遍历） 3. 同胞（水平遍历） 4. 过滤 四、jQuery AJAX 0. 原理 1....基本语法 $(selector).action() 文档就绪函数 所有 jQuery 函数位于一个 document ready 函数中，为了防止文档在完全加载（就绪）之前运行 jQuery 代码。...获取并设置 CSS 类 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作...用法如下： $(document).ready(function(){ $("div p").first(); // 选择第一个div>div>标签元素 $("p").eq...无法使用缓存文件（更新服务器上的文件或数据库） 2. 向服务器发送大量数据（POST 没有数据量限制） 3.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
