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; //一般以^開頭，以$ 結尾

             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.pswp.cn/news/249204.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/249204.shtml
英文地址，請注明出處：http://en.pswp.cn/news/249204.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！