JS对象与jQuery对象

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;//一般以开头,以/g; //一般以^开头,以/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://www.mzph.cn/news/249204.shtml

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

相关文章

Nginx Slab内存管理

L38 Slub内存管理适用 ngx_http_limit_conn_module、ngx_http_limit_req_module 模块场景 我们可以用阿里第三方模块Slab_Stat模块 并且用add-module 方式编译进openresty中 转载于:https://www.cnblogs.com/jackey2015/p/10684151.html

Node.js异步库async

async的使用需要安装第三方包 1.串行无关联 async.series 函数依次执行,后面不需要调前面步骤的结果 程序执行时间为所有步骤之和 2.并行无关联 async.paraller 某步出错不影响其他步骤执行 程序执行时间为最长的那个时间 3.串行有关联 async.waterfall 函数依次执行,后面需要…

vue的双向绑定原理及实现

前言 使用vue也好有一段时间了&#xff0c;虽然对其双向绑定原理也有了解个大概&#xff0c;但也没好好探究下其原理实现&#xff0c;所以这次特意花了几晚时间查阅资料和阅读相关源码&#xff0c;自己也实现一个简单版vue的双向绑定版本&#xff0c;先上个成果图来吸引各位&a…

作业——8

这个作业属于哪个课程C语言程序设计Ⅱ这个作业的要求在哪里C语言作业评价标准我在这个课程的目标是指针与字符串这个作业在哪个具体方面帮助我实现目标使用指针与字符串参考文献指针和字符串&#xff08;基础知识&#xff09;第七周作业 一 1 、使用函数删除字符串中的字符 输入…

Vue实现组件props双向绑定解决方案

注意&#xff1a; 子组件不能直接修改prop过来的数据&#xff0c;会报错 方案一&#xff1a; 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本&#xff0c;emit一个函数 通知到组件外 HelloWorld组件代码如下…

Flask系列06--(中间件)Flask的特殊装饰器 before_request,after_request, errorhandler

一.使用 Flask中的特殊装饰器(中间件)方法常用的有三个 app.before_request # 在请求进入视图函数之前app.after_request # 在请求结束视图函数之后 响应返回客户端之前app.errorhandler(404) # 重定义错误信息before_request def func():passafter_request def func(ret): # …

CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

最近看了很多这方面的文章&#xff0c;能搜到的基本看了个遍&#xff0c;但感觉还是似懂非懂&#xff0c;知道这个东西&#xff0c;很难说出这是个什么东西&#xff0c;先整理一些概念&#xff0c;慢慢消化&#xff0c;以后慢慢探索其中的原因。 1、PX(CSS pixels) 1.1 定义 …

【转】10条你不可不知的css规则

10条你不可不知的css规则 Posted on 2006-12-20 10:33 雨中太阳 阅读(343) 评论(1) 编辑 收藏 &#xff1a;【译】10条你不可不知的css规则正文&#xff1a; Published December 6th, 2004 in CssStaff Tags: No Tags. 原文地址&#xff1a;Ten CSS Tricks You May not Know k…

Python 面向对象【1】

对象 属性 方法面向对象特征&#xff1a;分装 继承 多态【不同对象对同一方法响应不同行动】类定义class xxx:........类对象类对象支持两种操作&#xff1a;属性引用和实例化 属性引用 使用和 Python 中所有的属性引用一样的标准语法&#xff1a;类对象名.属性名 类对象创建…

福大软工 · 第八次作业(课堂实战)- 项目UML设计(团队)

1、队伍信息&#xff1a; 队伍名称&#xff1a;彳艮彳亍团队 学号名本次作业博客链接031602219奇豪(队长)https://www.cnblogs.com/S031602219/p/9822576.html041602209毓明http://www.cnblogs.com/mingsonic/p/9820702.html041602204水源http://www.cnblogs.com/littlenorthwe…

【转发】实现yolo3模型训练自己的数据集总结

原文链接&#xff1a;实现yolo3模型训练自己的数据集总结 经过两天的努力&#xff0c;借鉴网上众多博客&#xff0c;在自己电脑上实现了使用yolo3模型训练自己的数据集并进行测试图片。本文主要是我根据下面参考文章一步步实施过程的总结&#xff0c;可能没参考文章中那么详细&…

Django Form和ModelForm组件

Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时&#xff0c;都会写一些获取用户输入的标签并且用form标签把它们包起来。 与此同时我们在好多场景下都需要对用户的输入做校验&#xff0c;比如校验用户是否输入&#xff0c;输入的长度和格式等正不正确。如果用户输…

ESLint 规则详解

前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint&#xff0c;极大地方便了大家对 Javascript 代码进行代码规范检查。这个工具包含了 200 多条 Javascript 编码规范且运行迅速&#xff0c;是几乎每个前端项目都必备的辅助工具。可是&#xff0c;这么多规则&#xff0c;每…

全文搜索引擎 ElasticSearch 还是 Solr?

原文链接 最近项目组安排了一个任务&#xff0c;项目中用到了全文搜索&#xff0c;基于全文搜索 Solr&#xff0c;但是该 Solr 搜索云项目不稳定&#xff0c;经常查询不出来数据&#xff0c;需要手动全量同步&#xff0c;而且是其他团队在维护&#xff0c;依赖性太强&#xff0…

NodeJS作为Web架构中间层的使用

截至2016年12月&#xff0c;中国网民规模已达7.31亿。传统的网站系统是否能够支撑得起如此庞大的且不断增长的用户访问并且为用户提供体验友好的页面&#xff1f; 一、传统的前后端&#xff1a; 二、传统的前后端分离问题&#xff1a; 性能问题&#xff1a; 1、渲染、数据都在…

windows server 2012 流媒体服务器搭建(直播与点播)

IIS Live Smooth Streaming&#xff08;实时平滑流式处理&#xff09;是微软下一代流媒体解决方案。该技术是在IIS web中集成媒体传输平台IIS media services&#xff0c;实现利用标准 HTTP Web 技术以及高级 Silverlight 功能&#xff0c;确保在互联上传输质量最佳、播放流畅音…

Vue warn Failed to mount component: template or render function not defined

问题如图&#xff0c;造成这类的问题一般有这么几个原因。 代码的拼写问题&#xff0c;当然这是最低级的错误vue定义的问题&#xff0c;这里我说明两点 在组件内部定义组件时&#xff0c;template 对应的必须是html字符串引用外部组件时&#xff0c;vue文件必须以template标签…

Python实现线性回归2,梯度下降算法

接上篇 4.梯度下降算法 《斯坦福大学公开课 &#xff1a;机器学习课程》吴恩达讲解第二课时&#xff0c;是直接从梯度下降开始讲解&#xff0c;最后采用向量和矩阵的方式推导了解析解&#xff0c;国内很多培训视频是先讲解析解后讲梯度下降&#xff0c;个人认为梯度下降算法更为…

mac 下用 brew 安装mongodb

mac 下安装mongoDB一般俩种方法. (1)下载源码,解压,编译,配置,启动 比较艰难的一种模式. (2)brew install mongodb ,然后就可以悠闲的品一口茶,顺便瞄一眼网易新闻,这是一种傻瓜模式. 但傻瓜模式也有人为干预的时候,粗略说一下使用brew 安装mongodb 1 zhangzhimoke:~/code$…

比较python类的两个instance(对象) 是否相等

http://www.yihaomen.com/article/python/281.htm 比较python类的两个instance(对象) 是否相等 作者:轻舞肥羊 日期:2012-10-25 字体大小: 小 中 大对于同一个Class,可以创建不同的实例(instance), 如何比较这两个 instance 是否相等呢&#xff1f;我们知道&#xff0c;对于计算…