jQueryのファクトリー関数$()の素晴らしい使い方-jsチュートリアル-php.cn

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 オブジェクトは、1 つまたは複数の DOM オブジェクトをパッケージ化し、それらを均一に処理します。デフォルトでループ反復が付属しています。

4-2: DOM オブジェクトは、次の 1 つまたは複数の視覚要素に対応します。 jquery オブジェクトの素材を提供します

5. DOM オブジェクトと jquery オブジェクト間の変換:

5-1: DOM オブジェクトから jquery オブジェクトへ: $()

5-2: jquery オブジェクトから DOM オブジェクト: get (index) または [index]

注: $() は DOM オブジェクトのパッケージャーです。それを 1 つずつ取り出すだけで 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 中国語 Web サイトの他の関連記事を参照してください。