怎样设置html的元素属性,Jquery怎么设置元素的属性和样式?
Jquery怎么设置元素的属性和样式?下面本篇文章给大家介绍一下使用jQuery操作元素属性与样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
元素属性和Dom属性
对于下面这样一个标签元素:
我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性.
元素属性和Dom属性只是在我们对其进行不同解析时的不同称呼.
值得注意的是:1、元素被解析成Dom时,元素属性和Dom属性并不一定是原来的名称.
例如,img的class属性,在表现为元素属性时是class;在表现为Dom属性时,属性名为className
2、在JavaScript中,我们可以直接获取或设置Dom属性
使用jQuery操作元素属性
在jQuery中,提供了attr函数来操作元素属性,具体如下:函数名说明例子
attr(name)取得第一个匹配元素的属性值.$("input").attr("value")
attr(property)将一个"名/值"形式的对象设置为所有匹配元素的属性$("input").attr({ value: "txt", title: "text" });
attr(key,value)为所有匹配的元素设置一个属性值$("input").attr("value","txt");
attr(key,fn)为所有匹配的元素设置一个计算的属性值$("input").attr("title", function () { return this.value });
removeAttr(name)从所有匹配的元素中删除一个属性$("input").removeAttr("value");
注意:1、如果要设置对象的class属性时,必须使用className作为属性名.
2、我们可以使用removeAttr删除元素属性,但其对应的Dom属性是不会被删除掉的,只是被改变其值而已
根据上面的几个函数,我们可以这样使用来获取dom的value值和innerHTML值:$("#txt1").attr("value")
$("#txt1").attr("value", "1234");
$("#dv1").attr("innerHTML", 'this is a div');
$("#dv1").attr("innerHTML");
实际上,jQuery提供了更简单的方法来访问value,innerHTML,具体函数如下:函数名说明例子
val()获取第一个匹配元素的value值$("#txt1").val()
val(val)为匹配的元素设置value值$("#txt1").val("txt1")
html()获取第一个匹配元素的html内容$("#dv1").html()
html(val)设置每一个匹配的元素的html内容$("#dv1").html("this is a div")
text()取得所有匹配文本节点的内容,并将其连接起来$("div").text()
text(val)将所有匹配元素的置为val$("div").text("divs")
使用jQuery操作CSS
1、修改CSS类函数名说明例子
addClass(classes)为每个匹配的元素添加指定的类名$("input").addClass("colorRed borderBlack");
hasClass(class)判断匹配元素集合中是否至少有一个包含了指定的css类,如果有一个含有指定css类,则返回truealert($("input").hasClass("borderBlack"));
removeClass([classes])从匹配元素中移除所有或指定的css类$("input").removeClass("colorRed borderBlack");
toggleClass(classes)如果存在(不存在)就删除(添加)指定类$("input").toggleClass("colorRed borderBlack");
toggleClass(classes,switch)当switch是true时,添加类,switch为false时,删除类$("input").toggleClass("colorRed borderBlack", true);注意:
1)、addClass、removeClass、toggleClass均可添加多个类,多个类之间用空格隔开
2)、removeClass方法的参数可选,如果有参数,则删除指定class,如果无参数,则删除匹配元素的所有class
3)、在调用toggleClass(classes,switch)时,我们可以有更多的用法,例如://每当按钮被点击三次时,添加样式
var i = 0;
$("#btn").click(function () {
$("input").toggleClass("colorRed borderBlack", true);
});
2、修改CSS样式函数名说明例子
css(name)访问第一个匹配元素的样式属性$("input").css("color")
css(properties)把一个"名/值"对设置给所有匹配元素的样式属性$("input").css({border:"solid 3px silver",color:"red"})
css(name,value)为匹配的元素设置同一个样式属性
如果是数字,将自动转换为像素值$("input").css("border-width","5");
注意:
对于样式值为数字的代码示例及结果:示例生成的源码
$("input").css("border-width","5");
id="txt1" />
注意:
对于一些常用的属性,例如width,height之类,使用attr("width")和css("width")是无法正常获取其值的,现在,我们来介绍一些常用的属性。
获取常用的属性
1、宽、高相关函数名说明例子
width()获取第一个匹配元素的宽度,默认为px$("#txt1").width()
width(val)为匹配的元素设置宽度值,默认为px$("#txt1").width(200)
height()获取第一个匹配元素的高度,默认为px$("#txt1").height()
height(val)为匹配的元素设置宽度值,默认为px$("#txt1").height(20)
innerWidth()获取第一个匹配元素内部区域宽度(包括padding,不包括border)$("#txt1").innerWidth()
innerHeight()获取第一个匹配元素内部区域高度(包括padding,不包括border)$("#txt1").innerHeight()
outerWidth([margin])获取第一个匹配元素外部区域宽度(包括padding,border)
margin为true则包括margin,否则不包括$("#txt1").outerWidth()
outerHeight([margin])获取第一个匹配元素外部区域高度(包括padding,border)
margin为true则包括margin,否则不包括$("#txt1").outerHeight(true)
注意:
返回的高度、宽度均为数字,不带px
参照一张图,会更容易理解些。
2、位置相关
在设计一些弹出对象的脚本中,经常需要动态获取弹出坐标并且设置元素的位置.jQuery为我们提供了位置相关的各个函数.函数名说明例子
offset()获取匹配元素在当前窗口的相对偏移
只对可见元素有效$("#btn").offset().top
$("#btn").offset().left
position()获取匹配元素相对父元素的偏移
只对可见元素有效$("#btn").position().top
$("#btn").position().left
scrollTop()获取匹配元素相对滚动条顶部的偏移
对可见元素和隐藏元素均有效$("div").scrollTop()
scrollTop(val)设置垂直滚动条顶部偏移为该值
对可见元素和隐藏元素均有效$("div").scrollTop(200)
scrollLeft()获取匹配元素相对滚动条左部的偏移
对可见元素和隐藏元素均有效$("div").scrollLeft()
scrollLeft(val)设置水平滚动条左侧的偏移
对可见元素和隐藏元素均有效$("div").scrollLeft(200)
注意:
offset方法是相对于当前窗口的相对偏移,而position方法是相对于父元素的偏移--选自《从零开始学习jQuery》
更多jquery的相关知识,可访问:web前端开发!!
怎样设置html的元素属性,Jquery怎么设置元素的属性和样式?相关推荐
- php 获取子孙,jquery如何查找后代元素?jquery获取后代元素方法
在上一篇我们讲到jquery获取父元素?相信你已经学会了,那么下面我们来讲一下jquery如何查找后代元素?jquery获取后代元素方法. 一: 查找后代元素三种方法 (1)children(): ( ...
- jq追加html属性,jQuery 操作 HTML 元素和属性的方法
jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容: text().html() 以及 val()方法 My Test JQuery $( ...
- html添加删除元素属性,jquery怎么删除元素的属性?
jquery怎么删除元素的属性?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在jquery中,可以使用removeAttr()方法来删除元素的属性.r ...
- HTML给表单元素赋值,JQuery表单元素取值赋值方法总结
一.普通文本框的赋值与取值 1.1.1赋值 jQuery 表单元素取值与赋值方法总结 function get(){ var test1 = $("input.test1").va ...
- jq在html中添加dom元素,使用jQuery添加DOM元素的最佳方法
所以我已经看到了三种向页面添加html/DOM元素的方法.我很好奇他们每个人的利弊是什么. 1 - 传统的JavaScript 我相信直接的JS方法是通过构造每个元素,设置属性,然后附加它们.例: v ...
- ajax中能不能设置编码,ajax-如何在.getJSON jQuery中设置编码
您需要使用Wireshark分析JSON调用,因此您将看到是否在JSON页面的构成中包含了字符集,例如: 如果页面很简单,如果是text / html 0000 48 54 54 50 2f 31 2 ...
- html 表单 元素 美化,jQuery表单元素美化
插件描述:richUI单选按钮,复选框,下拉框,css美化 更新时间:2020-08-01 21:13:17 更新说明:操作按钮方式一致, 如绑定事件等. 具体用法如下:$(function() { ...
- html元素data属性设置变量,HTML5 自定义属性 data-* 和 jQuery.data 详解
编辑注:HTML中使用data-xx="xx"开头标记的属性到底有什么用,直接使用xx="xx"不是更简单吗?其实data-xx是HTML5的一个属性,支持通过 ...
- jQuery:设置获取属性、遍历添加删除元素、尺寸、位置
目录 一.设置或获取元素属性值 1.设置或获取元素固有属性值 2.设置或获取元素自定义属性值attr() 3.数据缓存data() 二.获取元素内容 三.jQuery对元素操作 1.遍历元素 2.创建 ...
最新文章
- Verilog中关于case语句的优先级
- VS2015静态编译libcurl(C++ curl封装类)
- golang1.13环境变量保存路径 go env -w
- 找不到using System.Web.Script.Services 的问题
- JS正则表达式大全(整理详细且实用)
- 基于BERT的多模学习——VL-BERT篇
- 位数问题(信息学奥赛一本通-T1313)
- 使用urllib2库实现有道翻译
- Linux IPC POSIX 共享内存
- IDEA 社区版不支持 Tomcat?一招完美解决!
- appim自动化--点击指定控件的指定位置
- slam的回顾(一)
- SET FOREIGN_KEY_CHECKS = 0
- php tcpdf image,php采用tcpdf生成pdf支持中文,图片
- 计算机中计算排名用什么公式,最全面的Excel函数排名公式汇总
- rancher添加镜像库
- 树莓派YOLOV5连接手机摄像头
- 是时候转移百度网盘的文件了 MultCloud 来帮忙
- cocos2d-x屏幕适配原理
- python实现一个学生管理系统
热门文章
- PHP回调函数的几种用法
- 互联网金融真能救汽车电商的梦吗?
- 小米视频加载进度条效果实现
- hadoop 1.x升级至hadoop-2.2.0记录
- oracle数据源的报表sql计算慢解决
- linux centos7 yum 报错 Public key for *.rpm is not installed 解决方法
- couchdb 任意命令执行漏洞 cve-2017-12636
- linux centos7 设置开机 进入命令行 不进入图形界面
- pycharm 添加数据库驱动
- linux 开机提示 Kernel panic - not syncing: Attempted to kill init! 解决方案