jQuery的工廠函數$()的妙用-js教程-PHP中文網

jQuery的工廠函數$()的妙用

无忌哥哥

發布： 2018-06-29 10:49:22

原創

3498 人瀏覽過

jQuery的工廠函數$()的妙用

1.理解DOM結構:祖先元素,父元素,子元素,兄弟元素,每一個元素都是DOM物件

2.必須先用工廠函數$()將DOM物件轉為jQuery物件,才可以使用jQuery中的方法

3.$(選擇器): 將選擇取得到的DOM物件包裝/轉換為jquery物件

4.jQuery物件與DOM物件的區別:

4-1:jquery物件是將一個或群組一組DOM物件進行打包,統一處理,預設自帶循環迭代

4-2:DOM物件對應著頁面中一個或多個視覺元素,它提供jquery物件原料

#5.DOM物件與jquery物件之間的轉換:

5-1:DOM物件轉jquery物件: $()

5-2:jquery物件轉DOM物件: get(index)或[index]

#註: $()就是一個DOM物件打包器,只要逐一取出來就是DOM物件

6.$()總結: 將DOM物件轉為jQuery物件,以便使用jQuery方法對頁面元素進行統一快速的處理

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的工厂函数$()的妙用</title>
</head>
<body>
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
<li>我是列表项5</li>
</ul>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//任务:将第一个列表项背景换成天蓝色
//1.先用原生的js来实现:getElementsByTagName()是原生DOM对象上的方法
// document.getElementsByTagName(&#39;li&#39;)[0].style.backgroundColor = &#39;skyblue&#39;
//2.用jqery来实现 :css()是定义在jquery对象上的方法
// $(&#39;li:first-child&#39;).css(&#39;backgroundColor&#39;,&#39;skyblue&#39;)
//思考?能不能直接在jQuery对象上调用原生DOM对象的方法呢?答案是否定的
// $(&#39;li:first-child&#39;).style.backgroundColor = &#39;skyblue&#39;
//思考?能不能在原生DOM对象上面调用jquery中的方法呢?答案是否定的
// document.getElementsByTagName(&#39;li&#39;)[0].css(&#39;backgroundColor&#39;,&#39;skyblue&#39;)
//这是为什么呢?,因为这是二个不同的对象,下面我们进行测试
// document.write((document.getElementsByTagName(&#39;li&#39;)[0] === $(&#39;li:first-child&#39;)) ? &#39;我们完全一样&#39; : &#39;我们不一样&#39;)
//将jquery对象转为DOM对象,再调用原生对象方法
$(&#39;li&#39;)[0].style.backgroundColor = &#39;coral&#39;
$(&#39;li&#39;).get(2).style.backgroundColor = &#39;cyan&#39;
//将DOM对象转为jquery对象,就是使用工厂函数 $(),前面已说过,不更多言
</script>
</body>
</html>

登入後複製

以上是jQuery的工廠函數$()的妙用的詳細內容。更多資訊請關注PHP中文網其他相關文章！