jQuery基础2-css的操作-事件-属性-Ajax-DOM操作

垦利不

已于 2024-09-06 15:12:24 修改

阅读量1.1k

点赞数 12

文章标签： jquery css 前端

于 2024-09-06 00:29:18 首次发布

本文链接：https://blog.csdn.net/m0_64450406/article/details/141925876

版权

$.ajax()：执行异步 HTTP（Ajax）请求。

$.get()：通过 GET 请求从服务器加载数据。

$.post()：通过 POST 请求向服务器发送数据。

$.getJSON()：通过 GET 请求加载 JSON 格式的数据。

5.6jQuery键盘事件、鼠标事件、表单事件等

1.css的操作

1. `.css()`

.css() 方法用于获取或设置匹配元素的样式属性。当只传递一个参数（属性名）时，它会返回该属性的值。当传递两个参数（属性名和值）时，它会为匹配的元素设置该属性的值。

获取样式属性值：


	var color = $("#myDiv").css("color"); 

	console.log(color); // 输出 "#ff0000" 或其他颜色值

设置样式属性值：

$("#myDiv").css("color", "blue");

2. `.addClass()`

.addClass() 方法向匹配的元素集合中的每个元素添加一个或多个类名。如果指定的类名已经存在，则不会重复添加。

添加一个类名：

$("#myDiv").addClass("highlight");

添加多个类名（通过空格分隔）：

$("#myDiv").addClass("highlight bold");

3. `.removeClass()`

.removeClass() 方法从匹配的元素集合中的每个元素中删除一个或多个类名。如果省略参数，则删除所有类名。

删除一个类名：

$("#myDiv").removeClass("highlight");

删除多个类名（通过空格分隔）：

$("#myDiv").removeClass("highlight bold");

删除所有类名：

$("#myDiv").removeClass();

4. `.toggleClass()`

.toggleClass() 方法切换匹配元素集合中每个元素的一个或多个类名的状态。如果类名存在，则删除它；如果不存在，则添加它。

切换一个类名：

$("#myDiv").toggleClass("active");

切换多个类名（通过空格分隔）：

$("#myDiv").toggleClass("active hidden");

2.事件

事件绑定和解绑

1. . on()

.on() 方法用于在选择元素上绑定一个或多个事件的事件处理函数。这是jQuery中最灵活的事件绑定方法，因为它允许你使用事件委托来绑定事件到尚未存在于DOM中的元素。

基本用法：

    // 绑定事件
    $("#btn1").click(function(){
        $(".box").on("click", function(){
            $(this).css("background-color", "green");
        });
    });

事件委托：

    // 事件委托
    $(".box").on("click", "p", function(){
        $(this).css("background-color", "red");
    });

在这个例子中，即使.childElement在绑定事件后添加到DOM中，点击它也会触发事件处理函数。

2. .off()

.off() 方法用于移除通过 .on() 方法绑定的事件处理函数。如果你想要取消之前绑定的事件，这个方法就非常有用。

移除特定事件处理函数：


    // 解绑事件
    $("#btn2").click(function(){
        $(".box").off("click");
    });

移除特定事件处理函数（如果有命名）：

  $("#btn3").click(function(){
    $(".box p").off("click", toggle);
  });

3. .click()

.click() 方法是 .on("click", handler) 的简写形式，用于为匹配的元素集合中的每个元素绑定点击事件。

用法：

$("#myButton").click(function() {  
    alert("按钮被点击了！");  
});

4. .hover()

.hover() 方法用于为匹配的元素集合中的每个元素绑定鼠标进入（mouseenter）和离开（mouseleave）事件。这个方法接受两个函数作为参数：第一个函数在鼠标进入元素时触发，第二个函数在鼠标离开元素时触发。

用法：

    //鼠标事件
    $(".hov").hover(function(){
        $(this).css("background-color", "pink");
    });
    $(".hov").mouseleave(function(){
        $(this).css("background-color", "rgb(208, 200, 247)");
    });

5. .trigger()

.trigger() 方法用于触发被选元素的指定事件类型。这可以用来模拟用户操作，如点击或按键事件。

用法：

$("#myButton").trigger("click");

3. Ajax

$.ajax()：执行异步 HTTP（Ajax）请求。

是jQuery中最底层、功能最强大的处理Ajax的方法。它允许你设置各种Ajax选项，如请求类型（GET或POST）、请求URL、请求成功和失败的处理函数

$.ajax({  
    url: "test.html", // 请求的URL  
    type: "GET",      // 请求方式  
    data:{
           username：'xiu',
           password:'123'
          },
    dataType: "html", // 预期服务器返回的数据类型  
    success: function(data) {  
        // 请求成功时执行的回调函数  
        $("#result").html(data);  
    },  
    error: function(xhr, status, error) {  
        // 请求失败时执行的回调函数  
        alert("请求失败: " + error);  
    }  
});

$.get()：通过 GET 请求从服务器加载数据。

$.get() 方法通过GET请求从服务器请求数据。这是 $.ajax() 方法的一个简化版，用于GET请求

$.get("test.html", {username：'xiu',password:'123'},function(data) {  
    $("#result").html(data);  
});

$.post()：通过 POST 请求向服务器发送数据。

$.post() 方法通过POST请求向服务器发送数据。这同样是 $.ajax() 方法的一个简化版，用于POST请求

$.post("test.php", { name: "John", time: "2pm" } ,  
   function(data) {  
     $("#result").html(data);  
   }  
);

$.getJSON()：通过 GET 请求加载 JSON 格式的数据。

$.getJSON() 方法通过GET请求加载JSON格式的数据。这个方法也是 $.ajax() 方法的一个简化版，但它自动将返回的JSON字符串解析成JavaScript对象。

$.getJSON("test.json", function(json) {  
    $("#result").html("Name: " + json.name + ", Time: " + json.time);  
});

4.jQuery属性

1. .attr()

方法描述（Attributes）：专门操作属性值为非布尔元素的属性（ id、class、href、src ），该方法读写一体操作涉及获取和设置 HTML 元素的属性。

以下示例均已如下HTML代码为例

   <a href="http://www.baidu.com" target="_blank" title="百度一下，你就知道"></a>

获取属性

要获取元素的属性值，你可以使用 .attr() 方法。该方法接受一个属性名作为参数，并返回第一个匹配元素的属性值。

  //获取属性
        var href = $("a").attr("href");

设置属性

设置属性也使用 .attr() 方法，但此时需要传递两个参数：属性名和属性值。这会将所有匹配元素的指定属性设置为指定的值。

$('a').attr('href', 'https://example.com'); // 将所有<a>元素的href属性设置为https://example.com

移除属性

要移除元素的属性，.removeAttr() 方法可以用来完成这一任务。只需传递要移除的属性名作为参数即可。

        //移除属性
        $("a").removeAttr("target"); //移除target属性
        console.log($("a").attr("target")); //undefined

使用函数

.attr() 方法还允许你传递一个函数作为参数，这个函数将根据每个匹配的元素动态地返回属性值。这对于根据元素的当前状态或其他条件动态设置属性非常有用。

        $('a').attr('title', function(index, currentTitle) {  
console.log('Link ' + (index + 1) + ' (' + currentTitle + ')')
});

2. .prop()

方法描述：专门操作属性值为布尔值的属性（如 checked、selected、disabled），该方法读写一体。

下列代码均已以下HTML为例

  <label for="checkbox1">西瓜</label>
    <input type="checkbox" id="checkbox1">
    <label for="checkbox2">菠萝</label>
    <input type="checkbox" id="checkbox2"  checked>
    <label for="checkbox3">苹果</label>
    <input type="checkbox" id="checkbox3">

获取属性值：当 prop() 方法不带第二个参数时，它会返回第一个匹配元素的指定属性的值。

var checkbox3=$("#checkbox3").prop('checked');
console.log(checkbox3); // 获取 id 为 myCheckbox3 的 checkbox 是否被选中

设置属性值：当 prop() 方法带有第二个参数时，它会设置所有匹配元素的指定属性的值。

$("#checkbox1").prop('checked', true); //选中checkbox1
$("#checkbox2").prop('checked', false); //取消选中checkbox2

3. .val()

方法描述：val() 方法主要用于处理表单元素（如 input, select, textarea 等）的值。它既可以用来获取元素的值，也可以用来设置元素的值。

代码示例HTML（回顾一下表单元素）

<label for="myIput1">姓名</label><input type="text" value="Lisa" name="ll"" id="myIput1"><br>
    <label for="myIput2">年龄</label><input type="number" name="" id="myIput2"><br>
    <label for="myIput3">邮箱</label><input type="email" name="" id="myIput3"><br>
    <label for="myIput4">手机号</label><input type="tel" name="" id="myIput4"><br>
    <label for="myIput5">密码</label><input type="password" name="" id="myIput5"><br>
    <label for="myIput6">性别</label>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">男</label>
    <input type="radio" name="gender" id="female" value="female">
    <label for="female">女</label><br>
    <label for="myIput7">爱好</label>
    <select name="" id="myIput7">
        <option value="reading">阅读</option>
        <option value="swimming">游泳</option>
        <option value="running">跑步</option>
    </select><br>
    <label for="myIput8">描述</label><br>
    <textarea name="" id="myIput8" cols="30" rows="10"></textarea><br>
    <button>提交</button>

获取值：当 val() 方法不带任何参数时，它会返回第一个匹配元素的值。如果选择了多个元素，它只会返回第一个元素的值。

console.log($("#myInput1").val());

var inputValue = $('#myInput').val(); // 获取 id 为 myInput 的 input 元素的值
设置值：当 val() 方法带有一个参数时，它会设置所有匹配元素的值。

$('#myInput3').val('123456@qq.com'); //设置myInput3的值为123456@qq.com
$('#myInput4').val('13512345678'); //设置myInput4的值为13512345678

5.jQuery之DOM内部操作

5.1DOM元素的插入

1. `appendTo()`

描述：
appendTo() 方法将匹配的元素集合中的每个元素追加到由目标选择器指定的元素集合中的每个元素的内部末尾。简单来说，就是把某个元素（或元素集合）放到另一个元素（或元素集合）的里面，并且放在该元素内部的最末尾。

示例：

$("<li>新列表项</li>").appendTo("ul");

这会将新的 <li> 元素添加到每个 <ul> 元素的末尾。

2. `prependTo()`

描述：
与 appendTo() 相反，prependTo() 方法将匹配的元素集合中的每个元素前置到由目标选择器指定的元素集合中的每个元素的内部开头。这意味着新元素会被添加到目标元素内部的最前面。

示例（注意，应使用不同的文本以避免混淆）：

$("<li>前置列表项</li>").prependTo("ul");

这会将新的 <li> 元素添加到每个 <ul> 元素的最前面。

3. `insertBefore()`

描述：
insertBefore() 方法将匹配的元素集合中的每个元素插入到由目标选择器指定的元素集合中的每个元素之前。这意味着新元素会被添加到目标元素外部，并且位于目标元素之前。

示例：

$("<li>插入前列表项</li>").insertBefore("li:eq(2)");

这会在每个索引为 2 的 <li> 元素之前插入一个新的 <li> 元素。

4. `insertAfter()`

描述：
与 insertBefore() 相反，insertAfter() 方法将匹配的元素集合中的每个元素插入到由目标选择器指定的元素集合中的每个元素之后。这意味着新元素会被添加到目标元素外部，并且位于目标元素之后。

示例：

$("<li>插入后列表项</li>").insertAfter("li:eq(2)");

这会在每个索引为 2 的 <li> 元素之后插入一个新的 <li> 元素。

5. `prepend()`

描述：
prepend() 方法将指定的内容作为子元素前置到匹配的元素集合中的每个元素的内部开头。这与 prependTo() 的行为相似，但方向相反；你是在告诉 jQuery 把内容放到哪个元素的前面，而不是把哪个元素放到哪个内容的前面。

示例：

$(".p1").prepend("<p>前置文本</p>");

这会在每个类名为 p1 的  元素内部的最前面添加一个新的  元素。

6. `after()`

描述：
after() 方法在匹配的元素集合中的每个元素之后插入指定的内容。这些新内容作为同级元素被添加到每个目标元素的后面。

示例：

$(".p1").after("<p>后置文本</p>");

这会在每个类名为 p1 的  元素之后添加一个新的  元素。

7. `before()`

描述：
before() 方法在匹配的元素集合中的每个元素之前插入指定的内容。这些新内容作为同级元素被添加到每个目标元素的前面。

示例：

$(".p1").before("<p>前置文本</p>");

这会在每个类名为 p1 的  元素之前添加一个新的  元素。

总结

appendTo() 、 prependTo() 、append（）、prepend（）是相对于目标元素内部的添加

语法：$("<li>新列表项</li>").appendTo("ul") //向ul里面添加li

appendTo() 、 prependTo()添加到元素内部最后和最前

insertBefore() 、 insertAfter() 、after（）、before（）是相对于目标元素外部的添加（和元素关系是兄弟节点），且相对于目标元素的位置有明确的前后之分。

5.2 DOM元素的移除

5.2.1 remove()

移除具有特定ID的元素
移除具有特定类的所有元素

<body>
<div id="myElement">这是要移除的ID元素</div>  
<div class="myclass">这是要移除的class元素</div>
<div class="myclass">这是要移除的class元素<</div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
  $("#myElement").remove();  
  $(".myclass").remove();  // 也可以用 class 选择器来删除元素
});  
</script>
</body>

移除子元素使用.children().remove()移除所有子元素

<body>
<ul id="parent">
    <li>我是要移除的子元素</li>
    <li>我是要移除的子元素</li>
    <li>我是要移除的子元素</li>
</ul>
<button class="btn2">点击清空</button>
  

<script>  
$(".btn2").click(function(){
  $("#parent").children().remove(); 
})
});  
</script>
</body>

5.2.2empty()

移除子元素：使用.empty()移除所有子元素

<body>
<ul id="parent">
    <li>我是要移除的子元素</li>
    <li>我是要移除的子元素</li>
    <li>我是要移除的子元素</li>
</ul>
<button class="btn2">点击清空</button>
  

<script>  
$(".btn2").click(function(){
//   $("#parent").children().remove(); 
  $("#parent").empty(); })
});  
</script>
</body>

5.3替换DOM元素

.replaceWith()方法来替换选定的元素。这个方法接受一个内容参数，这个参数可以是HTML字符串、DOM元素、jQuery对象，或者是这些的集合，然后它会用这些内容替换掉所有匹配的元素。

<body>
    <div id="container">
        <p id="oldParagraph">这是一段旧的文本。</p>
    </div>
    <button id="replaceButton1">点击替换单个文本</button>
    <ul id="list">
        <li>我是多个替换用map + join<</li>
        <li>我是多个替换用map + join<</li>
        <li>我是多个替换用map + join</li>
    </ul>
    <button id="replaceButton2">点击替换each方法</button>
    <button id="replaceButton3">点击替换map+join方法</button>

    <!-- jQuery 代码来实现 DOM 的替换 -->
    <script>
        $(document).ready(function () {
            $("#replaceButton1").click(function () {
                var newParagraph = $('<p>这是一段新的文本。</p>');
                // 替换元素  
                $('#oldParagraph').replaceWith(newParagraph);
            });

            $("#replaceButton2").click(function () {
                // 方法1: 使用each遍历并替换  
                $("#list li").each(function () {
                    $(this).replaceWith('<p>这是一段新的文本1。</p>');
                });

  $("#replaceButton3").click(function () {  
            // 类似replaceAll的方法：构建新的HTML字符串  
            var newListHtml = $('#list').children().map(function() {  
                return '<p>这是一段新的文本2。</p>';  
            }).get().join('');  
            $('#list').html(newListHtml); // 设置新的HTML内容  
        });
            });
        });  
    </script>
</body>

5.4拷贝DOM元素

.clone()方法来拷贝一个或多个DOM元素。这个方法会返回被拷贝元素的副本，但它不会自动将副本添加到文档中；你需要使用如.appendTo(), .prependTo(), .insertAfter(), .insertBefore()等方法来手动添加副本到文档中。

<body>
    <div id="container">
        <p id="original">原始元素</p>
    </div>

<script>
        // 假设原始元素已经绑定了事件  
var originalElement = $('#original');  
  
// 绑定事件  
originalElement.on('click', function() {  
    alert('原始元素被点击了！');  
});  
  
// 复制元素  
var clonedElement = originalElement.clone(true); // 注意：这里的true参数会尝试复制事件和数据  
clonedElement.on('click', function() {  
    alert('复制的元素被点击了！');  
});  
  
// 将复制的元素添加到DOM中  
$('#container').append(clonedElement);
</script>
</body>

5.5DOM遍历

each方法

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
    <script>
        // 找到ul元素
        var $ul = $('ul');
        // 遍历ul下的所有li元素
        $ul.children().each(function(index, element){
            // 输出li的索引和内容
            console.log(index + ':' + $(element).text());
        });
    </script>
</body>

5.6jQuery键盘事件、鼠标事件、表单事件等

和JS只是语法不同参考博文

示例

$(document).keydown(function(event) {  
    if (event.keyCode === 13) { // Enter键的keyCode是13  
        alert('你按下了Enter键！');  
    }  
});

https://blog.csdn.net/m0_64450406/article/details/141474903?spm=1001.2014.3001.5501

6.jQuery动画

6.1显示与隐藏

show()和hide（）用来显示和隐藏元素

toggle（）用来切换显示和隐藏的状态

6.2淡入淡出

fadeIn()和FadeOut()通过淡入和淡出的方法显示和隐藏元素

fadeToggle()切换淡入显示淡出隐藏的状态

6.3滑动

slideDown（）和slideUp用滑动动画来显示和隐藏元素

slideToggle（）切换滑动显示和隐藏的状态

6.4自定义

animate（）：根据一组css属性，执行自定义动画

代码示例：

<body>
    <style>  
        .box{  
            display: none;  
            width: 300px;  
            height: 300px;  
            background-color: rgb(118, 174, 111);  
            position: absolute;  
            left: 50%;  
            top: 50%;  
            transform: translate(-50%, -50%);  
        }  
    </style>  
    <div class="box"> </div>  
    <button class="btn1">显示</button>  
    <button class="btn2">隐藏</button>
    <button class="btn3">切换</button>
    <button class="btn4">淡入</button>  
    <button class="btn5">渐出</button>
    <button class="btn6">淡入淡出切换</button>
    <button class="btn7">div滑动显示</button>
    <button class="btn8">div滑动隐藏</button>
    <button class="btn9">div滑动切换</button>
    <button class="btn10">自定义动化</button>
    <button class="btn11">停止动画</button>
    <script>  
        $(document).ready(function(){  
            // 显示元素
            $(".btn1").click(function(){  
                $(".box").show();  
            }); 
            // 隐藏元素
            $(".btn2").click(function(){  
                $(".box").hide();  
            });
            // 切换元素是否可见  show()和hide()是隐藏元素，toggle()是切换元素是否可见
            $(".btn3").click(function(){  
                $(".box").toggle("");   
            });
            // 淡入元素
            $(".btn4").click(function(){  
                $(".box").fadeIn(5000);  
            });  
            //淡出元素
            $(".btn5").click(function(){  
                $(".box").fadeOut(5000);  
            });
            // 淡入淡出切换元素是否可见
            // fadeIn()和fadeOut()是淡入淡出元素，fadeToggle()是切换元素是否可见
            $(".btn6").click(function(){  
                $(".box").fadeToggle(5000);  
            });
            // div滑动显示
            $(".btn7").click(function(){  
                $(".box").slideDown(5000);   
            });
            // div滑动隐藏
            $(".btn8").click(function(){  
                $(".box").slideUp(5000);   
            });
            // div滑动切换元素是否可见
            $(".btn9").click(function(){  
                $(".box").slideToggle(5000);   
            });
            // 自定义动化
            $(".btn10").click(function(){
                $(".box").animate({
                    opacity: 0.5,
                    width: "800px",
                    height: "200px",
                    left: "300px",
                    top: "300px"
                }, 5000);
              });
              // 停止动画
              $(".btn11").click(function(){
                $(".box").stop(true);  // 立即停止动画并跳转到结束状态
             
              });

        });  
    </script>  
</body>