web前端

jQuery判断当前元素显示状态并控制元素的显示与隐藏

1.jQuery判断一个元素当前状态是显示还是隐藏

$("#id").is(':visible');   //true为显示,false为隐藏

$("#id").is(':hidden');   //true为隐藏,false为显示

if($("#id").is(':hidden')){

//逻辑代码

}

2.jQuery控制css的display

$("#id").show();    //表示display:block

$("#id").hide();   //表示display:none

$("#id").toggle();   //切换元素的可见状态

$("#id").css('display','none');

$("#id").css('display','block');

JavaScript 弹出框(警告框、确认框、提示框)

JavaScript 有三种类型弹出框:警告框、确认框、提示框。

一、警告框

如果要确保信息传递给用户,通常会使用警告框。当警告框弹出时,用户将需要单击“确定”来继续

基础语句

		<script>
			//警告框
			window.alert("成功弹出警告框!"); //window.alert()方法可以不带window前缀。
			//alert("成功弹出警告框!")
		</script>

 

显示结果
在这里插入图片描述

二、确认框

如果您希望用户验证或接受某个东西,则通常使用“确认”框。当确认框弹出时,用户将不得不单击“确定”或“取消”来继续进行。

基础语句

		<script>
			//确认框
			//原理:如果用户单击“确定”,该框返回 true。如果用户单击“取消”,该框返回 false。
			
			window.confirm("请选择 确定 

解决Cannot read properties of null (reading ‘pickAlgorithm‘)

问题介绍

在导入Vue项目使用 ' npm i ' 安装node_moduels的时候,终端出现错误如下:

具体是这一句:Cannot read properties of null (reading 'pickAlgorithm')


 解决方法:

在终端输入: npm cache clear --force

npm cache clear --force

重新运行 npm i 命令

可以在左边看到已经成功安装好了node_moduels

运行  npm run serve 可以进行工作了

Bootstrap 5.2.0 发布

Bootstrap v5.2.0 终于稳定了!我们已经解决了更多错误、改进了更多文档、编写了新指南并构建了新的功能环境示例,等等!

继续阅读测试版和稳定版的亮点。

文档重新设计

正如我们在测试版中预览的那样,文档已经过重新设计!它从我们的新主页开始, 在那里我们更完整地展示了 Bootstrap 的功能和更新的设计。

新主页

文档侧边栏导航已经过大修,始终扩展组以便于浏览,全新的 DocSearch 体验与搜索历史,以及移动侧边栏和导航栏的新响应式画布抽屉。

新文档页面

新搜索

我们甚至更新了导航栏中的版本选择器以在次要版本之间进行交叉链接!

文档版本选择器

更新了按钮和输入

通过我们的文档重新设计,我们使用修改后的 和 刷新了按钮和padding输入border-radius下面是我们按钮的前后对比:

更新按钮

大量新的 CSS 变量

现在,几乎我们所有的组件都具有用于实时自定义的 CSS 变量、更轻松的主题化以及(很快)从暗模式开始的颜色模式支持。您可以查看每个文档页面上可用的 CSS 变量,例如我们的按钮

--#{$prefix}btn-padding-x: #{$btn-padding-x

$(function(){})中定义变量的作用域

常常由于一个页面功能模块特别多,例如tab页。我们想把每个模块的功能写在一个js中,但是为了区分开,我们在一个模块中定义了多个$(function(){}),定义在$(function(){})中的作用域会怎么样呢?下面举几个例子

(1)$(function(){

var a=1;

})

$(function(){

alert(a);

})

这时会报错,a是undefined,因为变量a中能在定义的$(function(){})中有效,那么,我们真的想定义一个公用的变量怎么办呢?我总结了一下。

方法一:

(1)$(function(){

window.a=1;

})

$(function(){

alert(a);

})

输出:1

注意:不要写反了,如果在下面$(function(){})中定义,也会显示a为undefined,因为$(function(){})写在前面的先加载。

方法二:

(2)

var a=1;

$(function(){

alert(a);

})

输出:1

jquery通过递归来实现的图片依次消失和隐藏的案例

javascript jquery通过递归来实现的图片依次消失和隐藏的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
        }
        img{
            width:90px ;
            height:90px;
            vertical-align: top;
        }

    </style>
   
</head>        
<body>        
<input type="button" value="隐藏动画" id="btn1"/>
<input type="button" value="显示动画" id="btn2"/>
<div>
    <img src="images/1.jpg"/>
    <img src="images/2.jpg"/>
    <img src="images/3.jpg"/>
    

CSS如何实现div宽度根据内容自适应

小编给大家分享一下CSS如何实现div宽度根据内容自适应 ,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

在实际应用中,可能有这样的需求,那就是需要div根据内容进行宽度自适应。有很多开发者可能误以为如果不设定div的宽度就可以实现宽度随内容自适应,其实这是错误的,因为在默认状态下,div的宽度值是百分之百,也就是会占满整个父元素宽度。
代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="https://www.yisu.com/" /> 
<title>亿速云</title> 
<style type="text/css"

jquery如何获取标签内容

jquery获取标签内容的方法:1、使用“$('#id').val()”方法获取标签的value值;2、通过“$('#id').text()”方法获取标签中间的文本;3、通过“$('#id').html()”方法获取标签中的html内容。

 

推荐:《javascript基础教程》

使用jquery获得标签的值或元素的内容

$('#标签id').val() 可以用来获取标签的value值,比如 input 标签的value值可以用它获取;
$('#标签id').text()可以用来获取标签中间的文本,比如 <span>值1</span>就可以用它获取到值1;
$('#标签id').html() 可以用来获取标签中间的html内容,比如<div id="div1"><span>123</span></div>可以用$('#div1').html()获取到<span>123</span>;
$('#标签id').attr('属性名')可以用它来获取标签的指定属性的值,比如<a href="xxx.aspx">xxx</a>就可以用.attr('href')获取到xxx.aspx。
jquery提供了三个获得内容的方法: text()、html() 以及 val(),其中前两个可用于解决本问题:
$("label#userid").text(); // 首选,获取label的文本
$("label#userid").html(); // 也可以实现,获取label标签内的所有html标记,一般情况改下label标签内就是文本,所以等效上面的方法

下面给出实例演示:分别使用以上两种方法获取label标签的内容,注意最终结果的区别

创建Html元素

<div class="box">
<span>点击按钮获取label中内容:</span><br>
<div class="content">
<label id="userid">输入用户名</label><input type="text">
</div>
<input type="button" value="获取label中的内容">
</div>