jQuery

最新推荐文章于 2024-08-15 18:19:19 发布

南栀北夏ii

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量824

点赞数 24

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_74421072/article/details/134949479

版权

本文详细介绍了如何在jQuery中使用DOM操作，包括选择器（如id、类、标签等）、层级选择、筛选元素、操作元素内容、样式、属性以及数据管理。还涵盖了遍历元素和创建/添加元素的基本方法。

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

如果一定要将 jQuery 代码写在 DOM 元素的前面，则可以使用如下语法来实现。

// 语法 1( 简写形式 )

$(function(){

/ 页面 DM 加载后执行的代码

});

或

// 语法 2( 完整形式 )

$(document).ready(function(){

// 页面 DM 加载后执行的代码

});

一.jQuery 选择器

1．基本选择器

id 选择器：$("#id") ，获取指定 id 的元素

全选选择器：$("*") ，匹配所有元素

类选择器：$(".class") ，Index 页面的结构文件获取同一类 class 的元素

标签选择器：$("div") ，获取相同标签名的所有元素

并集选择器：$("div,p,li") ，选取多个元素

交集选择器：$("li.current") ，交集元素

2．层级选择器

子代选择器：$("ul > li") ，$("ul > li")子代选择器获取子级元素

后代选择器：$("ul li") ，$("ul li")后代选择器获取后代元素

3．筛选选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.5.1.min.js"></script>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>樱桃</li>
    </ul>
<div>
        <li>红色</li>
        <li>黄色</li>
        <li>紫色</li>
        <li>红色</li>
</div>
<script>
    $('ul li:first').css('color','red');  //为匹配的元素设置文本的颜色
    $('ul li:last').css('color','blue');
    $('ul li:eq(2)').css('color','pink')
    $('div li:even').css('background-color','yellow');
    $('div li:odd').css('background-color','green');

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

4.常用的筛选方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.5.1.min.js"></script>
</head>
<body>
    <h2 id='list1'>水果列表</h2>
    <ul class='fruit'>
        <li>苹果</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>樱桃</li>
    </ul>
    <div>
        <h2 id='list2'>城市列表</h2>
        <p>常州</p>
        <p>南京</p>
        <p>无锡</p>
        <p>苏州</p>
    </div>
    <h1 id='list3'>动物乐园</h1>
    <ol>
        <li>猴子</li>
        <li>兔子</li>
        <li>大象</li>
        <li>斑马</li>
    </ol>
    <script>
        console.log($("#list2").parent())
        $("ul").children("li").css('color','blue')
        $('body').find('h2').css('color','red')
        $('div>p').eq(2).siblings('p').css('font-style','italic')
        $('ol li').eq(0).nextAll().css('color','pink')
        $('ol li').eq(3).prevAll().cass('color','red')
        console.log($('ul').hasClass('fruit'))
        
    </script>
   
</body>
</html>

5.筛选元素

6.属性选择器

7.子元素选择器

8.表单选择器

二.jQuery 操作 DOM

1.jQuery 操作元素内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素内容</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div>
        <span>我是span1的内容</span>
    </div>
    <div>
        <span>我是span2的内容</span>
    </div>
    <p>我是段落1的内容</p>
    <p>我是段落2的内容</p>
    <input type="text" value="我是默认文本">
    <input type="button" value="提交按扭">
    <script>
        //1.获取设置元素内容html()
        console.log($("div").html());
        $("div").html("<span>hello</span>");
        // 2. 获取设置元素文本内容 text()
        console.log($("p").text());
        $("p").text("我是新的段落内容");
        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $('input').val('我是新值');
    </script>
</body>
</html>

2 jQuery 操作元素样式

css()方法

css 方法设置单个样式

css 方法设置多个样式

类操作

添加类： $(selector).addClass(className)

移除类： $(selector).removeClass(className)

切换类： $(selector).toggleClass(className,switch)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <style>
        div{
              margin: 20px;
              width: 200px;
          }
          .red{
              background-color: red;
          }
          .border{
              border: 2px solid green;
          }   
      </style>
      <div>first div</div>
      <div>second div</div>
      <div>third div</div>
      <script>
        $("div").click(function() {
            $(this).toggleClass("red border");
        });
      </script>
</body>
</html>

.3 jQuer操作元素属性

prop()方法

prop() 方法用来设置或获取元素的固有属性值

prop() 方法获取属性值语法。

$(selector).prop("属性名 ")

prop() 方法设置属性值语法。

$(selector).prop("属性 ", " 属性值 ")

attr()方法

attr() 用来设置或获取元素的自定义属性，自定义属性是指用户给元素添加的非固有属

性

attr() 方法获取属性值语法。

$(selector).attr("属性名 ")

attr() 方法设置属性值语法。

$(selector).attr("属性 ", " 属性值 ")

data()方法

data() 方法用来在指定的元素上存取数据，数据保存在内存中，并不会修改 DOM 元素

结构；一旦页面刷新，之前存放的数据都将被移除

data() 方法获取属性值语法。

$(selector).data("数据名 ")

data() 方法设置属性值语法。

$(selector).data("数据名 ", " 数据值 ")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div>This is a DIV.</div>
    <script>
        $("div").data("uname", "Tom");
        $("div").data({ 
            "gender": "male", 
            "age": 18
        });
        console.log($("div").data("uname"));
        console.log($("div").data("gender"));
        console.log($("div").data("age"));
    </script>
</body>
</html>

4 jQuery 操作 DOM 节点

遍历元素

其基本语法如下。

$(selector).each(function(index, domEle) {

// 对每个元素进行操作的语句

});

each 方法遍历元素

$.each() 方法可用于遍历任何对象，主要用于数据处理，如数组、对象。 $.each() 方法的

使用和 each() 方法类似，具体语法如下。

$.each(arr, function(index,element){

// 对每个元素进行操作

})

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <script>
        // 遍历数组
        var arr = ["JavaScript", "MySQL", "HTML5"];
        $.each(arr, function(index, element) {
            console.log(index); //数组的索引
            console.log(element); //数组元素
        });
        // 遍历对象
        var stud = {
        name: "Tom", gender: "male", age: 20, };
        $.each(stud, function(index, element) {
            console.log(index); //对象中的每个成员名
            console.log(element); //对象中的每个成员的值
        });
    </script>
</body>
</html>