html 代码： div id="exPara" style="display:none"> 22222222 div> jquery 代码
在某些需求中，你需要点击按钮显示某个div，并隐藏已经显示的按钮。同时点击另外一个按钮，又会隐藏已经显示的，并显示已经影藏的。
原生Js与jQuery显示隐藏div的几种方法 简介：本文将会讲解，如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一 首先是进行js演示和讲解。...首先是display的方法，display属性的特点为，可以使得div隐藏之后释放占用的页面空间。...div的显示和隐藏，但是隐藏后页面显示空白，功能也消失。...从性能角度分析：第一种方式性能更高，用div.style.display="none"隐藏会引起，div里面的东西休眠，里面的事件就不响应了。 jQuery 使用jQuery的话就会更加的便捷了。...div 通过css方法设置 $(“#id”).css(“display”,“none”);//隐藏div $(“#id”).css(“display”,“block”);//显示div 通过hide与show
jQuery 语法示例： $(this).hide() 隐藏当前元素。 $(“p”).hide() 隐藏所有段落。 $(“p.wow”).hide() 隐藏所有“wow”类型的段落。...$(“#wow”).hide() 隐藏一个ID为“wow”的元素。 jQuery 选择器 在开始使用jQuery之前，你需要理解jQuery 选择器的核心概念。...jQuery 选择器利用了CSS的语法，从而使得开发人员能够精确的选择一个元素并修改其显示效果。...$(“div”) 选择所有的div> 元素。 $(“.super”) 选择所有的“super”类型的元素。 $(“div.super”) 选择所有“super”类型的div>元素。...$(“#wow”) 选择第一个具有“wow”标识符的元素。 $(“div#wow”) 选择第一个具有“wow”标识符的 div> 元素。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 二 什么是jQuery对象？ ...jQuery_v3.3.1.js"> 代码内容 四 选择器和筛选器 4.1 选择器 4.1.1 基本选择器... (4种) $(".outer div") 后代选择器 $(".outer>div") 子代选择器 $(".outer+div") 毗邻选择器...// 高度计算 scrollTop //获取下拉框位置并返回顶部 选项7 选项8 div
1、准备页面 2、练习 五、jQuery 选择器 1、作用 2、选择器的组成 3、如何使用选择器获取元素 六、基本选择器 1、基本选择器 1.1、id 选择器 1.2、元素选择器 1.3、类选择器...(content){ // 当显示, 改成隐藏 temp = content; // 存起内容 div.innerHTML...= ''; // 清除内容 }else { // 当隐藏, 改成显示 div.innerHTML = temp;...1.2、元素选择器 Element，用法：$(“div”) 返回值元素集合。...> 问题 1：获取隐藏 input 的 value 属性值, 不能使用根据元素名, 也不能通过给元素加 id 属性，再通过 id 选择器找
jquery.min.js" type="text/javascript"> 并传参 }) }) one
为hidden的元素 $("li:visible") //匹配所有可见元素 :hidden选择所有隐藏的元素，如：$("div:hidden").show(3000)); :visible选择所有隐藏的元素...:input选择所有input、textarea、select和button元素。 :password选择所有密码类型的元素。 :radio选择所有选项按钮的元素。...，同时提供了大量的定制选项，满足应用程序各种需求。...jQuery 实例 jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。...实例解析 jQuery AJAX load() 方法 jQuery load() 异步载入文件内容并插入到 div> 元素中。
Chosen的使用 Chosen是jquery下的一个下拉框插件。它能美化select选择框使其他变的更好看、更方便,同时它更扩展筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。...，以更新 Chosen 生成的选框 chosen:activate 相当于 HTML focus 事件 chosen:open 激活 Chosen 并显示搜索结果 chosen:close 关闭 Chosen...并隐藏搜索结果 6、取值，初始化选中项，数据渲染 上面介绍了chosen所以的配置，属性，事件，有没有发现问题，chosen渲染不是单独提供数据源，然后根据数据源渲染下拉框的，所以，动态改变下拉框数据只能使用...src="docsupport/jquery-3.2.1.min.js" type="text/javascript"> jquery.js...html方式，不提供操作单独数据源更新选项的操作。
1. jQuery 选择器 原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。 1.1....基础选择器和层级选择器案例代码 div>我是divdiv> div class="nav">我是nav divdiv> 我是p 选择器 筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。...1.4 知识铺垫 jQuery 设置样式 $('div').css('属性', '值') jQuery 里面的排他思想 // 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式...$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作 链式编程 // 链式编程是为了节省代码量，看起来更优雅。
1 div> 选项卡2 div> 选项卡3 div...> div> 上述代码加粗部分是我们实现选项卡组件必须要导入的文件，其中jquery.ui.tabs.js是实现选项卡组件的js文件。...选项卡的标题使用列表实现，选项卡的身体使用div实现，并且通过标题列表中的超链接把标题和对应的身体关联起来，即超链接href属性的值是下面某个div的id。...1 div> 选项卡2 div> 选项卡3 div...用户选择某个选项后， 上述代码中的斜体部分调用了show函数，把下拉列表框中选中项的值作为第一个参数使用。hide函数的用法跟show函数一样，只不过它是用来实现元素隐藏时的动画。
基础选择器和层级选择器案例代码 div>我是divdiv> div class="nav">我是nav divdiv> 我是p 选择器 筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 : ? 4....知识铺垫 jQuery 设置样式 $('div').css('属性', '值') 隐式迭代 // 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。...$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作 案例代码 多个里面筛选几个 ...").eq(index).show(); // 4.让其余的图片(就是其他的兄弟)隐藏起来 $("#content div").eq(index).siblings
选择姓氏" readonly> div class="search-list" data-status="hide"> <ul...$(".search-list").attr("data-status", "hide"); }); // 选择对应选项，并赋值给input框 $(".search-list...而在本示例中，由于blur处理程序，会将对应的下拉框展示区隐藏，所以导致其后续click事件并不会执行。上述console的信息也不会被输出。...$(".search-list").attr("data-status", "hide"); }, 300); }); // 选择对应选项，并赋值给...$(".search-list").attr("data-status", "hide"); }); // 选择对应选项，并赋值给input框 $(".search-list
-- DOM结构示意 --> 选择姓氏" readonly> div class="search-list" data-status=...$(".search-list").attr("data-status", "hide"); }); // 选择对应选项，并赋值给input框 $(".search-list...而在本示例中，由于blur处理程序，会将对应的下拉框展示区隐藏，所以导致其后续click事件并不会执行。上述console的信息也不会被输出。...$(".search-list").attr("data-status", "hide"); }, 300); }); // 选择对应选项，并赋值给...$(".search-list").attr("data-status", "hide"); }); // 选择对应选项，并赋值给input框 $(".search-list
使用jQuery 选择器选取元素，并封装为jQuery对象 将现有的DOM元素封装为jQuery对象 将HTML字符串封装为jQuery对象 元素筛选 jQuery 核心：DOM操作的原则...使用jQuery 选择器选取元素，并封装为jQuery对象 在JS原生DOM中，我们想要对DOM元素进行操作，首先得获取到对应的元素(getElementById()、getElementsByTagName..."); // 选择p元素的所有子代span元素 $("div + p"); // 选择div元素后面紧邻的同辈p元素 $("div p span"); // 选择div元素的所有后代p元素的后代span...元素 // 多个选择器之间没有空格，将匹配同时满足这些选择器条件的元素 $("p#uid"); // 选择id属性为"uid"的p元素 $("div.foo"); // 选择所有带有CSS类名"foo...("margin", 0) // 为这些子代元素设置css样式"margin: 0"，并返回当前对象本身 .hide(); // 隐藏这些子代元素，并返回当前对象本身 显然，这种链式编程风格的实现机制
( url, [callback] )使用GET请求JavaScript文件并执行。..."); }); jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。 设置默认的全局AJAX请求选项。...$("*") 匹配所有元素 $("div,span,p.myClass") 联合所有匹配的选择器 层叠选择器 $("form input") 后代选择器，选择ancestor的所有子孙节点 $("#main...input标签的所有input标签元素 $("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 基本过滤选择器 $("tr:first...") 匹配所有隐藏的元素，也包括表单的隐藏域 $("div:visible") 匹配所有可见的元素 属性过滤选择器 $("div[id]") 匹配所有具有指定属性的元素 $("input[name='newsletter
，selector2 组合选择器：合并选择器1，选择器2的结果并返回 案例： $(document).ready(function(){ //1.选择 id 为 one 的元素 #id...div> div>div> div id="div03">div> 可见性过滤选择器 :hidden 所有隐藏的元素 :visible 所有可见元素 案例...option> 选项2 选项3...选项6 选项7 jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果 div> 练习：CSS_动画 品牌展示 需求： 1.点击按钮的时候，隐藏和显示卡西欧之后的品牌
体验jQuery 步骤： 引入jQuery文件。 在文档最末尾插入 script 标签，书写体验代码。 $(‘div’).hide() 可以隐藏盒子。...基础选择器和层级选择器案例代码 div>我是divdiv> div class="nav">我是nav divdiv> 我是p 选择器 筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 : ?...$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作 链式编程 // 链式编程是为了节省代码量，看起来更优雅。...代码演示 显示 隐藏 切换 div>div>
在其核心，jQuery重点放在从HTML页面里获取元素并对其进行操作。如果你熟悉CSS，就会很清楚选择器的威力，通过元素的特性或元素在文档中的位置去描述元素组。...假定我们想选择带有CSS类notLongForThisWorld的所有div>元素。jQuery语句如下所示： $("notLongForThisWorld"); 3.2. ...将每一个选择器匹配到的元素合并后一起返回 集合元素 $("div,span,p.cls")选取所有div>，和拥有class为cls的标签的一组元素 * 匹配所有元素 集合元素 $(...div").css("border","9px solid red"); 四、350行jQuery常用脚本 4.1、常用选择器 $('#div1') //id为div1的节点...通常jQuery只在内部处理并创建这个对象，但用户也可以通过xhr选项来传递一个自己创建的xhr对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。
获取内容不为空的元素（特殊） $("li:parent")获取内容不为空的元素 2.2.5 可见性选择器 为了方便开发，jQuery中还提供了可见或隐藏元素的获取。...选择器 功能描述 示例 :hidden 获取所有隐藏元素 $("li:hidden")获取所有隐藏的元素 :visible 获取所有可见元素 $("li:visible")获取所有可见的...$("div[class~='box']")获取class属性值等于“box”或通过空格分隔并含有box的div>元素，如“t box” [attr1][attr2]......参数options用于设置Ajax请求的相关选项。...obj表示进行匹配的HTML元素对应的jQuery对象。 根据需要对jQuery对象的属性进行判断，并使用return返回匹配结果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
