jquery基本操作

jQuery基础操作：选择器、样式与事件处理

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 692 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了jQuery的基本用法，包括从官方网站下载jQuery库，使用ID、类、标签等选择器定位元素，以及间接寻找元素的兄弟和父子关系。此外，还讲解了如何进行样式操作，如添加和移除类，以及获取和设置内容与值。事件绑定方面，展示了点击事件的处理方法，并给出了删除表格行和动态创建HTML元素的示例。

1、 jquery的下载

jquery 下载：https://jquery.com/

2、寻找标签（直接寻找）

ID选择器

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

$("#txt")

样式选择器

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

$(".c1")

标签选择器

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

$("h1")

层级选择器

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

$(".c1 .c2 a")

属性选择器

<input type= "text" nane="n1"/>
<input type="text" nane="n1" />
<input type= "text" name="n2" />

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

3、间接寻找

找兄弟

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

s ( "dc1").prev ()     //上一个
s ( "#c1")
$ ( "#c1").next()   //下一个
s ( "#cl").nex().next()    //下一个、下一个
s( "#c1").siblings()      //所有的兄弟

找父子

<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>

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

4、样式操作

addClass
removeClass
hasClass

5、值的操作

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

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

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

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

在jQuery中可以删除某个标签。

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

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

6、事件绑定

<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>
<script>
$("li" ).click(function(){
         //点击1i标签时，自动执行这个函数;
         //$(this)   当前你点击的是那个标签。
});
</script>

script中的另外一种写法, 当页面的框架加载完成之后，自动就执行

<script src="static/jquery-3.6. 0.min.js"></script>
<script>
$(function(){
    //当页面的框架加载完成之后，自动就执行。
    $("1i").click(function(){
        $(this).remove();
       });
}) ;
</script>

7、案例，删除表格

写一个表格，点击删除按钮，就删除一行数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
       <tr>
           <td>Id</td>
            <td>姓名</td>
            <td>操作</td>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
             <td>张顺</td>
             <td>
                 <input type="button"  value="删除" class="delete"/>
             </td>
        </tr>
          <tr>
            <td>2</td>
             <td>张顺2</td>
             <td>
                 <input type="button"  value="删除" class="delete"/>
             </td>
        </tr>
      <tr>
            <td>3</td>
             <td>张顺3</td>
             <td>
                 <input type="button"  value="删除" class="delete"/>
             </td>
        </tr>
    </tbody>
</table>
 <script src="static/plugins/jquery-3.7.0.min.js"></script>
<script>
    $(function(){
       $(".delete").click(function(){

           $(this).parent().parent().remove();
       });

    });
</script>
</body>
</html>

效果：
在这里插入图片描述

8、动态创建数据

使用jquery动态创建标签

<!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">

   </ul>
 <script src="static/plugins/jquery-3.7.0.min.js"></script>
<script>
    function getInfo(){
       //1、获取用户输入的用户名和密码
       var username = $("#txtUser").val();
       var email = $("#txtEmail").val();
       var dataString = username + "-" + email;

       //2、创建li标签，在li的内部写入内容。$("<li>")
       var newLi = $("<li>").text(dataString);

       //3、把所创建的li标签添加到ul里面。
       $("#view").append(newLi);

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