jquery默认让div隐藏

在网页设计的世界里，有时候我们需要让某些元素在页面加载时不显示，而是等到特定条件满足后再显示出来，这在很多情况下是非常有用的，比如在加载动画完成前隐藏内容，或者在用户执行某些操作后才展示某些信息，我们就来聊聊如何使用jQuery这个强大的JavaScript库来实现让div元素默认隐藏的功能。

我们要明白，jQuery是一个快速、小巧、功能丰富的JavaScript库，它让HTML文档遍历和操作、事件处理、动画和Ajax变得简单，使用jQuery，我们可以通过编写更少的代码来实现更多的功能，在隐藏div元素的场景中，jQuery提供了非常方便的方法来实现。

### 1. 隐藏div的基本概念

在HTML中，div是一个块级元素，通常用于将页面分割成不同的部分，默认情况下，div元素是可见的，要让div元素在页面加载时不显示，我们可以使用CSS的`display`属性将其设置为`none`，这样，div元素就不会在页面上占据空间，也不会显示出来。

### 2. 使用CSS隐藏div

在不使用jQuery的情况下，我们可以通过直接在CSS中设置来隐藏div。

```css

.hidden-div {

display: none;

```

然后在HTML中给需要隐藏的div添加这个类：

```html

```

这种方法简单直接，但是如果我们需要在JavaScript中动态控制div的显示和隐藏，或者在页面加载后根据某些条件来决定是否显示div，那么使用jQuery会更加灵活。

### 3. 使用jQuery隐藏div

在jQuery中，我们可以使用`.hide()`方法来隐藏元素，这个方法会将元素的CSS `display`属性设置为`none`，下面是一个简单的例子：

```html

```

在这个例子中，我们首先确保页面加载完成后再执行jQuery代码，这是通过`$(document).ready()`方法实现的，它确保DOM完全加载后再运行里面的代码，我们使用`$("#myDiv")`选择器来选中id为`myDiv`的div元素，并调用`.hide()`方法来隐藏它。

### 4. 动态控制div的显示和隐藏

jQuery的另一个强大之处在于它能够让我们根据用户的交互来动态地控制元素的显示和隐藏，我们可以在用户点击一个按钮时显示或隐藏div：

```html

```

在这个例子中，我们使用了`.toggle()`方法，它会在元素可见时隐藏它，在元素隐藏时显示它，这样，每次点击按钮，div的显示状态就会切换。

### 5. 条件控制div的显示

我们可能需要根据某些条件来决定是否显示div，我们可能有一个表单，只有在用户输入了某些信息后才显示提交按钮，这时，我们可以使用jQuery的`.if()`方法来实现：

```html

```

在这个例子中，我们使用了`.on()`方法来监听input元素的`input`事件，这意味着每当用户在输入框中输入内容时，都会执行回调函数，在这个函数中，我们检查输入框的值是否大于0，如果是，就显示提交按钮的div，否则就隐藏它。

### 6. 总结

通过上述的介绍，我们可以看到jQuery提供了非常灵活和强大的方式来控制div元素的显示和隐藏，无论是静态地在页面加载时隐藏元素，还是动态地根据用户交互或条件来控制元素的显示，jQuery都能轻松实现，这些技巧，可以让你的网页设计更加动态和用户友好。