집 >웹 프론트엔드 >JS 튜토리얼 >jQuery의 팩토리 함수 $()의 놀라운 사용

jQuery의 팩토리 함수 $()의 놀라운 사용

无忌哥哥원래의: 2018-06-29 10:49:223520검색

jQuery의 팩토리 함수 $()

1. DOM 구조 이해: 조상 요소, 부모 요소, 자식 요소, 형제 요소, 각 요소는 DOM 객체입니다

2 먼저 팩토리 함수를 사용해야 합니다. () DOM 개체를 jQuery 개체로 변환해야만 jQuery

3.$(선택기)의 메서드를 사용할 수 있습니다. 선택한 DOM 개체를 jquery 개체로 압축/변환합니다

4. jQuery 개체와 DOM의 차이점 object:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery 循环对象 dom 选择器

성명：

이전 기사：jQuery 다운로드 및 소개다음 기사：jQuery 다운로드 및 소개