jQuery基础

最新推荐文章于 2024-10-02 05:39:15 发布

小梁今天敲代码了吗

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量293

点赞数

分类专栏： Python Web开发文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_43780415/article/details/130278205

版权

Python Web开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

该文介绍了jQuery中的核心概念，包括ID、类、标签选择器以及层级选择器的使用，还涉及DOM操作如父级、子级、相邻元素的选择与操作，如`next()`、`prev()`、`children()`等方法。此外，文中也提到了内容的隐藏与显示，如切换`hide`类，以及事件处理，如按钮点击事件和动态创建数组。最后展示了删除元素的示例，包括删除特定标签和表格行。

摘要由CSDN通过智能技术生成

寻找标签(直接寻找）

//ID选择器
<h1 id="txt">中国</h1>
<h1>中国</h1>
<h1>中国</h1>


$("#txt")

//样式选择器
<h1 class="c1">中国</h1>
<h1 class="c2">中国</h1>
<h1 class="c3">中国</h1>

$(".c1 ")

//标签选择器
<h1 class="c1">中国</h1>
<h2 class="c2">中国</h2>
<h3 class="c3">中国</h3>

$("h1")

//层级选择器
<h1 class="c1">
    <div class="c2">
        <span></span>
        <a></a>
    </div>    
    
</h1>

$(".c1 .c2 a")
//多选择器
$("span,a")
//属性选择器
<input type="text" name="n1">
<input type="text" name="n2">
<input type="text" name="n3">

$("input[name="n2"]")

间接寻找

<div>
    <div>北京</div>
    <div id ="c1">上海</div>
    <div>深圳</div>
    <div>广州</div>
</div>



$("#c1").prev()//北京
$("#c1")//上海
$("#c1").next()//深圳
$("#c1").next().next()//广州
$("#c1").siblings()//所有的兄弟

<div>
    <div>
        <div>北京</div>
        <div id ="c1">上海
            <div>宝山区</div>
            <div class="c5">浦东新区</div>
        </div>
        <div>深圳</div>
        <div>广州</div>
    </div>
    <div>
        <div>陕西</div>
        <div>山西</div>
        <div>河南</div>
        <div>青海</div>
    </div>
</div>

$("#c1").parent()//父亲
$("#c1").parent().parent()//父亲的父亲
$("#c1").children()//所有的孩子
$("#c1").children(".c5")//所有孩子中class为c5的
$("#c1").find(".c5")//去所有子孙中寻找class="c5"
$("#c1").find("div")//去所有子孙中寻找带div的标签

案例：菜单的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .menus{
        height:800px;
        width:200px;
        border:1px solid red;
        }
      .menus .header{
        background-color:gold;
        padding:18px 5px;
        cursor:pointer;
        }
      .menus .content 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)">上海</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 class="item">
      <div class="header" onclick="clickMe(this)">北京1</div>
      <div class="content hide">
        <a>海淀区</a>
        <a>朝阳区</a>
        <a>大兴区</a>
        <a>昌平区</a>
      </div>
    </div>
    <div class="item">
      <div class="header" onclick="clickMe(this)">北京2</div>
      <div class="content hide">
        <a>海淀区</a>
        <a>朝阳区</a>
        <a>大兴区</a>
        <a>昌平区</a>
      </div>
    </div>
    </div>
  </div>
  <script src="static/jquery.js"></script>
  <script>

    function clickMe(self){
      //$(self) ->表示当前点击的那个标签
      //$(self).removeClass("hide");删除样式
      var hasHide = $(self).next().hasClass("hide");
      if(hasHide){
        $(self).next().removeClass("hide");
      }else{
        $(self).next().addClass("hide")
      }
    }
    

  </script>
</body>
</html>

实现功能：点击市名出现区名，再点击一次市名，区名收回

将function clickMe（self）代码更改：

    function clickMe(self){
        $(self).next().removeClass("hide");
        $(self).parent().siblings().find(".content").addClass("hide");
      }

实现功能：点击一个市时，其他展开的市收回

值的操作

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

$("#c1").text()//获取文本内容
$("#c1").text("修改")//设置文本内容

<input type="text" id="c2">

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

案例：动态创建数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <input type="text" id="txtUser" placeholder="用户名">
  <input type="text" id="txtEmail" placeholder="邮箱">
  <input type="button" value="提交" onclick="getInfo()">
  <ul id="view">
    <li></li>
  </ul>
  <script src="static/jquery.js"></script>
<script>
  function getInfo(){
  //1.获取用户输入的用户名和密码
  var username = $("#txtUser").val();
  var email = $("#txtEmail").val();
  var dataString = username + "-" + email;
  //2.创建li标签，在li的内部写u内容
  var newLi = $("<li>").text(dataString);
  //3.把新创建的li标签添加到ul里面
  $("#view").append(newLi);
  }
</script>
</body>
</html>

事件

<input type="button" value="提交" onclick="getInfo()">
<script>
    function getInfo(){

    }
</script>

案例：绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
  <li>百度</li>
  <li>谷歌</li>
  <li>火狐</li>
</ul>
<script src="static/jquery.js"></script>
<script>
  $("li").click(function(){
    var text = $(this).text();
    console.log(text);
    })
/*
点击谁就删除谁
  $("li").click(function(){
    $(this).remove();
    })

*/
</script>
</body>
</html>

在jQuery中可以删除某个标签

<div id="c1">内容</div>

$("#c1").remove();

当页面框架加载完成之后。自动就执行

$(function(){

  })

案例：删除表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>李明</td>
        <td>
          <input type="button" value="删除" class="delete">
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>雷雷</td>
        <td>
          <input type="button" value="删除" class="delete">
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>玛丽</td>
        <td>
          <input type="button" value="删除" class="delete">
        </td>
      </tr>
    </tbody>
  </table>
<script src="static/jquery.js"></script>
<script>
  $(function(){
    //找到所有class=delete的标签，绑定事件
    $(".delete").click(function(){
      //删除当前行数据
      $(this).parent().parent().remove()
      });
    })
</script>
</body>
</html>

点击对应行的“删除”之后，将对应行删除