jquery

最新推荐文章于 2024-06-13 16:29:32 发布

「已注销」

最新推荐文章于 2024-06-13 16:29:32 发布

阅读量103

点赞数

文章标签： jquery javascript ecmascript

本文链接：https://blog.csdn.net/cs445579253/article/details/131020088

版权

是javascript的第三方模块

基础应用：

<body>
  <h1 id="txt">中国联通</h1>
  <script src="static/jquery-3.7.0.min.js"></script>
  <script type="text/javascript">
    //利用jquery的功能实现某些效果
    //找到id=txt的标签，在进行内容修改（普通方法）
    //document.getElementById('txt').innerText = "河南移动"
    //利用jquery
    $("#txt").text("河南移动")
  </script>
</body>

jquery应用：

### 4.2 寻找标签（直接寻找）

- ID选择器

  ```html
  <h1 id="txt">中国联通</h1>
  <h1>中国联通</h1>
  <h1>中国联通</h1>
  ```

  ```javascript
  $("#txt")
  ```

- 样式选择器

  ```html
  <h1 class="c1">中国联通1</h1>
  <h1 class="c1">中国联通2</h1>
  <h1 class="c2">中国联通3</h1>
  ```

  ```javascript
  $(".c1")
  ```

- 标签选择器

  ```html
  <h1 class="c1">中国联通1</h1>
  <div class="c1">中国联通2</h1>
  <h1 class="c2">中国联通3</h1>
  ```

  ```javascript
  $("h1")
  ```

- 层级选择器

  ```html
  <h1 class="c1">中国联通1</h1>
  <h1 class="c1">
  	<div class="c2">
          <span></span>
          <a></a>
      </div>
  </h1>
  <h1 class="c2">中国联通3</h1>
  ```

  ```javascript
  $(".c1 .c2 a")
  ```

- 多选择器

  ```html
  <h1 class="c1">中国联通1</h1>
  <h1 class="c1">
  	<div class="c3">
          <span></span>
          <a></a>
      </div>
  </h1>
  <h1 class="c2">中国联通3</h1>
  <ul>
      <li>xx</li>
      <li>xx</li>
  </ul>
  ```

  ```javascript
  $("#c3,#c2,li")
  ```

- 属性选择器

  ```html
  <input type='text' name="n1" />
  <input type='text' name="n1" />
  <input type='text' name="n2" />
  ```

  ```java
  $("input[name='n1']")
  ```



### 4.3 间接寻找

- 找到兄弟

  ```html
  <div>
      <div>北京</div>
      <div id='c1'>上海</div>
      <div>深圳</div>
      <div>广州</div>
  </div>
  ```

  ```javascript
  $("#c1").prev()        // 上一个兄弟
  $("#c1")
  $("#c1").next()        // 下一个兄弟
  $("#c1").next().next() // 下一个、下一个
  
  $("#c1").siblings()    // 所有的兄弟
  ```

- 找父子

  ```html
  <div>
      <div>
          <div>北京</div>
          <div id='c1'>
          	<div>青浦区</div>
          	<div class="p10">宝山区</div>
          	<div>浦东新区</div>
          </div>
          <div>深圳</div>
          <div>广州</div>
      </div>
      <div>
          <div>陕西</div>
          <div>山西</div>
          <div>河北</div>
          <div>河南</div>
      </div>
  </div>
  ```

  ```javascript
  $("#c1").parent()            // 父亲
  $("#c1").parent().parent()   // 父亲、父亲
  
  $("#c1").children()                // 所有的儿子
  $("#c1").children(".p10")          // 所有的儿子中寻找class=p10
  
  $("#c1").find(".p10")              // 去所有子孙中寻找class=p10
  $("#c1").find("div")              // 去所有子孙中寻找div标签
  ```

案例：菜单的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .menus{
        width: 200px;
        height: 800px;
        border: 1px solid red;
      }
      .menus .header{
        background-color: #f2ff5e;
        padding: 10px 5px;
        cursor: pointer; /*效果是当鼠标放上去的时候变成一个小手*/
      }
      .menus .item a{
        display: block;
        padding: 5px 5px;
        border-bottom: 1px dotted #dddddd;
      }
      .hide{
        display: none;
      }
    </style>
</head>
<body>
  <div class="menus">
    <div class="item">
      <div class="header" onclick="clickMe(this);">  <!--this的意思是把当前的标签当做参数传递进去-->
        上海
      </div>
      <div class="content hide">
        <a>宝山区</a>
        <a>青浦区</a>
        <a>浦东区</a>
        <a>内乡区</a>
      </div>
    </div>
    <div class="item">
      <div class="header" onclick="clickMe(this);">
        河南
      </div>
      <div class="content hide">
        <a>南阳</a>
        <a>信仰</a>
        <a>新乡</a>
        <a>焦作</a>
      </div>
    </div>
  </div>
  <script src="static/jquery-3.7.0.min.js"></script>
  <script type="text/javascript">
    function clickMe(self){
      //$(self)表示的是点击的标签，.next()表示兄弟标签，.hasClass()用于判断是否有相应的类
      var hasHide = $(self).next().hasClass("hide")
      if(hasHide){
        $(self).next().removeClass("hide");//remove表示删除相应的样式
      }else{
        $(self).next().addClass("hide")  //添加相应的样式
      }
    }
  </script>
</body>
</html>

操作样式：

addClass

removeClass

hasClass

值的操作：

### 4.5 值的操作

```html
<div id='c1'>内容</div>
```

```javascript
$("#c1").text()        // 获取文本内容
$("#c1").text("休息")   // 设置文本内容
```



```html
<input type='text' id='c2' />
```

```javascript
$("#c2").val()            // 获取用户输入的值
$("#c2").val("哈哈哈")     // 设置值

案例：动态获取值

<body>
  <input type="text" id="txtUser" placeholder="用户名">
  <input type="text" id="passWord" placeholder="密码">
  <input type="button" value="提交" onclick="getInfo()">
  <ul id="view">
    <li>第一个</li>
  </ul>
  <script src="static/jquery-3.7.0.min.js"></script>
  <script>
    function getInfo(){
      var name = $("#txtUser").val() //获取值
      var word = $("#passWord").val()
      var textString = name+"-"+word
      var newLi = $("<li>").text(textString)//新创建一个li标签
      $("#view").append(newLi)  //获取已有标签，并往里面添加内容
    }
  </script>
</body>

jquey里的绑定事件：

<body>
  <ul>
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
  </ul>
  <script src="static/jquery-3.7.0.min.js"></script>
  <script>
    $(function (){
      //外部这个函数表示，当页面的框架执行完成后便可以执行下面的代码，不用等待全部内容执行结束
      $("li").click(function(){  //此行内容表示<li>标签绑定相应的事件
        $(this).remove();//$(this)表示当前点击的标签，remove表示删除相应的标签
      })
    })
  </script>
</body>

案例：表格操作

<body>
  <table border="1">
    <thead>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>options</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>chen</td>
        <td>
          <input type="button" value="删除">
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>chen</td>
        <td>
          <input type="button" value="删除">
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>chen</td>
        <td>
          <input type="button" value="删除">
        </td>
      </tr>
      <tr>
        <td>4</td>
        <td>chen</td>
        <td>
          <input type="button" value="删除">
        </td>
      </tr>
    </tbody>
  </table>
  <script src="static/jquery-3.7.0.min.js"></script>
  <script>
    $(function (){
      $("tr").click(function (){
        $(this).remove()
      })
    })
  </script>
</body>

前端整合：

html，css，javascript，jquery，bootstrap（动态效果依赖jQuery）