JS对象与jQuery对象

article/2025/9/21 1:30:23

JS对象大致可以分为三种,如下图:

JS常用内置对象(JS自身所持有的对象,不需要创建,直接可用):

String:API跟java的字符串API大致相同

两种创建对象的方式:String s1 = "hello world"; 

                                  String s2 = new String("hello world");

String有length属性,但是在java中String是有length方法的;其含义是不一样的。

Number:是数值对象

创建对象:var myNum = 123456;

Boolean:跟java的布尔类似

Array:有length属性,而且数组长度是可变的;

创建对象:var a1 = new Array();

                 var a2 = new Array(7);

                 var a3 = new Array(100,"a",true);

                 var a4 = [100,200,300];

访问数组元素: a1[0] = 1;//a1长度由0变成了1

                        console.log(a3[1]);

Math:对象用于执行数学任务,有相应的API

Date:是JS中操作日期的对象,与java雷士,有相应的API

RegExp:正则表达式对象

创建方式:var regExp = /^\d{3,6}$/g;    //一般以^开头,以$结尾

                 var regExp1 = new RegExp("/^\d{3,6}$/");

注意:正则表达式对象,后续可以接两个参数,第一个参数,是正则表达式,第二个参数可以是g或者i;其中g表示设定当前匹配为全局模式;i表示忽略匹配中大小写的检测。

Function:JS中的函数就是Function对象,函数名就是指向Function的引用

                 使用函数名是可以访问对象;函数名()是调用函数

JS外部对象(由浏览器提供的,可以直接访问、操作浏览器;是浏览器提供的API,也是一套对象):

BOM:浏览器对象模型,用来访问和操作浏览器窗口的;如下图:


DOM:文档对象模型,用来操作文档的;如下图:


BOM与DOM的关系:


其中细节就不详解了,因为只是介绍对象,并不是接受BOM和DOM的操作。

自定义对象:

直接创建对象:var stu = {"name":"张三","age":"18","job":function(){}};//相当于一个JSON对象

构造器创建对象:

	function f2(){var teacher = new Object();teacher.name = "老师";teacher.age = 18;teacher.sex = "woman";teacher.work = function(){alert("我教书的")};alert(teacher.name);alert(teacher.age);teacher.work()}//自定义构造器,//1.函数做成构造器首字母要大写//2.声明好要传入的参数//3.将参数存入对象内部function Coder(name,age,work){//this就是当前创建出来的对象//this.name是给该对象增加一个属性//=name是将参数赋值给这个属性this.name = name;this.age = age;this.work = work;}function f3(){var coder = new Coder("李四",30,function(){alert("我是小白")});alert(coder.name);alert(coder.age);coder.work();}
	<input type="button" value="内置构造器"οnclick="f2();"/><input type="button" value="自定义构造器"οnclick="f3();"/>

使用jQuery可能存在3中对象:

1.jQuery对象:

    通常jQuery选择器选中的目标一定是jQuery对象;

    一般jQuery方法若返回节点则是jQuery对象;

    一般jQuery赋值的方法返回的是jQuery对象;  

2.DOM对象:

    从jQuery中获取一个DOM对象:$obj[i]/$obj.get(i)(jQuery方法); 

    jQuery转换为一DOM对象的方法:jQuery加一个下标转换;

3.内置对象(尤其是字符串)

    一般jQuery返回具体的值则是String

    注:万能方法:输出对象观察 

举例:

jQuery对象与DOM对象之间的相互转换,如下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对象</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>//jQuery转为DOM的方法:jQuery加一个下标转换function print(){//取到所有的p,选择器获取的jquery对象var $ps = $("p");console.log($ps.typeof);for(var i=0;i<$ps.length;i++){console.log($ps[i]);alert($ps[i].innerHTML);}}//DOM转jQuery的方法//传入的this是正在点击的那张图片,此处的this(img)是一个DOM对象function chg(img){//没写参数就是取值,写了就是设置值if($(img).width()=="1000"){$(img).width("250px").height("250px");}else{$(img).width("1000px").height("701px");}}
</script>
</head>
<body><input type="button" value="打印" οnclick="print()"/><p>1.jQuery对象本质上是DOM数组</p><p>2.jQuery对象和DOM对象可以互转</p><p>3.jQuery对象只能调用jQuery方法</p><p>4.DOM对象只能调用DOM方法</p><div><img src="../image/4.jpg" οnclick="chg(this);"/><img src="../image/5.jpg" οnclick="chg(this);"/><img src="../image/6.jpg" οnclick="chg(this);"/></div>
</body>
</html>

http://chatgpt.dhexx.cn/article/NrfJEfkM.shtml

相关文章

前端之JS对象

前端之JS对象 1.对象基础对象的定义子命名空间访问内容用点表示法 和 括号表示法 设置对象成员更新数据创建新成员 "this"的含义document 对象 2.面向对象的程序&#xff08;OOP&#xff09;类继承多态构建函数和对象构建函数的规范写法 真正的构造函数创建对象的其他…

js对象基本知识

一&#xff1a;对象的声明与调用 方法1&#xff1a;利用对象字面量创建对象 var obj{}; 创建了一个空对象 属性和值之间用: 结尾用, :后面跟了一个匿名函数 var obj{name:"李旭亮",sex:"男",age:22,sayHi:function(){console.log(hello!);}}使用对象 调用…

JS 对象

一、对象 1、对象概念 对象&#xff08;object&#xff09;&#xff1a;JavaScript里的一种数据类型可以理解为是一种无序的数据集合用来描述某个事物&#xff0c;例如描述一个人  人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能  如果用多个变量保存则比较散&am…

JS对象中常见的操作方法

本文内容&#xff1a; 介绍对象的两种类型创建对象并添加属性访问对象属性删除对象属性作为函数参数枚举对象的属性数据类型检测Object常用的API 一、JavaScript对象有两种类型 Native&#xff1a;在ECMAScript标准中定义和描述&#xff0c;包括JavaScript内置对象&#xff08;…

JS对象详解

JS对象详解 js的对象是什么&#xff1f;js的对象类型有哪些&#xff1f;具体实例是什么&#xff1f; 一、ECMA-262对JS对象的定义&#xff1a; 属性的无序集合&#xff0c;每个属性存放一个原始值、对象或函数&#xff1b; 对象是无特定顺序的值的数组&#xff1b; 对象是一…

初学JavaScript:js中的对象(对象+原型对象)

文章目录 js对象详解1、创建对象字面量模式创建对象构造函数模式创建对象 2、访问对象访问属性访问方法 3、遍历对象中的属性和属性值4、往对象中新添属性5、删除对象中的属性6、Object显示类型转换(强制类型转换)7、检查属性所属对象7.1 in7.2 Object.prototype.hasOwnPropert…

java testng_java—TestNG单元测试框架

//依赖坐标 org.testng testng 6.14.3 test TestNG的常用注解 1、Test 标记为测试方法 2、 BeforeMethod/AfterMethod 在某个测试方法(method)执行之前/结束之后 3、BeforeClass/AfterClass 在某个测试类(class)所有开始之前/结束之后 4、BeforeTest/AfterTest 在某个测试(test…

TestNG教程三:TestNG中的监听

TestNG中的监听 1.使用监听的目的&#xff1a; Testng虽然提供了不少强大的功能和灵活的选项&#xff0c;但不能解决所有的问题&#xff0c;使用监听器就是用来定制额外的功能以满足我们的需求的&#xff1b; 2.监听器具体实现&#xff1a; 监听器实际上是一些预定义的java接…

TestNG教程二:testNG常用测试类型

1.异常测试 package com.testngdemo; import org.testng.annotations.Test; public class test { Test(expectedExceptions ArithmeticException.class ) public void divisionWithException() { int i 1 / 0; System.out.println("After division the value of i is…

TestNg学习

TestNG是一个测试框架&#xff0c;可以简化广泛的测试需求。 建立工程 首先我们在idea中应该新建一个project&#xff0c;并选择“maven”&#xff0c;点击下一步&#xff08;如下图&#xff09; 填写groupId&#xff08;一般为包名&#xff09;和ArtifactId&#xff08;一般…

TestNG教程一:testNG简介

1.TestNG是什么? TestNG是一个测试框架&#xff0c;其灵感来自JUnit和NUnit&#xff0c;但引入了一些新的功能&#xff0c;使其功能更强大&#xff0c;使用更方便。 TestNG是一个开源自动化测试框架;TestNG表示下一代(Next Generation的首字母)。 TestNG类似于JUnit(特别是JU…

TestNG用法

【bak】https://www.cnblogs.com/uncleyong/p/15855473.html TestNG简介 单元测试框架&#xff0c;可以用来设计用例的执行流程 创建maven项目&#xff0c;添加依赖 <dependency><groupId>org.testng</groupId><artifactId>testng</artifactId>&…

testNG - 无法访问org.testng.Assert

【异常】无法访问org.testng.Assert 问题表现问题排查问题解决 问题表现 问题排查 报错的是无法访问Assert类&#xff0c;我琢磨着这个类是testNG中很常用的一个类&#xff0c;怎么会找不到&#xff1f; 先从项目的jar包中管理入手&#xff0c;看看有没有其他毛病。 果不其然…

TestNG-学习笔记

https://testng.org/doc/documentation-main.html TestNG概述 TestNG is a testing framework inspired from JUnit and NUnit but introducing some new functionalities that make it more powerful and easier to use, such as: Annotations. Run your tests in arbitrar…

TestNG的使用

testng在maven项目中的使用 pom.xml <dependencies><dependency><groupId>org.testng</groupId><artifactId>testng</artifactId><version>7.4.0</version><scope>test</scope></dependency> </depend…

TestNG

1 TestNG简介 TestNG是Java中的一个测试框架&#xff0c;是一个目前很流行实用的单元测试框架&#xff0c;有完善的用例管理模块&#xff0c;配合Maven能够很方便管理依赖第三方插件。 TestNG消除了大部分的旧框架的限制&#xff0c;使开发人员能够编写更加灵活和强大的测试。…

TestNG自动化测试框架详解

TestNG 文章目录 TestNG一、概述与使用1.1 配置环境1.2 测试方法1.3 使用xml文件 二、测试方法常用注解2.1 配置类注解2.2 非配置类注解2.2.1 Parameters2.2.2 DataProvider 三、依赖测试四、忽略测试五、超时测试六、分组测试七、失败重试机制7.1 IRetryAnalyzer接口7.2 测试方…

TestNG整理

1 基本概念 TestNG:即Testing, Next Generation,下一代测试技术,是根据JUnit和NUnit思想,采用jdk的annotation技术来强化测试功能并借助XML 文件强化测试组织结构而构建的测试框架。最新版本5.12,Eclipse插件最新版本:testng-eclipse-5.12.0.6 TestNG的应用范围: 单…

TestNG使用教程详解

一、TestNG介绍 TestNG是Java中的一个测试框架&#xff0c; 类似于JUnit 和NUnit, 功能都差不多&#xff0c; 只是功能更加强大&#xff0c;使用也更方便。 详细使用说明请参考官方链接&#xff1a;TestNG - Welcome WIKI教程&#xff1a;TestNG - 小组测试( Group Test)_学习…

TestNG单元测试框架详解

目录 前言 ​1. TestNG使用流程 1.1TestNG安装 1.2 创建Maven项目 1.3 Maven配置 1.4 项目TestNG测试类 1.5 运行TestNG 2、TestNG常用注解 3.xml方式运行 3.1 鼠标右击testng.xml运行 3.1 使用maven运行 4. 常用的断言&#xff08;assert&#xff09; 5. TestNG预…