jquery怎么给元素设置属性

news2025/2/25 10:34:24

设置方法:1、使用attr()方法,语法“$(selector).attr(属性名,值)”或“$(selector).attr({属性名:值;})”;2、使用prop()方法,语法“$(selector).prop(属性名,值)”。

1、使用attr()方法 

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

语法:

//单个属性

$(selector).attr(属性名,值)

//多个属性

$(selector).attr({属性名:值;属性值:值...})

 2、使用prop()方法

prop() 方法设置或返回被选元素的属性和值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

语法:

//单个属性

$(selector).prop(属性名,值)

//多个属性

$(selector).prop({属性名:值;属性值:值...})

3、attr()和prop()方法的区别

prop() 方法和 attr() 方法相似,都是用来获取或设置元素的 HTML 属性的,不过两者也有着本质上的区别。

jQuery 官方建议:具有 true 和 false 这两种取值的属性,如 checked、selected 和 disabled 等,建议使用 prop() 方法来操作,而其他的属性都建议使用 attr() 方法来操作。

示例:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <script src="js/jquery-1.10.2.min.js"></script>

        <script>

            $(function () {

            $('input[type="radio"]').change(function(){

                var bool = $(this).attr("checked");

                if(bool){

                    $("p").text("你选择的是:" + $(this).val());

                }

            })

        })

    </script>

    </head>

    <body>

        <div>

            <label><input type="radio" name="fruit" value="苹果" />苹果</label>

            <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>

            <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>

        </div>

        <p></p>

    </body>

</html>

 预览效果如图 1 所示。

分析: 

$().change(function(){

    ……

})

在这个例子中,我们其实是想通过$(this).attr("checked")判断单选框是否被选中,如果被选中,就获取该单选框的 value 值。可是运行代码后发现:完全没有效果!这是为什么呢?

实际上,对于表单元素的 checked、selected、disabled 这些属性,我们使用 attr() 方法是没法获取的,而必须使用 prop() 方法来获取。因此,我们把 attr() 方法替换成 prop() 方法就有效果了。

其实,prop()方法的出现就是为了弥补 attr() 方法在表单属性操作中的不足。记住一句话:如果某个属性没法使用 attr() 方法来获取或设置,改换 prop() 方法就可以实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405581.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

共享主机和 WordPress 主机之间的区别

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】&#x1f4ac; 免费且…

npm install 报错(npm ERR! code EPERM npm ERR! syscall mkdir npm ERR! path D:\node.js\odejs)

今天我正好要学习TS需要typeScript这个插件但是我用npm i typescript -g 这个命令安装的时候报错&#xff0c;我花了1个时才解决这个问题&#xff0c;下面我为大家提供一些解决方案 1.全部错误install 2.错误详解 该错误发生在修改npm的全局安装路径之后&#xff0c;再执行npm…

【Web 三件套】个人简单博客系统页面搭建(附源码)

文章目录1. 成品展示2. 知识准备3. 博客系统页面搭建3.1 基本介绍3.2 博客列表页3.3 博客详情页3.4 博客登录页3.5 博客编辑页3.6 公共页面样式3.7 markdown 编辑器引入4. 总结1. 成品展示 以下为个人搭建的一个简单博客系统页面&#xff0c;以后会不断改进&#xff0c;并且与…

VsCode镜像下载(国内镜像源,高速秒下)

VsCode镜像下载&#xff08;国内镜像源&#xff0c;高速秒下&#xff09;vscode官方网站下载速度太慢&#xff0c;非正规网站又不太敢下&#xff0c;通过镜像源下载就好了。你们不介意版本的话&#xff0c;下面是1.63版本的链接&#xff08;直接复制下载就好了&#xff09;&…

猿创征文|一文带你了解前端开发者工具

前端开发者工具目录一、前言二、前端开发者工具——编译器&#xff08;含插件&#xff09;1、VS Code2、VS Code 必备插件3、WebStorm三、前端开发者工具——UI 框架工具1、Element2、Vant四、前端开发者工具——API 调试工具1、ApiPost五、写在最后&#xff08;总结&#xff0…

Module not found: Error: Can‘t resolve “xxx“ in “xxx“导致该问题的解决方案

先看报错提示 根据报错提示反应的情况是&#xff1a;找不到模块&#xff1a;错误&#xff1a;无法解析 在遇到报错时应该仔细阅读报错提示&#xff0c;这样解决起来也不会没有头绪 在红色遮挡下有该报错出现的主要原因 在此处我们谈论一下解决该类报错的几种方法 1&#xff…

uniapp 总结篇 (小程序)

前期概述&#xff1a;做了很长时间的小程序了&#xff0c;在此做一个完整的项目总结&#xff0c;希望可以帮助到正在学习、开发的小伙伴。此篇文章并不涉及一些原理&#xff0c;更重要的是帮助大家实现功能、流程。 uniapp 还是很强大的 可以开发 小程序、h5、pc、app 一、创…

Tomcat安装使用与部署Web项目的三种方法

✅作者简介&#xff1a;C/C领域新星创作者&#xff0c;为C和java奋斗中 ✨个人社区&#xff1a;微凉秋意社区 &#x1f525;系列专栏&#xff1a;MySql一点通 &#x1f4c3;推荐一款模拟面试、刷题神器&#x1f449;注册免费刷题 &#x1f525;前言 今天带来Tomcat的安装教程&a…

input 输入框限制只能输入两位有效小数

前端入门即教学&#xff0c;今天博主分享几个前端金额实用的小案例&#xff0c;复制拿过去就能用哦&#xff01; 相信有很多前端小伙伴在工作中遇到过这样的需求&#xff0c;就是限制输入框内容只能输入两位小数吧&#xff0c;想了用正则但是又不知道怎么下手的同学&#xff0c…

CSS 父选择器 :has()

精通CSS-点击快速学习 在CSS Selectors 4规范中,CSS 引入了一个名为 的新选择器:has(),它最终让我们可以选择父级。这意味着我们可以选择具有特定元素的父元素。目前Safari和Chrome105已经支持。 父选择器如何在 CSS 中工作 在 CSS 中,如果我们想要选择某些东西,我们会使…

盘点12个前端低代码的框架开源项目以及前端低代码的总结调研,比如百度开源的前端低代码框架、阿里巴巴开源的低代码平台、Element UI表单设计及代码生成器、H5可视化页面配置等

文章目录1. Appsmith2. Amis3. LowCodeEngine4. form-generator5. H5-Dooring/pc-Dooring6. YAO7. Mometa8. NocoBase9. Sparrow10. vite-vue3-lowcode11. 华炎魔方12. Awesome Lowcode参考文档低代码是基于可视化和模型驱动理念&#xff0c;结合云原生与多端体验技术&#xff…

sortablejs的使用实践

文章目录说明基本使用1. 素颜版2. 设置可被拖起的项的样式3. 设置被选中的项的样式4. 设置拖拽时跟随的阴影的样式5. 设置正在被拖拽中的样式6. 设置当前列表容器内是否可以进行拖拽排序7. 设置拖拽的手柄8. 多个列表之间的拖拽 [group]示例1 [name]示例2 [put]示例3 [put func…

【前端】图片懒加载的原理和三种实现方式

一. 图片懒加载的目的 大型网站如常用的淘宝&#xff0c;京东等页面&#xff0c;需要展示大量的商品图片信息&#xff0c;如果打开网页时让所有图片一次性加载完成&#xff0c;需要处理很多次网络请求&#xff0c;等待加载时间比较长&#xff0c;用户体验感很差。 有一种常用…

基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

vite 最近非常火&#xff0c;它是 vue 作者尤大神发布前端构建工具&#xff0c;底层基于 Rollup&#xff0c;无论是启动速度还是热加载速度都非常快。vite 随 vue3 正式版一起发布&#xff0c;刚开始的时候与 vue 绑定在一起&#xff0c;但之后的 v2 版本便比较独立&#xff0c…

什么是垃圾回收机制(超详细)

垃圾回收机制 1.垃圾回收机制&#xff08;Garbage Collction&#xff09;简称GC&#xff0c;是JavaScript中使用的内存管理系统的基本组部分&#xff0c;是为了防止内存泄漏 2.JavaScript是在创建变量&#xff08;对象、字符串等&#xff09;时自动进行了分配内存&#xff0c;并…

Web实训项目--网页设计(附源码)

1 实训基本信息 1.1 实训项目名称 网页设计 1.2 实训环境 本次实训的形式以实战讲解为主&#xff0c;以项目为主导。学习如何设计网页中的轮播图和动画效果&#xff0c;并掌握a标签文本内容跳转、超链接的应用、播放音乐与视频等操作。 2 实训内容简介 2.1 网页设计 通过…

关于vue中如何清除定时器的方法

一、问题 1、在vue中使用setTimeout定时器的时候&#xff0c;可能会遇到关不掉的情况&#xff0c;会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了&#xff0c;但是有时候没生效&#xff0c;定时器还会继续执行。 2、在这里需要说一下setTimeout的使用场景&am…

路由vue-route的使用

文章目录一、项目初始化二、路由配置规则vue-route标签作用&#xff1a;路由匹配到的组件将渲染到这里router-link标签作用&#xff1a;路由导航&#xff08;路由跳转的链接&#xff09;三、声明式导航和编程式导航声明式导航编程式导航四、路由重定向五、嵌套路由特别注意总结…

04-vscode搭建cmake的编译环境

vscodemingw搭建C/C环境系列 01.vscodemingw搭建编译调试环境 02-vscode编译调试单个源文件程序 03-vscode编译调试多个源文件程序 04-vscode搭建cmake的编译环境 文章目录一、简述二、vscode搭建cmake的编译环境&#xff08;方法1&#xff09;1.配置cmake构建目录(可忽略)…

Redux——详解

一.初识Redux 相当于vue中的vuex 1.redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库) 2.它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用 3.作用: 集中式管理 react 应用中多个组件共享的状态 看看Redux的工作原理图 如果要进行加一操作…