jQuery学习笔记第三天

最新推荐文章于 2024-08-21 20:15:01 发布
最新推荐文章于 2024-08-21 20:15:01 发布
阅读量239 收藏
点赞数
文章标签： js html javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Depressione/article/details/106819937
版权

jQuery属性操作

jQuery的attr方法和removeAttr方法

attr() 方法设置或返回被选元素的属性值。根据该方法不同的参数，其工作方式也有所差异。

$(selector).attr(attribute)
$(selector).attr(attribute,value)
  • 可以传一个值，代表获取被选元素的属性值
  • 也可以传两个值，代表设置被选元素的属性和值

注：

  • 如果传一个值，无论找到多少个元素，只返回找到的第一个元素
  • 如果传两个值，就是设置值，那么找到多少个就设置多少个

removeAttr()方法用于删除元素的属性，删除的话就是找到多少个就删除多少个

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的attr方法</title>
    <script src="../jquery-3.5.1.js"></script>
</head>

<body>
    <span class="span1" name="a1"></span>
    <span class="span2" name="a2"></span>
</body>
<script>
    /*
    1.$(selector).attr(attribute),$(selector).attr(attribute,value)
        可以传一个值，代表获取被选元素的属性值
        也可以传两个值，代表修改被选元素的属性和值
    
    
    */

    console.log($("span").attr("name"))
    // 注：无论找到多少个元素，只返回找到的第一个元素
    $("span").attr("class", "box")
    //注：如果是设置值的话，那么找到多少个就设置多少个

    $("span").removeAttr("name")
    //注：删除的话就是找到多少个就删除多少个
</script>

</html>
jQuery的prop方法和removeprop方法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的prop方法和removeprop方法</title>
    <script src="../jquery-3.5.1.js"></script>
</head>

<body>
    <span class="span1" name="a1"></span>
    <span class="span2" name="a2"></span>
</body>
<script>
    /*
    1.prop方法
    特点和attr方法一致
    2.removeProp方法
    特点和removeAttr方法一致
    */


    $("span").eq(0).prop("demo", "aaa") //设置原型中demo
    $("span").eq(1).prop("demo", "bbb")
    $("span").prop("demo")

    $("span").removeProp("demo")

    /*
    注：prop不仅能操作属性，还能操作属性节点
    */
    $("span").prop("class", "box") //操作属性节点，修改class变成box
</script>

</html>
jQuery操作类相关方法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery操作类相关方法</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        .class1 {
            width: 20px;
            height: 20px;
            background-color: red;
        }

        .class2 {
            border: 5px solid black;
        }
    </style>
</head>

<body>
    <button>添加类</button>
    <button>删除类</button>
    <button>修改类</button>
    <div></div>
</body>
<script>
    /*
    1.addClass(class,fn)
        作用:给元素添加一个类，如果要添加多个的话，就写在同一个“”里用空格隔开
    2.removeClass(class,fn)
        作用：删除一个类
    3.toggleClass(class,fn)
        作用：切换类，有就删除，没有就添加
    */

    $(function () {
        var btns = document.getElementsByTagName("button")
        btns[0].onclick = function () {
            // $("div").addClass("class1") //给元素添加类名的操作
            $("div").addClass("class1 class2")
        }
        btns[1].onclick = function () {
            $("div").removeClass("class2")
        }
        btns[2].onclick = function () {
            $("div").toggleClass("class2")
        }
    })
</script>

</html>
jQuery文本值相关方法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery文本值相关方法</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置value</button>
    <button>获取value</button>
    <div></div>
    <input type="text">
</body>
<script>
    $(function () {
        var btns = document.getElementsByTagName("button")
        btns[0].onclick = function () {
            $("div").html("<p>我是p</p>")
            //和原生js中innerHTML一样
        }
        btns[1].onclick = function () {
            console.log($("div").html())
        }
        btns[2].onclick = function () {
            $("div").text("<p>我是p</p>")
            //和原生js的innerText一样
        }
        btns[3].onclick = function () {
            console.log($("div").text())
        }
        btns[4].onclick = function () {
            $("input").val("请输入：")
            //类比原生js的value属性
        }
        btns[5].onclick = function () {
            console.log($("input").val())
        }
    })
</script>

</html>
jQuery操作html样式的方法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery操作html样式的方法</title>
    <script src="../jquery-3.5.1.js"></script>
</head>

<body>
    <div></div>
</body>
<script>
    $(function () {
        //逐个设置css属性
        $("div").css("width", "100px")
        $("div").css("height", "100px")
        $("div").css("background", "red")
        //链式设置
        $("div").css("width", "100px").css("height", "100px").css("background", "blue")
        //批量设置（直接传个对象）
        $("div").css({
            width: "100px",
            height: "100px",
            background: "yellow"
        })
        //获取样式
        console.log($("div").css("width"))
    })
</script>

</html>
jQuery操作尺寸和位置方法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery操作尺寸和位置方法</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid black;
            margin-left: 50px;
            position: relative;
        }

        .son {
            height: 100px;
            width: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
</body>
<script>
    $(function () {
        var btns = document.getElementsByTagName("button")
        btns[0].onclick = function () {
            console.log($(".father").width()) //获取宽度
            console.log($(".son").offset().left)
            console.log($(".son").position().left)
            //offset是获取或者设置元素距离屏幕的偏移量
        } //监听获取
        btns[1].onclick = function () {
            $(".father").width("200px") //设置元素的宽度

            $(".son").offset({
                left: 10
            })
            // $(".son").position({
            //     left: 10
            // })//此步不生效，position只能获取，不能设置
        } //监听设置
    })
</script>

</html>
jQuery的scrollTop方法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的scrollTop方法</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .scroll {
            width: 100px;
            height: 200px;
            border: 1px solid black;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div我是div
    </div>
    <button>获取</button>
    <button>设置</button>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
<script>
    var btns = document.getElementsByTagName("button")
    btns[0].onclick = function () {
        console.log($(".scroll").scrollTop()) //获取元素内部滚动条的位置
        console.log($("html").scrollTop()) //获取网页的滚动条的位置
    }
    btns[1].onclick = function () {
        $(".scroll").scrollTop(300) //设置元素内部滚动条的位置
        $("html").scrollTop(300) //设置网页的滚动条位置
    }
</script>

</html>

jQuery事件绑定与解绑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery事件绑定</title>
    <script src="../jquery-3.5.1.js"></script>
</head>

<body>
    <button>我是按钮</button>
</body>
<script>
    $(function () {
        /*
        两种事件绑定方式：
        1.通过eventName(fn)
        2.on(eventName,fn)
        */

        $("button").click(function () {
            alert("hello")
        })
        $("button").on("click", function () {
            alert("hello2")
        })

        // $("button").off() //没有参数就是直接解绑全部
        $("button").off("click") //传递一个参数就会移除所有这个类型的事件

    })
</script>

</html>

jQuery事件冒泡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery事件冒泡</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background: red;
        }

        .son {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com">我是百度</a>
    <form action="http://www.taobao.com">
        <input type="text">
        <input type="submit" value="">
    </form>
</body>
<script>
    $(function () {
        /*
        1.事件冒泡
        2.如何阻止事件冒泡
        3.什么是默认行为
        4.如何阻止默认行为
        */
        $(".father").click(function () {
            alert("father")
        })
        $(".son").click(function () {
            alert("son")
            return false //在子级中写这个就可以阻止事件冒泡
            // event.stopPropagation()//也可以阻止事件冒泡
        })
        //当父级和子级都绑定事件时，执行子级后会自动执行父级的事件，这就是事件冒泡
        //一般情况下，我们需要点谁就是谁，所以要阻止事件冒泡


        //当点击a标签或提交按钮时，会自动的跳转到网页，这就是默认行为
        //接下来要阻止a标签的默认跳转行为
        $("a").click(function (event) {
            alert("注册")
            return false //此步为阻止a标签默认行为
            // event.preventDefault() //阻止默认行为
        })
    })
</script>

</html>

jQuery事件自动触发

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery事件自动触发</title>
    <script src="../jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background: red;
        }

        .son {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com">我是百度</a>
    <form action="http://www.taobao.com">
        <input type="text">
        <input type="submit" value="">
    </form>
</body>
<script>
    $(function () {
        $(".son").click(function () {
            alert("son")
        })
        $(".father").click(function () {
            alert("father")
        })
        // $(".son").trigger("click") //如果自动触发用trigger的话，那么会带有事件冒泡的问题
        // $(".father").trigger("click") //使自动触发指定事件
        $(".son").triggerHandler("click") //triggerHandler自动触发是没有时间冒泡的问题的
        $(".father").triggerHandler("click") //也是自动触发事件
    })
</script>

</html>
你过来啊zzz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【前端之Jquery获取元素尺寸、获取元素的偏移量、事件绑定、事件的解绑和触发的基本语法知识】
qq_44735180的博客
01-03 468
前端之Jquery获取元素尺寸、获取元素的偏移量、事件绑定、事件的解绑和触发的基本语法知识：1. jquery获取元素尺寸：width() 和 height()、innerWidth() 和 innerHeight()、outerWidth() 和 outerHeight() 2. jquery获取元素的偏移量：offset()、position() 3. jquery事件绑定：on()、one()、hover()、常用事件函数 4. jquery事件的解绑和触发：off()、trigger()
疯狂Jquery第一天(Jquery学习笔记)
10-28
以上就是根据提供的文档内容分析的Jquery学习笔记知识点。通过这篇笔记，我们可以了解到Jquery的入门知识，如何利用Jquery选择器和其链式操作进行DOM操作和事件处理，以及Jquery在实际开发中的强大功能和灵活性。
jquery的remove方法在ie浏览器不兼容、无效、不起作用的解决方法
YAO_IT的博客
03-26 6241
做项目时，测试ie11浏览器发现jq的remove方法总是报错， jquery SCRIPT5007: 缺少对象解决思路：    先找要删除的节点的父级节点,然后使用原生js的removeChild方法删除该节点。  var ele = document.getElementById("要删除的节点id"); document.getElementById("要删除节点的父节点id").rem...
jquery 中prop的使用以及一些要注意的问题
weixin_34192732的博客
01-16 222
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery 移除属性失败解决方法
qq_20044867的博客
02-25 740
jQuery 移除属性失败解决方法 方法一： $(this).attr(“onclick”,""); 兼容性：点击事件方法代码能移除，但事件绑定没有解除 方法二： $(this).removeAttr(“onclick”); 兼容性：谷歌浏览器可以，360浏览器和IE不可以 方法三： $(this).prop( “onclick”, null ); 兼容性：谷歌、360浏览器、IE浏览器都可以 ...
jQuery的attr(),removeAttr()与prop(),removeProp()方法的区别
叫我泽西哥好吗？（手动滑稽 ‾◡◝）
03-24 1479
对于HTML元素本身就带有的固有属性，在处理时，使用prop(),removeProp()。 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr(),removeAttr()。<div class="form-group"> <label class="control-label col-md-4 col-sm-4" for="fullname">自动下载</label>
jQuery学习笔记第三篇
桂云帆的博客
07-05 203
下面添加新的能力时就用jQuery.extend求添加，就像Prototype的Object.extend，mootool的Native.implement，Base2的Base.extend，Ext的apply，凡此种种，把一个属性包或独立的方法名与方法体作为参数加入目标对象中。就像一个茧，jQuery对象包裹着一个或复数个DOM对象，jQuery对象的能力来自其prototype，而其prototype的方法则是jQuery.prototype的一个副本。
JQuery学习笔记
热爱编程、热爱生活、热爱探索
08-21 682
万字详解带你快速了解并上手JQuery，同时文中还参杂一些使用JQuery的经验，帮助你提前避坑
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1291
本文主要介绍有关jQuery的相关知识点
jQuery学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 1068
jQuery学习笔记 JQuery入门-笔记部分 jQuery概述 jQuery是js库 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数 jquery是为了简化js的操作 jquery的安装 <script src="js/jquery-3.4.1.js" type="text/javascript"></script> 需要（在前面）引入jquery的核心js文件，不然会报错（$未定义）! jquery核心 $ 符号在j
jQuery学习笔记第一篇
桂云帆的博客
07-04 95
基本上init就是个大熔炉，根据传入参数的类型做出不同的处理，如DOM对象，字符串，数组对象与NodeList这样的类数组对象转换成jQuery对象，如果是函数，则改成DOM加载。
jQuery学习笔记第二天的电梯导航案例代码
03-01
本篇将详细探讨jQuery学习笔记中第二天涉及的电梯导航案例，该案例旨在实现一个网页上的楼层跳转功能，通过点击楼层链接，页面会平滑滚动到相应的位置，提升用户体验。 首先，我们要理解电梯导航的基本原理。在网页...
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
JQuery 学习笔记 选择器之三
10-29
在本篇jQuery学习笔记中，我们将探讨选择器的第三部分，包括`first`, `last`, `not`, `even`, `odd`, `eq`, `gt`, `lt`, 和 `header`等特殊选择器。这些选择器提供了更精细的元素筛选功能，帮助开发者更高效地操作...
JQuery 学习笔记01 JQuery初接触
12-09
《JQuery 学习笔记01 - JQuery初接触》 jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript编程，使得开发者能够更快速、更方便地处理DOM操作、事件处理、动画效果和Ajax交互。这篇学习...
后端学习笔记（八）--HTML
qwsadsdga的博客
08-18 818
​ *编写网页的一门语言​ *超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容​ *标记语言：由标签构成的语言​ *W3C（万维网联盟）标准：网页主要有三部分组成​ *结构：HTML​ *表现：CSS​ *行为：JavaScript。
Java学习Day33：HTML 第三章：挟魂崖
最新发布
weixin_51721783的博客
08-21 425
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。1、什么是dom？dom，全称Document Object Model文档对象模型，是 W3C 的标准；[所有浏览器公共遵守的标准]。用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。2、dom组成：由HTML、CSS、事件（交互）组成。
Javaweb学习之HTML（二）
2301_80841939的博客
08-17 664
TML 响应式 Web 设计（Responsive Web Design, RWD）是一种网页设计方法，它使得网站能够根据不同的访问设备（如桌面电脑、平板电脑、智能手机等）的屏幕尺寸和分辨率来自动调整布局、图片大小、字体等，从而提供最佳的浏览体验。但是，请注意，在HTML文档中直接使用Unicode编码字符时，需要确保文档的编码（如UTF-8）能够支持这些字符。HTML5引入了一些新的字符实体，主要用于表示一些数学符号、技术符号以及特殊字符等，但这些新的字符实体在日常的HTML编码中并不常用。
【HTML】为网页添加表单（控件）
weixin_51649465的博客
08-21 463
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。：一个表单中通常需要包含一些说明性的文字，提示用户进行填写和操作。：相当于一个容器，用来容纳所有的表单控件和提示信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值