jQuery笔记二——设置CSS样式与绑定事件

最新推荐文章于 2023-03-30 23:11:01 发布
最新推荐文章于 2023-03-30 23:11:01 发布
阅读量585 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46351593/article/details/107449887
版权

文章目录

属性节点

  • 什么是属性节点？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O7nV6Ags-1595157552308)(/Users/mac/Desktop/MarkDown /jQuery/笔记2/1.jpg)]

在编写HTML代码时，在HTML标签中添加的属性就是属性节点。在浏览器中找到span这个DOM元素之后，展开看到的都是属性，在attrubutes属性中保存的所有内容都是属性节点。

  • 如何操作属性节点？
<!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-1.12.4.js"></script>
    <script>
        $(function() {
            var span = document.getElementsByTagName("span")[0];
            span.setAttribute("name", "aniu");
            span.getAttribute("name");
        });
    </script>
</head>

<body>
    <span name=“it666”></span>
</body>

</html>

DOM元素.setAttribute("属性名称","值“);：设置属性节点的值。

DOM元素.getAttribute("属性名称");：获取属性节点的值。

  • 属性和属性节点区别？

任何对象都有属性，只有DOM对象才有属性节点。

attr()修改属性节点方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>attr</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // attr()方法作用：获取或者设置属性节点的值
            // 传递一个参数代表获取属性节点的值(无论找到多少个元素，都只会返回第一个元素指定的属性节点的值)，传递两个参数代表设置属性节点的值
            console.log($("span").attr("class"));//span1

            console.log($("span").attr("name", "aniu"));
            
            // removeAttr()作用：删除属性节点(删除多个属性节点，中间用空格隔开)
            $("span").removeAttr("class name");
        });
    </script>
</head>

<body>
    <span class="span1" name="it666"></span>
    <span class="span2" name="lz"></span>
</body>

</html>
  1. attr()方法作用：获取或者设置属性节点的值。传递一个参数代表获取属性节点的值(无论找到多少个元素，都只会返回第一个元素指定的属性节点的值)，传递两个参数代表设置属性节点的值。
  2. removeAttr()作用：删除属性节点(删除多个属性节点，中间用空格隔开)，会删除所有找到元素指定的属性节点。

prop()修改属性方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>prop</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            //prop()方法特点和attr()方法一样
            $("span").eq(0).prop("demo", "Aniu666");
            $("span").eq(1).prop("demo", "Aniu888");
            console.log($("span").prop("demo"));
            // removeProp()方法特点和removeAttr()方法一样
            $("span").removeProp("demo");
        });
    </script>
</head>

<body>
    <span class="span1" name="it666"></span>
    <span class="span2" name="lz"></span>
</body>

</html>
  1. prop()方法特点和attr()方法一样。
  2. removeProp()方法特点和removeAttr()方法一样。
  3. 注意点：prop()方法不仅能操纵属性，还能操作属性节点。官方推荐在操作属性节点时，具有true和false两个属性的属性节点，如checked、selected或者disabled使用prop()，其他的使用attr()。

小练习

我们做一个简单的小练习。需要在文本框中输入图片地址，然后点击切换图片按钮就可以切换图片。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z7n8ov91-1595157552314)(/Users/mac/Desktop/MarkDown /jQuery/笔记2/2.gif)]

用到刚才所学习的attr()方法即可。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>attr小练习</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            var btn = document.getElementsByTagName("button")[0];
            btn.onclick = function() {
                var input = document.getElementsByTagName("input")[0];
                text = input.value;
                $("img").attr("src", text);
            }
        });
    </script>
</head>

<body>
    <input type="text">
    <button>切换图片</button><br>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</body>

</html>

类相关方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类相关方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .class1 {
            height: 100px;
            width: 100px;
            background-color: red;
        }
        
        .class2 {
            border: 5px solid pink;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {

            var btns = document.getElementsByTagName("button");

            btns[0].onclick = function() {
                // addClass()添加一个类
                $("div").addClass("class1 class2");
            }
            btns[1].onclick = function() {
                // removeClass()删除一个类
                $("div").removeClass("class2");
            }
            btns[2].onclick = function() {
                // toggleClass()切换类(有就删除，没有就添加)
                $("div").toggleClass("class1 class2");
            }
        });
    </script>
</head>

<body>
    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <div></div>
</body>

</html>
  1. addClasss()添加类，如果要添加多个，中间用空格隔开。
  2. removeClass()删除类，如果要删除多个，中间用空格隔开。
  3. toggleClass()切换类，有就删除，没有就添加。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XauvLeDy-1595157552316)(/Users/mac/Desktop/MarkDown /jQuery/笔记2/3.gif)]

文本值相关操作

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本值</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            height: 100px;
            width: 100px;
            border: 1px solid #000;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function() {
                $("div").html("<p>我是p标签<span>我是span</span></p>"); //我是p标签我是span
            }
            btns[1].onclick = function() {
                console.log($("div").html()); //<p>我是p标签<span>我是span</span></p>
            }
            btns[2].onclick = function() {
                $("div").text("<p>我是p标签<span>我是span</span></p>"); //<p>我是p标签<span>我是span</span></p>
            }
            btns[3].onclick = function() {
                console.log($("div").text()); //<p>我是p标签<span>我是span</span></p>
            }
            btns[4].onclick = function() {
                $("input").val("请输入内容...");
            }
            btns[5].onclick = function() {
                console.log($("input").val()); //请输入内容...
            }
        });
    </script>
</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>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u2nB0h9x-1595157552318)(/Users/mac/Desktop/MarkDown /jQuery/笔记2/4.gif)]

jQuery设置CSS样式

<!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-1.12.4.js"></script>
    <script>
        $(function() {
            // 方法一：逐行设置
            // $("div").css("width", "100px");
            // $("div").css("height", "100px");
            // $("div").css("background-color", "red");
            // 方法二：链式设置(建议不要超过三个，不然可阅读性较差)
            // $("div").css("width", "100px").css("height", "100px").css("background-color", "red");
            // 方法三：批量设置（推荐使用）
            $("div").css({
                width: "100px",
                height: "100px",
                background: "red"
            });
        });
    </script>
</head>

<body>
    <div></div>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gX40Sgfz-1595157552321)(/Users/mac/Desktop/MarkDown /jQuery/笔记2/5.jpg)]

还可以通过$("div").css();中输入一个参数来获取CSS样式。

尺寸和位置相关设置

  • 尺寸相关，获取与设置尺寸。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作样式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            position: relative;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: purple;
            border: 50px solid pink;
        }
        
        .son {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            var btns = document.getElementsByTagName("button");
            // 监听获取
            btns[0].onclick = function() {
                    console.log($(".father").width());
                }
                // 监听设置
            btns[1].onclick = function() {
                $(".father").width("500px");
            }
        });
    </script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-briK2UGY-1595157552323)(/Users/mac/Desktop/MarkDown /jQuery/笔记2/6.gif)]

  • 位置相关，获取与设置位置
    • offset()可以获取距离窗口位置。可设置。
    • position()可以获取距离定位元素位置。不可设置。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作样式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            position: relative;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: purple;
            border: 50px solid pink;
        }
        
        .son {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            var btns = document.getElementsByTagName("button");
            // 监听获取
            btns[0].onclick = function() {
                    console.log($(".son").offset().left);
                    console.log($(".son").position().left);
                }
                // 监听设置
            btns[1].onclick = function() {
                $(".son").offset({
                    left: 10
                });
            }
        });
    </script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jDvEvs9N-1595157552327)(/Users/mac/Desktop/MarkDown /jQuery/笔记2/7.gif)]

  • scrollTop与scrollLeft
// 设置
btns[0].onclick = function() {
	$(".scroll").scrollTop(300);
}
// 获取
btns[1].onclick = function() {
	console.log($(".scroll").scrollTop());

}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z5rKnC2g-1595157552328)(/Users/mac/Desktop/MarkDown /jQuery/笔记2/8.gif)]

  • 设置页面滚动条（考虑浏览器兼容性，使用一下方法）
 // 设置
 btns[0].onclick = function() {
 	$("html,body").scrollTop(300);
 }
 // 获取
 btns[1].onclick = function() {
	console.log($("html").scrollTop() + $("body").scrollTop());

}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fRibd2dQ-1595157552329)(/Users/mac/Desktop/MarkDown /jQuery/笔记2/9.gif)]

jQuery绑定事件

  • 两种绑定事件方式：
    • eventName(fn);：编码效率略高，部分事件jQuery没有实现，所以不能添加
    • on(eventName,fn);：编码效率略低，所有js事件都可以添加。
    • 注意：可以添加多个相同或者不同类型的事件，不会覆盖。
<!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-1.12.4.js"></script>
    <script>
        $(function() {
            $("button").click(function() {
                alert("hello lz");
            });
            $("button").on("click", function() {
                alert("ij6666");
            })
        });
    </script>
</head>

<body>
    <button>点击</button>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dBHM57Fq-1595157552330)(/Users/mac/Desktop/MarkDown /jQuery/笔记2/10.gif)]

阿牛大牛中
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数据绑定、事件绑定、事件传参、列表渲染、.wxss跟css
zkfgyx的博客
10-17 316
数据绑定、事件绑定、事件传参、列表渲染、.wxss跟css
jquery样式操作,属性操作,绑定click事件,特殊效果:(二)
SenZendao的博客
09-13 406
这篇续着上篇的写吧。 4：jquery样式操作 5：jquery属性操作 6：绑定click事件 7：jquery特殊效果 8：jquery链式调用 9：jquery动画 10：尺寸相关、滚动事件 11：jquery事件 12：主动触发与自定义事件 13：事件委托 14：事件冒泡 15：jquery元素节点操作 16：滚轮事件与函数节流 17：json 18：aj...
jQuery的css与事件绑定
11-23 221
一、事件绑定 1、概述 事件绑定（2种）： eventName(function(){})  绑定对应事件名的监听, 例如：$(‘#div’).click(function(){}); on(eventName, funcion(){})  通用的绑定事件监听, 例如：$(‘#div’).on(‘click’, function(){}) 优缺点:  eventName: 编码方便, 但只...
用jquery给元素动态绑定事件及样式
weixin_33923148的博客
04-03 127
网页输出的时候，可以用jquery给各种元素绑定事件，或设置样式。之所以这样做，好处是节省代码，尤其适合元素很多，并且元素的事件对应的函数雷同的情况。看看以下代码： <div id="divUserList"> <span><a href="javascript:;" onclick="hi('001')">张三</a></span&g...
css添加事件
huachao1的专栏
09-04 7218
CSS中expression使用简介 IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javas cript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其
笔记本样式jQuery滑块.zip
11-25
在滑块的实现中，jQuery可以用来选择元素、绑定点击事件、改变滑块内容的位置和透明度，以实现平滑的过渡效果。例如，我们可以使用`$(document).ready()`来确保页面加载完成后执行代码，`$(".slider").slideUp()`和`...
jQuery中用on绑定事件时需注意的事项
01-19
随着jQuery版本的更新，以前版本的Bind()，live()，delegate()事件可以直接被on代替，本次笔记仅以点击事件为例，主要考察了on事件的用法： 一、用on监听点击事件前添加的DOM，可以正常触发： <!DOCTYPE html> &...
jQuery+css3输入框焦点事件动画特效.zip
最新发布
09-22
《jQuery与CSS3结合实现输入框焦点事件动画特效详解》 在网页开发中，交互性的提升往往能极大地增强用户体验。jQuery作为一个轻量级的JavaScript库，以其简洁的API和强大的功能，深受开发者喜爱。而CSS3则为网页...
jQuery和CSS仿京东仿淘宝列表导航菜单
11-29
本教程将介绍如何使用jQuery和CSS来创建一个与京东、淘宝类似的列表导航菜单。 首先，我们来看看这个导航菜单的核心功能： 1. **鼠标停留导航**：当用户将鼠标悬停在主菜单项上时，相应的子菜单会自动展开，展示更...
jQuery学习笔记之基础中的基础
12-11
3. **事件处理**：jQuery提供了统一的事件绑定和触发机制，如`$(element).on('click', function() {...})`用于绑定点击事件，避免了不同浏览器间事件处理的兼容性问题。 4. **动画效果**：jQuery内置了一系列动画...
css实现圆环，绑定点击事件，只圆环部分触发事件
kangluon的博客
08-22 346
css实现圆环，并绑定事件，只有圆环部分才能触发事件
CSS样式中通过样式设计事件
lauka的专栏
04-28 791
td{  /*设置onmouseover事件*/  onmouseover: expression(onmouseover=function (){this.style.borderColor =blue;this.style.color=red;this.style.backgroundColor =yellow});  /*设置onmouseout事件*/  onmouseou
js中的html事件绑定,js绑定事件_html/css_WEB-ITnose
weixin_28785757的博客
06-09 136
$(".eggList li").one("click",function() {$(this).children("span").hide();$(this).addClass("curr");$(".a").addClass("ab");setTimeout(function(){$(".eggList li").siblings().addClass("curr");$(".b").addC...
如何使图片平铺整个页面？css样式/js怎么绑定事件及跳转页面
Yhlhn的博客
03-30 262
为了保证图片不会超出屏幕之外，解决怪异盒模型的问题。js怎么绑定事件及跳转页面。
jQuery如果上了数据绑定。
Web_boom的博客
09-27 350
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
解决jquery 动态生成的元素的事件无法绑定
weixin_33700350的博客
10-09 176
一、错误示例：对于自己用脚本动态生成的元素，无法绑定事件。例如：body下的代码：<body> <ul> <li><spanclass="class1">11111</span></li> <li><spanclass="class1">22222</sp...
使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式
杨明金的博客
11-11 2599
查看本章节 查看作业目录 需求说明： 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 实现思路： 在 HTML 页面中导入 jQuery 框架 在页面加载完毕事件中，获取 <span> 标签对象，调用 css() 方法，设置字体颜色为红色 在页面加载完毕事件中，获取 <a> 标签对象，调用 css() 方法，去掉 <a> 标签的下
通过css循环添加点击事件
weixin_45454281的博客
09-09 2271
通过css循环添加点击事件
html div单击事件,给div绑定点击事件三个方法
热门推荐
weixin_42393452的博客
06-05 1万+
基础代码测试div {font-size: 2em;width: 250px;cursor: pointer /*变成手型*/}.clickme {background-color: #2aabd2;}方法1-javascript代码绑定事件绑定-点击我document.getElementById("clickme").onclick = function () {location.href =...
jQuery精要：选择器、事件绑定与Ajax
"jQuery笔记精要，涵盖了从基础到高级的各种jQuery知识点，包括API参考、选择器、事件绑定、动画效果和Ajax等，适合新手和有经验的开发者学习和复习使用。" jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值