jQuery 对象与dom 对象时可以相互转换的，转换之后它们就可以相互调用了 jQuery 选择器 注意，如果获取到多个元素将是一个数组，可以直接用数组的属性方法，比如 length 当前元素： 1...$(this) ：当前 HTML 元素 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。...) 停止在被选元素上运行动画 toggle() 对被选元素进行隐藏和显示的切换 jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。...DOCTYPE html> 1 html> 2 3 jquery/jquery.js">....is() 根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。 .last() 将匹配元素集合缩减为集合中的最后一个元素。
PS：jQuery中使用 jQuery对象.css("属性":"值"); 的方式设置标签的样式。 4、并集选择器 语法：$("div,p,span")，中间使用逗号隔开。...9、直接兄弟选择器 语法：$("div+span") 选择的是div 后面的直接兄弟标签，如果这个直接兄弟为 span 标签则选中，如果为其他标签则不选中。...> li> html> 1、jQuery中鼠标进入事件是：mouseenter；鼠标离开事件是...：mouseleave 2、css 中的 display:none|block 对应的隐藏和显示在 jQuery 中可以使用方法：show() 和 hide(); 3、show 和 hide 方法中可以添加参数...li"); 查找除自身之外的所有兄弟节点 当 next， prev 系列的方法，如果没写参数，则查找所有的兄弟节点；如果有参数，则查找所有兄弟节点中的指定元素。
hide([speed,[easing],[fn]]) ：隐藏 toggle([speed],[easing],[fn]) ：切换，显示则隐藏，隐藏则显示 <input type=...this：集合中的每一个元素对象 回调函数返回值： true：如果当前function返回为false，则结束循环(break)。...false：如果当前function返回为true，则结束本次循环，继续下次循环(continue) $.each(object, [callback])，object为需要遍历的jq对象，回调方法中的参数与...for(元素对象 of 容器对象) li>北京li> li>上海li> li>天津li> li>重庆li> html> html lang="en"> 广告自动显示和隐藏</title
(write less,do more.) jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM...，如果你使用的技术是最新的技术，用到了新的特性，此时就需要从官方文档中查看新特性的使用方式。...2.jQuery语法 通过 jQuery，可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。...jQuery 的 action() 执行对元素的操作 示例： $(this).hide() 隐藏当前元素 $("p").hide() 隐藏所有段落 $(".test").hide() 隐藏所有...隐藏HTML 元素 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
后者是前者经过压缩处理后的版本，它去除了多余的注释、空白字符等信息，并缩短了变量的名称，以减小js文件的体积。建议你在生产环境中使用该文件，以便于用户浏览器能够更快地加载jQuery库。...$A.detach(); // 删除$A，但保留其绑定的事件、附加数据等 $A.clone(); // 克隆一个$A 九：动画处理 $("selector").show(); // 显示隐藏的元素，默认不带过渡动画效果...$("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏，隐藏就显示)，其用法与show()类似 /* 下面的slide*、fade*系列方法与上面的show()、hide...").fadeToggle(); // 隐藏显示的元素，带有淡出的过渡动画效果 / 设置所有匹配元素的css样式"width: 200px; height: 100px"，并执行一个当前样式到指定样式的过渡动画效果...用于遍历数组元素，并根据函数的返回值(true/false)来过滤数组元素 var array2 = [ "Hello", 12, "jQuery", true ]; var resultArray2
jQuery对象：将DOM原生对象进行封装后得到的类数组对象，它是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。...ubind() 适用于任何通过 jQuery 附加的事件处理程序。...() { var text = $(this).text() console.log(text) }) //li和click的位置不一样 5.jquery 如何展示/隐藏元素？....show([speed], [callback])：显示元素 .hide([speed], [callback])：隐藏元素 .toggle([speed], [callback]): 如果元素是最初显示...，它会被隐藏；如果隐藏的，它会显示出来 .fadeIn([speed], [callback])：通过淡入的方式显示匹配元素。
所谓"切换"，就是如果该元素上已存在指定的类名，则移除掉；如果不存在，则添加该类名。...n5的子元素n6中包含"CodePlayer"，因此n5也会被计入在内 $("#n1 :contains(CodePlayer)"); //上面div元素共有4个, 索引从0开始, 最大索引为3, 如果超过索引则结果为...n5的子元素n6中包含"CodePlayer"，因此n5也会被计入在内 $("#n1 :contains(CodePlayer)"); //上面div元素共有4个, 索引从0开始, 最大索引为3, 如果超过索引则结果为...如果该方法未设置参数, 则返回被选元素的当前值....3.2,clone()函数 复制指定元素并返回一个新的jquery对象。 这是个段落。
dom元素节点，并对dom进行添加一个标签的操作，如果dom结构特别复杂，或者添加的元素非常复杂，则代码会变得非常复杂且阅读性低 vue: li").last().append("li>第"+i+"条数据li>") }); }); 场景二：控制按钮的显示隐藏...，下图为vue和jquery两种操作的代码，我们从中可以看出vue只需要控制属性isShow的值为true和false即可，而jquery则还是需要操作dom元素控制按钮的显示和隐藏 vue: 第2条数据li> 添加数据 隐藏按钮...元素后手动添加一个标签 $("#list").children("li").last().append("li>第"+i+"条数据li>") }); //需要手动隐藏
jQuery对象 jQuery还支持将HTML字符串转换为临时DOM元素，并包含在返回的jQuery对象中。...同样的，如果筛选结果没有匹配任何DOM元素，则返回一个空的jQuery对象。...如果没有为其传入表示值的参数，则表示获取操作，将返回获取到的数据；如果为其传入了表示值的参数，则表示设置操作，它将设置DOM元素指定属性的值。...简而言之，假设当前jQuery对象匹配多个元素，如果使用jQuery对象的方法来获取数据(“读”数据)，则只会获取第一个匹配元素的数据；如果使用jQuery对象的方法来设置元素数据(“写”数据)，则会对所有匹配元素都进行设置操作...如果该方法用于获取数据，则返回null或undefined；如果该方法用于设置数据，则忽略设置操作，并返回该空对象本身；如果该方法用于筛选元素，则同样返回一个新的jQuery空对象。
jQuery，您可以选取（查询，query） HTML 元素，并对它们执行”操作”（actions）。...jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。...如果 load() 方法已成功，则显示”外部内容加载成功！”，而如果失败，则显示错误消息： 如果没有找到，则返回-1） $.isArray() 判断指定参数是否是一个数组 $.isEmptyObject() 检查对象是否为空（不包含任何属性） $.isFunction() 判断指定参数是否是一个函数...jQuery text() 和 html() – 设置内容并使用回调函数 使用 text() 和 html() 设置内容并使用回调函数 jQuery attr() – 设置属性值 使用 jQuery
slideUp() 通过调整高度来滑动隐藏被选元素 stop() 停止在被选元素上运行动画 toggle() 对被选元素进行隐藏和显示的切换...html() 设置或返回匹配的元素集合中的 HTML 内容。 insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。...html() 设置或返回匹配的元素集合中的 HTML 内容。 removeAttr() 从所有匹配的元素中移除指定的属性。....is() 根据选择器检查当前的匹配元素集合，如果存在至少一个匹配元素，则返回 true。 .last() 将匹配元素集合缩减为集合中的最后一个元素。....dequeue() 从队列最前端移除一个队列函数，并执行它。 jQuery.dequeue() 从队列最前端移除一个队列函数，并执行它。
1 JQuery动画 JQuery有三种方式显示和隐藏元素： 1）默认显示和隐藏方式： --show([speed, [easing], [fn]]) --hide([speed...）； 2）$.each(object,[callback])： 3）for..of：JQuery3.0 版本之后提供的方式 【注意】：如果遍历中加判断条件，当前function返回为false，则结束循环...(相当于js中使用的break)，如果返回为true，则结束本次循环，继续下次循环(相当于js中使用的continue)； 【练习案例】： 如果是上海，则结束循环 if("上海" == $(element).html()){ //如果当前function... html> 3 JQuery事件绑定 JQuery事件绑定方式包括： 1）JQuery标准的绑定方式：JQuery对象.事件方法（回调函数）；注意：如果调用事件方法，不传递回调参数
方式2则通过公共的CDN的优势加快了jQuery文件的加载速度。 在HTML页面中创建含有文本“测试”和属性（align=“center”）的元素。...获取内容不为空的元素（特殊） $("li:parent")获取内容不为空的li>元素 2.2.5 可见性选择器 为了方便开发，jQuery中还提供了可见或隐藏元素的获取。...选择器 功能描述 示例 :hidden 获取所有隐藏元素 $("li:hidden")获取所有隐藏的li>元素 :visible 获取所有可见元素 $("li:visible")获取所有可见的li>...，则返回true is(expr) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true has(expr) 保留包含特定后代的元素，去掉那些不含有指定后代的元素...obj表示进行匹配的HTML元素对应的jQuery对象。 根据需要对jQuery对象的属性进行判断，并使用return返回匹配结果。
jQuery 对DOM的原生方法进行了封装，jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法。...---- jQuery 效果 可在API文档中查询具体用法：https://jquery.cuishifeng.cn/ jQuery 封装了很多动画效果，例如： 1.显示隐藏效果 1.显示 //（1）...1.存入数据 data('name','value'); // 向被选元素附加数据 //例如：$('span').data('uname','roydon'); 2.获取数据 date('name'...$(“ul”).empty(); 结果：清空ul里所有的li；.html(‘’’’);与其类似 ---- jQuery 尺寸、位置操作 jQuery 尺寸 参数为空时是取值，参数不为空是设置宽高；...; }); 注意：事件委派现在大多采用⬆️这种写法： 优势在于当动态创建元素时，可以动态自动为其绑定事件 例如：ol里添加li并动态绑定事件 $("ol").on("click", "li", function
如果需要了解DOM的教程参考地址：https://chuanke.baidu.com/v5508922-239160-1771112.html 1.1 简单绑定click事件 语法格式：click([[...此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。...语法：$dom.unbind(type,[fn]) 如果没有参数，则删除所有绑定的事件。 如果提供了事件类型作为参数，则只删除该类型的绑定事件。...如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。...参数说明： 如果不带参数，则所有绑定的live事件都会被移除。 如果提供了type参数，那么会移除对应的live事件。 如果也指定了第二个参数function,则只移出指定的事件处理函数。
对象，就可以对这个对象进行操作； 可以查找当前元素下的子元素； html //当鼠标访问指定的li时，指定的li下的p标签显示，鼠标移除后，对应的p消失 li>3</span...节点 $(selector) 通过选择器获取节点 $(html) 使用HTML字符创建jQuery节点 3.4.2 插入节点 1 元素内部插入子节点 方法 说明 $(A).append(B) 将B节点追加到...}); $("li").each(function(){ //注意:elm时dom元素对象,不可以直接使用jQuery方法,必须是转化为jQuery节点 alert($(this).html(...DOCTYPE html> html> 动画-显示，隐藏，淡入淡出，收索，拉伸 ...//第一个参数是执行显示或隐藏的速度或者隐藏的时长，单位是毫秒,如果为0，立刻执行 //也可以是：slow,normal,fast， //第二个参数是执行显示或者隐藏效果完成后，需要执行的操作函数
(1算起) first()，获取第一个元素 last()，获取最后个元素 hasClass(class)，检查当前的元素是否含有某个特定的类，如果有，则返回true。...•end 结束选取自己的位置，如果不指定，则就是本身的结尾 1.2 查找 children([expr])，取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。...第一个元素是0.如果是负数，则可以从集合的尾部开始选起。 •end 结束选取自己的位置，如果不指定，则就是本身的结尾。...],[easing],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。...toggle(speed[,fn]) 切换,如果隐藏就显示，如果显示就隐藏。
轻量级：依赖程序少，占用的资源少 特点：js代码和html代码分离 jQuery已经成为最流行的 javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。... 中的 show() 方法将它们显示出来" id="btn2"/> 隐藏域, 并打印它们的值" id="btn3"/> ...隐藏域, 并打印它们的值" id="btn4"/> <!...例如：$("div:nth-child(2)") // 如果元素上添加条件，则必须使用空格。...option的value没有值，则获取的是option的text文本的值 // html() 函数获取的是标签体的内容 $
引入依赖 使⽤JQuery需要先引⼊对应的库 在使⽤jQuery CDN时，只需要在HTML⽂档中加⼊如下代码 jquery.com/jquery-3.7.1.../scr jQuery语法 jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作 基础语法： $(selector).action() $() 是⼀个函数, 它是 jQuery...如果在⽂档没有完全加载之前就运⾏函数，操作可能失败 $(document).ready(function(){ // jQuery functions go here }) 示例： 则移除；如果没有，则添加。...$("#elementId").toggleClass("activeClass"); // 如果 #elementId 元素当前有 "activeClass" 类，则移除它，否则添加它 事件处理拓展
jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。...如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子： 试图隐藏一个不存在的元素 获得未完全加载的图像的大小 JQuery选择器 选择器须臾对元素组或单个元素进行操作。...显示被隐藏的元素，并隐藏已显示的元素 $(selector).toggle(speed,callback); 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast"...如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。...如果元素向下滑动，则 slideToggle() 可向上滑动它们。 如果元素向上滑动，则 slideToggle() 可向下滑动它们。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
