js学习-基本属性操作

最新推荐文章于 2022-06-28 16:05:43 发布
最新推荐文章于 2022-06-28 16:05:43 发布
阅读量117 收藏
点赞数
分类专栏： js学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48235555/article/details/106650830
版权
parseInt(string, radix): 返回转换成整数的值

var test = parseInt(123); //123

test = parseInt(234, 0); //234

test = parseInt(0xabcdef); //自动转换成十六进制

test = parseInt(012344); //自动转换成八进制

字符串类型自动转换成整数型：

var test = parseInt(‘123’); //123

test = parseInt(‘234’, 0); //234

test = parseInt(‘0xabcdef’); //自动转换成十六进制

test = parseInt(‘012344’); //自动转换成八进制

test = parseInt(12, 2); //二进制

test = parseInt(45,8); //八进制

test = parseInt(45，16); //十六进制

test = parseInt(‘3king23’); //只能显示3，后面的23不能显示

test = parseInt(‘true‘); //非法的，显示：NaN

test = parseInt(true); //非法的, 显示：NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // oP.innerHTML	            => 读取p里面所有的html代码
        // oP.innerHTML = 123;		=> 替换p里面所有的html代码
        window.onload=function () {
            var oBtn = document.getElementById('btn1');  //括号里放的是id值
            var oText = document.getElementById('text1');
            var oSelect = document.getElementById('select1');
            var oImage = document.getElementById('img1');
            var oP = document.getElementById('p1');

            // oBtn.onclick = function(){
            //     alert(oBtn.type);
            //     alert(oBtn.id);
            // };
            // oBtn.onclick = function(){
            //     alert(oText.value);  //文本框里输入的文字可以通过获取value值来弹出来
            // };
            // oBtn.onclick = function(){
            //     alert(oSelect.value);
            // };
            // oBtn.onclick = function(){
            //     // 字符串连接
            //     // '淘宝' +  '北京'	 =>	'淘宝北京'
            //     // '淘宝' + '在' + '杭州'	 =>	'淘宝在杭州'
            //     alert(oText.value+'在'+oSelect.value);
            // };
            // oBtn.onclick = function () {
            //     // oBtn.value = 'button';
            //     // oText.value = '请输入';
            //     oText.value = oSelect.value;
            // };
            // oBtn.onclick = function () {
            //     oImage.src = oText.value;  //可以换成其他图片
            // };
            oBtn.onclick = function () {
                // alert(oP.innerHTML);
                oP.innerHTML = oText.value;
                alert(oP.innerHTML);
            }
        };
    </script>
</head>
<body>
<input id="text1" type="text" value="">
<br/>
<select name="" id="select1">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="杭州">杭州</option>
</select>
<input id="btn1" type="button" value="按钮">
<img id="img1" src="../1.jpg">
<br/>
<p id="p1">这是一段文字,可以改变</p>
</body>
</html>
js基本属性操作

1、获取id值、type值、value值

<script>
window.onload=function () {
    var oBtn = document.getElementById('btn1');  //括号里放的是id值
    var oText = document.getElementById('text1');
};
    
oBtn.onclick = function(){
     alert(oBtn.type);
     alert(oBtn.id);
};
oBtn.onclick = function(){
     alert(oText.value);  //文本框里输入的文字可以通过获取value值来弹出来
};
</script>

<body>
<input id="btn1" type="button" value="按钮">
<input id="text1" type="text" value="">
</body>

2、复选框的设置

<select name="" id="select1">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="杭州">杭州</option>
</select>

3、实现输入的字符与复选框的value值连接

oBtn.onclick = function(){
     // 字符串连接
     // '淘宝' +  '北京'	      =>	'淘宝北京'
     // '淘宝' + '在' + '杭州'	 =>	'淘宝在杭州'
    
     alert(oText.value + '在' + oSelect.value);
};

4、可以修改所有元素的value值

oBtn.onclick = function () {
      // oBtn.value = 'button';
      // oText.value = '请输入';
    
      oText.value = oSelect.value;
};

5、改变网页上的图片，只要输入新的src

<script>
window.onload=function () {
    var oText = document.getElementById('text1');
    var oImage = document.getElementById('img1');
};
    
oBtn.onclick = function () {
	oImage.src = oText.value;  //可以换成其他图片
};
</script>

<body>
    <input id="text1" type="text" value="">
	<img id="img1" src="../1.jpg">
</body>

6、读取html代码

// oP.innerHTML => 读取p里面所有的html代码
// oP.innerHTML = 123; => 替换p里面所有的html代码

<script>
window.onload=function () {
    var oText = document.getElementById('text1');
    var oP = document.getElementById('p1');
};
    
oBtn.onclick = function () {
	// alert(oP.innerHTML);
	oP.innerHTML = oText.value;
	alert(oP.innerHTML);
};
</script>

<body>
    <input id="text1" type="text" value="">
	<p id="p1">这是一段文字,可以改变</p>
</body>
利用上面知识创建：模拟手机短信发送
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 200px;
            height: 300px;
            border: solid 1px #000;
            background: #f1f1f1;
            padding: 20px;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var oSelect = document.getElementById('select1');
            var oText = document.getElementById('text1');
            var oBtn = document.getElementById('btn1');

            oBtn.onclick = function () {
                //添加：
                // oDiv.innerHTML =  oDiv.innerHTML  + oSpan.innerHTML + oText.value + '<br/>';
                oDiv.innerHTML +=  oSelect.value + oText.value + '<br/>';
                oText.value = '';
            };
        };
    </script>
</head>
<body>
    <div id="div1"></div>
    <select name="" id="select1">
        <option value="王诠胜：">王诠胜</option>
        <option value="李子维：">李子维</option>
        <option value="黄雨萱：">黄雨萱</option>
    </select>
    <input id="text1" type="text">
    <input id="btn1" type="button" value="提交">
</body>
</html>

在这里插入图片描述

文字放大缩小
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var oBtn1 = document.getElementById('btn1');
            var oBtn2 = document.getElementById('btn2');
            var oP = document.getElementById('p1');

            var num = 15;
            
            oBtn1.onclick = function () {
                num -= 2;
                oP.style.fontSize = num + 'px';
            };
            oBtn2.onclick = function () {
                num += 2;

                // oP.style.font-size;
                // JS 不允许出现"-"
                // font-size        fontSize
                // padding-top		paddingTop
                // margin-left		marginLeft
                oP.style.fontSize = num + 'px';
            }
        }
    </script>
</head>
<body>
    <input id="btn1" type="button" value="-">
    <input id="btn2" type="button" value="+">
    <p id="p1" style="font-size: 16px;">
        这节课我学习到了如何在网页里增加文字大小
    </p>
</body>
</html>

原始大小：

在这里插入图片描述

放大后：

在这里插入图片描述

缩小后：

在这里插入图片描述

kaka_hikun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 学习 - 提高篇
10-31
JavaScript 学习 - 提高篇 在本节课程中，我们将深入探讨 JavaScript 中的...本节课程涵盖了 JavaScript 中的对象、函数、constructor 函数等高级概念，旨在帮助学习者更好地理解 JavaScript 的基本原理和高级特性。
JavaScript学习笔记之数组基本操作示例
10-17
本篇学习笔记将深入探讨JavaScript数组的基本操作，包括定义、连接、排序、添加、删除和修改元素。 一、数组定义 在JavaScript中，定义数组有以下两种方式： 1. 直接通过方括号[]创建：`var a = [1, 2, 3];` 2. ...
js常见的属性和方法总结
qq_42349528的博客
09-28 1829
js常见的属性和方法，js全局属性和方法，数组的属性和方法，字符串的熟悉和方法
Js常用属性方法汇总
xcLeigh
05-14 1901
Js常用属性方法汇总js属性-常用的js属性功能介绍1.conca(); 连接字符串。2.indexOf(); 检索字符串，返回的是字符在字符串的下标3.substr(); 从起始索引号提取字符串中指定书目的字符4.数组array下面的方法4_1.slice[start,end];返回从原数组中指定开始下标到结束下标之间的项组成的新数组（原数组不变）,数组下表从0开始4_2.splice();方法向/从数组中添加/删除项目，然后返回被删除的项目。这种方法会改变原始数组。4_3.pop()；方法用于删除数组的
JS操作属性和样式及JS事件
Just8th的博客
06-28 444
JS操作属性和样式及JS事件学习笔记
js 属性
qq_44888570的博客
11-12 1571
js中的属性分为 数据属性 和 访问器属性。 数据属性 一个数据属性，有四个描述其行为的特性。 Configurable是否能通过删除该属性从而重新定义该属性，能否修改其特性，能否把属性修改为访问器属性。默认值为true。 Enumerable是否可枚举。默认值为true。 Writable 是否可重写（修改）。默认值为true。 Value数据值。默认值为undefined。 var obj = { name: 'zed' } 如果这样定义一个属性，那么它的Value
JS常用属性大全（三）
qq_36407811的博客
06-24 643
41.定义日期型变量:var today = new Date();42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dateObj.getHours(...
新手学习JQuery基本操作和使用案例解析
10-15
2. 属性操作： - `attr()`: 获取或设置元素的任意属性值。 - `removeAttr()`: 删除元素的某个属性。 - `prop()`: 获取或设置元素的固有属性（例如，checkbox的`checked`状态）。 - `removeProp()`: 删除元素的...
前端学习笔记-黑马程序员JS
最新发布
01-09
"前端学习笔记-黑马程序员JS" 本资源主要介绍了 JavaScript 的基本概念和语法，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象等知识点。 变量 在 JavaScript 中，变量可以在三种位置书写：...
javascript学习笔记(二) js一些基本概念
01-19
1.typeof 操作符：用于检测给定变量的数据类型 代码如下: var message=”some string”; alert(typeof message); //”string” alert(typeof(message)); //”string” alert(typeof 100); /...
js对属性的操作
weixin_33973600的博客
06-04 316
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .a{ ...
js属性操作
webZRH的博客
04-13 266
对象标签： [[proto]]:原型链 [[class]]：toString [[extensible]]：表示对象的属性是否可以添加。 object.preventExtensible(obj);//使obj对象不可新增属性，原属性可改、可删 Object.seal(obj);//使obj不可新增属性，原属性可改但不可删 Object.freeze(obj);//使obj不可新增属性
[转]JavaScript基本属性方法参考
威尔软件
12-27 121
JavaScript基本属性方法参考 作者：标哥来源：http://www.phpchina.com/bbs/thread-14911-1-1.html document.body.scrollTop 返回和设置当前竖向滚动条的坐标值，须与函数配合, document.body.scrollLeft 返回和设置当前横向滚动务的坐标值，须与函数配合， window.status=defa...
属性节点的操作(JS操作属性)（jQuery操作属性）（H5新增的属性操作）
weixin_42839080的博客
09-01 1554
首先,我们先搞清楚属性与属性节点是什么? 属性: 在对象中,我们说属性就是对象存储的数据,或则说对象身上保存的变量就是属性。在CSS的样式中，因为它也是键值对的形式，所以我们也称CSS样式属性。 操作属性的方法： 1、点语法： 对象.属性 = 属性值； （赋值） 对象.属性 (取值) 2、字符串语法： 对象[‘属性名称’] = 属性值； （赋...
js对象属性操作
wocaa2046的专栏
10-31 896
当你知道属性的名称的时候，使用点操作符。 这是一个使用点操作符读取对象属性的例子： var myObj = { prop1: "val1", prop2: "val2" }; var prop1val = myObj.prop1; // val1 var prop2val = myObj.prop2; // val2 第二种访问对象的方式就是中括号操作符([])，如果你想访问的属性的名称有一...
js操作属性
peichaohang的博客
01-05 507
js操作属性 DOM是为了操作文档（网页）的API，document是它的一个对象 整个文档加载完之后执行一个匿名函数：window.onload 修改下面div中的title元素 window.onload = function(){ document.getElementById('div1').title = "我看到了！"; } //调用document.getElementById（）...
自定义属性
qq_44378009的博客
12-05 821
1.5. 自定义属性操作 1.5.1 获取属性值 <div id="demo" index="1" class="nav"></div> <script> var div = document.querySelector('div'); // 1. 获取元素的属性值 // (1) element.属性 console.log(div.id); //(2) elemen...
JS基本类型与无法定义的属性
甘焕的博客
06-22 4735
在浏览器中，变量一旦声明为基本类型，则再也无法为其添加其他属性，示例如下：// 变量一旦声明为基本类型，则无法添加属性 var username = 'yiifaa' username.from = 'china' // 输出为undefined console.log(username.from)改为严格模式，再测试如上代码："use strict"; var username = 'yi
第4章--JavaScript对象.pptx
06-09
在第4章中，主讲人小刚老师介绍了JavaScript对象的基本概念和相关知识点。首先是对象的简介，对象是由属性和方法组成的数据结构，每个属性都有一个键（key）和对应的值（value）。通过对象，我们可以更加灵活地组织...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值