JQuery知识总结（二）

最新推荐文章于 2024-11-12 11:19:19 发布

Solitude.5254

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量1k

点赞数

分类专栏： JavaScript 前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_52215821/article/details/121317089

版权

JavaScript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

"本文详细介绍了JQuery中的属性操作，包括html()、text()、val()、attr()和prop()的使用，并提供了实践示例。此外，还讲解了DOM的增删改操作，展示了如何通过JQuery动态改变DOM结构。最后，讨论了JQuery事件操作，如click()、mouseover()、mouseout()以及事件冒泡的概念，并对比了$(function(){}

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

JQuery知识（二）

文章目录

JQuery知识（二）

jQuery的属性操作

在这里插入图片描述

html()它可以设置和获取起始标签和结束标签中的内容。
跟dom属性innerHTML一样。
text()它可以设置和获取起始标签和结束标签中的文本。
跟dom属性innerText一样。
val()它可以设置和获取表单项的value属性值。跟dom属性value一样

在这里插入图片描述

attr()可以设置和获取属性的值,不推荐操作checked、readOnly、selected、disabled
prop()可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled

练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<script src="../../../../jquery-1.7.1.js"></script>
<script type="text/javascript">
    $(function (){
    //给全选绑定单击事件
    $("#checkedAllBtn").click(function (){
        $(":checkbox").prop("checked",true);
    });
    $("#checkedNoBtn").click(function (){
        $(":checkbox").prop("checked",false);
    });
    $("#checkedRevBtn").click(function (){
        $(":checkbox[name='items']").each(function (){
            this.checked=!this.checked;
        })
        var ballCount= $(":checkbox[name='items']").length;
        var checkedCount=$(":checkbox[name='items']:checked").length;
            $("#checkedAllBox").prop("checked",ballCount==checkedCount);
    });
    $("#SendBtn").click(function (){
       $(":checkbox[name='items']:checked").each(function (){
           alert(this.value)
       });
    });
    
    $("#checkedAllBox").click(function (){
    $(":checkbox[name='items']").prop("checked",this.checked);
    });
    
    $(":checkbox[name='items']").click(function (){
        var ballCount= $(":checkbox[name='items']").length;
        var checkedCount=$(":checkbox[name='items']:checked").length;
        $("#checkedAllBox").prop("checked",ballCount==checkedCount);
    });
    });

</script>
<form method="post">
    你爱好的运动是：<input type="checkbox" id="checkedAllBox"/>全选/全不选
    <br>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="蓝球"/>篮球
    <input type="checkbox" name="items" value="排球"/>排球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <br>
    <input type="button" id="checkedAllBtn" value="全选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反选"/>
    <input type="button" id="SendBtn" value="提交"/>

</form>
</body>
</html>

DOM的增删改

在这里插入图片描述
示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        select{
            width:100px;
            height: 140px;
        }
        div{
            width:130px;
            float: left;
            text-align: center;
            /*clear: both;
                清除浮动效果;
            */
        }
    </style>
</head>
<body>
<script type="text/javascript" src="..\..\..\..\jquery-1.7.1.js"></script>
<script type="text/javascript">
    $(function (){
       $("button:eq(0)").click(function (){
          $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
       })
        $("button:eq(1)").click(function (){
            $("select[name='sel01'] option").appendTo($("select:eq(1)"));
        });
        $("button:eq(2)").click(function (){
            $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
        });
        $("button:eq(3)").click(function (){
            $("select:eq(1) option").appendTo($("select:eq(0)"));
        });
    });
</script>
<div id="left">
    <select multiple="multiple" name="sel01">
    <option value="opt01">选项1</option>
    <option value="opt02">选项2</option>
    <option value="opt03">选项3</option>
    <option value="opt04">选项4</option>
    <option value="opt05">选项5</option>
    <option value="opt06">选项6</option>
    <option value="opt07">选项7</option>
    <option value="opt08">选项8</option>
    </select>
    <button>选中添加到右边</button>
    <button>全部添加到右边</button>
</div>
<div id="right">
<select multiple="multiple" name="sel02">

</select>
    <button>选中添加到左边</button>
    <button>全部添加到左边</button>
</div>
</body>
</html>

在这里插入图片描述

jQuery事件操作

$(function(){})和window.οnlοad=function(){}的区别?
他们分别是在什么时候触发

1、jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好
DOM对象之后就会马上执行。
2、原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好
DOM对象，还要等标签显示时需要的内容加载完成。

他们触发的顺序？

1、jQuery页面加载完成之后先执行
2、原生js的页面加载完成之后

他们执行的次数？

1、原生js的页面加载完成之后，只会执行最后一次的赋值函数。
2、jQuery的页面加载完成之后是全部把注册的function函数，
依次顺序全部执行。

jQuery中其他的事件处理方法

click()

它可以绑定单击事件，以及触发单击事件

mouseover()

 鼠标移入事件

mouseout()

 鼠标移出事件

bind()

     可以给元素一次性绑定一个或多个事件。

one()使用上跟bind一样。

 但是one方法绑定的事件只会响应一次。

unbind()跟bind方法相反的操作

 解除事件的绑定

live()也是用来绑定事件。

它可以用来绑定选择器匹配的所有元素的事件。
哪怕这个元素是后面动态创建出

事件的冒泡

什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢？
在子元素事件函数体内，returnfalse;可以阻止事件的冒泡传递

使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件

$("#areaDiv").bind("mouseovermouseout",function(event)
{if(event.type=="mouseover")
{
console.log("鼠标移入");
}
elseif(event.type=="mouseout"){
console.log("鼠标移出");
}
});