JavaWeb学习之jQuery学习(下)

最新推荐文章于 2021-12-06 16:00:07 发布

种棵马拉松

最新推荐文章于 2021-12-06 16:00:07 发布

阅读量119

点赞数

分类专栏： JavaWeb 文章标签： javascript

本文链接：https://blog.csdn.net/wod_maaya/article/details/108599861

版权

JavaWeb 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery学习（下）

jQuery的属性操作

html()：可以设置和获取起始标签和结束标签中的内容。跟DOM对象中的innerHTML属性是一样的
text()：可以设置和获取起始标签和结束标签中的文本。跟DOM对象中的innerText属性是一样的
val()：可以设置和获取表单项的value属性值。跟DOM对象中的value属性是一样的
attr()：可以设置和获取属性的值。不推荐操作checked、readOnly、selected、disable等。attr方法还可以操作非标准的属性。比如自定义属性等等
prop()可以设置和获取属性的值，只推荐操作checked、readOnly、selected、disabled等属性

DOM的增删改操作

内部插入
1. appendTo()：a.appendTo(b) 把a插入到b子元素末尾，成为最后一个子元素
2. prependTo()：a.prependTo(b) 把a插入到b所有的子元素前，使其成为第一个子元素
外部插入
1. InsertAfter()：a.insertAfter(b) 把a插入到b元素的后面，得到ba
2. InsertBefore()：a.insertBefore(b) 把a插入到b元素的前面，得到ab
替换
1. replaceWith()：a.replaceWith(b) 使用b元素替换a
2. replaceAll()：a.replaceAll(b) 使用a替换掉所有的b
删除
1. remove()：a.remove(); 删除a标签
2. empty()：清空a标签里的内容

CSS样式操作

addClass() ：添加样式
removeClass()：删除样式
toggleClass()：有就删除，没有就添加样式
offset()：获取和设置元素的坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式操作</title>
    <style type="text/css">

        div{
            width:100px;
            height:260px;
        }

        div.border{
            border: 2px white solid;
        }

        div.redDiv{
            background-color: red;
        }

        div.blackDiv{
            border: 5px blue solid;
        }
    </style>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

    <script>
        $(function () {
            var $div = $("div:first")
            //为添加样式按钮添加单击事件
            $("#btn01").click(function () {
                //向被选元素添加一个或者多个类
                $div.addClass("redDiv blackDiv")
            })

            //为删除样式按钮添加单击事件
            $("#btn02").click(function () {
                //删除被选元素的一个或者多个类
                $div.removeClass("redDiv")
            })

            //为有就删除没有就添加样式按钮添加单击事件
            $("#btn03").click(function () {
                //删除或者添加被选元素的一个或者多个类
                $div.toggleClass("redDiv blackDiv")
            })

            //为获取设置元素坐标按钮添加单击事件
            $("#btn04").click(function () {
                //获取元素坐标
                var pos = $div.offset()
                alert(pos.top + "  " + pos.left)
                //设置元素坐标
                $div.offset({
                    top:100,
                    left:50
                })
            })
        })
    </script>

</head>
<body>

<table align="center">
    <tr>
        <td>
            <div class="border">
                这是将要被操作的DIV
            </div>
        </td>

        <td>
            <div class="btn">
                <input type="button" value="addClass()" id="btn01"/>
                <input type="button" value="removeClass()" id="btn02"/>
                <input type="button" value="toggleClass()" id="btn03"/>
                <input type="button" value="offset()" id="btn04"/>
            </div>
        </td>
    </tr>
</table>



<br /> <br />


<br /> <br />
</body>
</html>

jQuery动画

基本动画（都可以添加参数，参数1为动画执行时长，第二个参数为动画的回调函数）
- show() ：将隐藏的元素显示
- hide()：将可见的元素隐藏
- toggle()：可见的元素隐藏，不可见的元素显示
淡入淡出动画
- fadeIn()：淡入（慢慢可见）
- fadeOut()：淡出（慢慢消失）
- fadeTo()：在指定时长内慢慢的将透明度修改为指定的值（0~1）
- fadeToggle()：淡入/淡出切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画操作</title>
    <style>
        table,td {
            border: 1px solid;
            border-collapse: collapse;
        }

        span {
            background-color: #fb6;
            text-align: center;
            width: 100px;
            height: 50px;
            display: block;
        }
    </style>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            //为显示按钮绑定单击事件
            $("#btn1").click(function () {
                $("#div1").show(500)
            })

            //为隐藏按钮绑定单击事件
            $("#btn2").click(function () {
                $("#div1").hide(500)
            })

            //为显示/隐藏切换按钮绑定单击事件
            $("#btn3").click(function () {
                $("#div1").toggle(500)
            })

            //为淡入换按钮绑定单击事件
            $("#btn4").click(function () {
                $("#div1").fadeIn(500)
            })

            //淡出  fadeOut()
            $("#btn5").click(function(){
                $("#div1").fadeOut(500);
            });

            //淡化到  fadeTo()
            $("#btn6").click(function(){
                $("#div1").fadeTo("slow",Math.random());
            });
            //淡化切换  fadeToggle()
            $("#btn7").click(function(){
                $("#div1").fadeToggle("slow","linear");
            });

        })
    </script>
</head>
<body>
<table style="float: left;">
    <tr>
        <td><button id="btn1">显示show()</button></td>
    </tr>
    <tr>
        <td><button id="btn2">隐藏hide()</button></td>
    </tr>
    <tr>
        <td><button id="btn3">显示/隐藏切换 toggle()</button></td>
    </tr>
    <tr>
        <td><button id="btn4">淡入fadeIn()</button></td>
    </tr>
    <tr>
        <td><button id="btn5">淡出fadeOut()</button></td>
    </tr>
    <tr>
        <td><button id="btn6">淡化到fadeTo()</button></td>
    </tr>
    <tr>
        <td><button id="btn7">淡化切换fadeToggle()</button></td>
    </tr>
</table>

<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
    jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>

jQuery事件操作

$(function(){})和window.onload = function(){}的区别是什么？
- 触发的时间
  1. jQuery的页面加载完成之后，浏览器的内核解析完页面的标签创建好DOM对象后会立刻执行
  2. 原生js页面加载完成后，除了等待浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成
- 触发的顺序
  1. jQuery 页面加载完成之后先执行
  2. 原生js页面加载完成后执行
- 执行的次数
  1. 原生js页面加载完成之后，只会执行最后一次的赋值函数
  2. jQuery页面加载完成之后是全部把注册的function函数依次顺序全部执行+

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script>

        $(function () {
            alert("jQuery页面先加载--1")
        });
        $(function () {
            alert("jQuery页面先加载--2")
        });
        $(function () {
            alert("jQuery页面先加载--3")
        });

        window.onload = function () {
            alert("原生js页面后加载--1")
        }
        window.onload = function () {
            alert("原生js页面后加载--2")
        }
        window.onload = function () {
            alert("原生js页面后加载--3")
        }
    </script>
</head>
<body>
<iframe src="http://baidu.com"></iframe>
<img src="http://baidu.com">图片
</body>
</html>

jQuery中其他的事件处理方法
1. click()：可以绑定单击事件，以及触发单击事件
2. mouseover()：鼠标移入事件
3. mouseout()：鼠标移出事件
4. bind()：可以给元素一次性绑定一个或者多个事件
5. one()：使用上跟bind相似，但是one方法绑定的事件只会响应一次
6. unbind()：接触事件的绑定
7. live()：也是用来绑定事件。可以用来绑定选择匹配器匹配的所有元素的事件，哪怕是动态创建出的元素也有效。（该方法现已废除，使用on替代）
事件的冒泡
1. 事件的冒泡是指，父子元素同时监听同一个事件，当触发子元素的事件时，同一时间也被传递到了父元素的事件里去响应
2. 在子元素事件的函数体内，return false可以阻止事件的冒泡传递
javaScript事件对象
事件对象是指封装有触发的事件信息的javaScript对象。重点关心的是如何获取这个事件对象并加以使用。
再给元素绑定事件时，在事件的function(event)参数列表中添加一个参数，习惯上取名为event，这个event就是javaScript传递参数事件处理函数的事件对象
如：

原生javaScript获取事件对象

window.onload = function(){
    document.getElementById("areaDiv").onclick = function(event){
        console.log(event)
    }
}

jQuery代码获取事件对象

$(function () { 
    $("#areaDiv").click(function (event) { 
        console.log(event); 
    }); 
});

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

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

下面使用一个图片跟随的实例来对事件对象进行进一步介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片跟随</title>
    <style>
        body{
            text-align: center;
        }
        #small {
            margin-top: 150px;
        }
        #showBig {
            position: absolute; display: none;
        }
    </style>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            $("#small").bind("mouseover mouseout mousemove", function (event) {
                if (event.type == "mouseover")
                    $("#showBig").show()
                else if (event.type == "mouseout")
                    $("#showBig").hide()
                else if (event.type == "mousemove"){
                    console.log(event);
                    $("#showBig").offset({
                    left:event.pageX + 10,
                    top:event.pageY + 10
                    })
                }

            })
        })
    </script>
</head>
<body>
<img id="small" src="图片跟随小.png">
<div id="showBig">
    <img src="图片跟随.png">
</div>
</body>
</html>

种棵马拉松

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习之jQuery学习(下)

jQuery学习（下）jQuery的属性操作html()：可以设置和获取起始标签和结束标签中的内容。跟DOM对象中的innerHTML属性是一样的text()：可以设置和获取起始标签和结束标签中的文本。跟DOM对象中的innerText属性是一样的val()：可以设置和获取表单项的value属性值。跟DOM对象中的value属性是一样的attr()：可以设置和获取属性的值。不推荐操作checked、readOnly、selected、disable等。attr方法还可以操作非标准的属性。比如自定
复制链接

扫一扫