jquery 구문 구조는 어떤 부분으로 구성되어 있나요?

jquery 구문 구조는 3개 부분으로 구성됩니다. 1. "()"의 매개 변수를 기반으로 HTML 문서의 요소를 검색하고 선택하고 해당 요소가 포함된 jquery 개체를 반환하는 팩토리 함수 "$()" . 선택기, 즉 팩토리 함수 "()"의 매개변수 3. 선택한 기능을 작동하는 데 사용되는 내장 메소드(함수).

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.

jQuery 문은 주로 세 부분으로 구성됩니다. $(), document 및 action()은 각각 팩토리 함수, 선택기 및 메서드라고 합니다.

구문:

 $(selector).action();

• selector selector

$（selector）

• method action()

jQuery对象.addClass（[样式名]）

$()

jQuery $는 획득을 의미하며 document.getElemenById("id name")와 동일하며, 물론 document.getElementsByClassName("class name")과도 동일합니다. 말이 되네요. $代表获取的意思，相当于document.getElemenById("id名")；当然，也相当于document.getElementsByClassName("class名")等等同上道理。

$符号主要是用于获得元素对象，通过获取对象，才能使用jquery方法对其进行操作。

$其实就是jQuery的别称，指的就是jQuery对象，而jQuery就是jQuery库提供的一个函数

这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素， 函数作用之一就是GetElementByID的代替，但()内不仅可以是ID，还可以是各类选择器

比如：

$(document)

$ 기호는 주로 요소 객체를 얻는 데 사용됩니다. 객체를 획득하면 jquery 메서드를 사용하여 해당 객체를 조작할 수 있습니다.

$는 실제로 jQuery의 다른 이름으로 jQuery 객체를 지칭하며, jQuery는 jQuery 라이브러리에서 제공하는 함수입니다.

이 함수의 기능은 html 문서에 있는 매개변수를 기반으로 요소를 검색하고 선택하는 것입니다. () 함수의 기능은 GetElementByID를 대체하는 것이지만 ()는 ID일 뿐만 아니라 다양한 선택기가 될 수도 있습니다

예:

$(document)는 전체 문서 개체

그냥 $를 대신 사용해도 됩니다. 이름 충돌을 방지하기 위해 jQuery 라이브러리는 jQuery 함수에 추가 별칭을 제공하는 추가 메커니즘을 제공합니다. 예:

var jq = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

코드에서 jQuery 및 $ 대신 jq를 사용할 수 있습니다.

간단히 말하면, $는 jquery 객체이고, $()는 jQuery()이며, 여기에 매개변수를 전달할 수 있고, 그 기능은 요소를 가져오는 것입니다.

jquery의 선택기

jQuery 선택기를 사용하면 HTML 요소 그룹이나 개별 요소에 대한 작업을 수행할 수 있습니다.

jQuery 선택기는 요소의 ID, 클래스, 유형, 속성, 속성 값 등을 기반으로 HTML 요소를 "찾기"(또는 선택)합니다. 이는 일부 사용자 정의 선택기 외에 기존 CSS 선택기를 기반으로 합니다.

1.기본 선택기

$("#test")             　　　　   选择id值为test的元素，id值是唯一的所以返回单个元素。
$("div")               　　　　   选择所有的div标签元素，返回div元素数组 
$(".myclass")          　　　　   选择使用myclass类的css的所有元素 
$("*")                 　　　　   选取所有元素。
$("#test,div,.myclass")  　　    选取多个元素。

2.계층적 선택기

$("div span") 　　　　　　　　　　  选取<div>里的所有<span>元素
$("div >span")   　　　　　　　　  选取<div>元素下元素名是<span>的子元素
$("#one +div")   　　　　　　　　  选取id为one的元素的下一个<div>同辈元素    　　　　等同于$("#one").next("div")
$("#one~div")    　　　　　　　　  选取id为one的元素的元素后面的所有<div>同辈元素    等同于$("#one").nextAll("div")
$("#one").siblings("div") 　　   获取id为one的元素的所有<div>同辈元素（不管前后）
$("#one").prev("div") 　　 　　 　获取id为one的元素的前面紧邻的同辈<div>元素

所以 获取元素范围大小顺序依次为：
$("#one").siblings("div")>$("#one~div")>$("#one +div")  
或是
$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")

3.기본 필터링 선택기

$("div:first")               　　选取所有<div>元素中第1个<div>元素
$("div:last")                   选取所有<div>元素中最后一个<div>元素
$("input:not(.myClass)")        选取class不是myClass的<input>元素 
$("input:even")                 选取索引是偶数的<input>元素(索引从0开始) 
$("input:odd")                  选取索引是基数的<input>元素(索引从0开始) 
$("input:eq(2)")                选取索引等于2的<input>元素 
$("input:gt(4)")                选取索引大于4的<input>元素
$("input:lt(4)")                选取索引小于4的<input>元素
$(":header")                    过滤掉所有标题元素，例如：h1、h2、h3等
$("div:animated")               选取正在执行动画的<div>元素  
$(":focus")                     选取当前获取焦点的元素

4.콘텐츠 필터링 선택기

$("div:contains(&#39;Name&#39;)")       选取所有<div>中含有&#39;Name&#39;文本的元素 
　　
$("div:empty")                  选取不包含子元素（包括文本元素）的<div>空元素 

$("div:has(p)")                 选取所有含有<p>元素的<div>元素 

$("div:parent")                 选取拥有子元素的（包括文本元素）<div>元素

5 .가시성 필터링 선택기

　　　　$("div:hidden")                 选取所有不可见的<div>元素 

　　　　$("div:visible")                选取所有可见的<div>元素

6. 속성 필터 선택기

$("div[id]")              　　　　选取所有拥有属性id的元素
$("input[name=&#39;test&#39;]")     　　 选取所有的name属性等于&#39;test&#39;的<input>元素 
 
$("input[name!=&#39;test&#39;]")  　　　　选取所有的name属性不等于&#39;test&#39;的<input>元素 
 
$("input[name^=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;开头的<input>元素 
$("input[name$=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;结尾的<input>元素 
$("input[name*=&#39;news&#39;]")        选取所有的name属性包含&#39;news&#39;的<input>元素 
$("div[title|=&#39;en&#39;]")           选取属性title等于&#39;en&#39;或以&#39;en&#39;为前缀(该字符串后跟一个连字符&#39;-&#39;)的<div>元素
$("div[title~=&#39;en&#39;]")           选取属性title用空格分隔的值中包含字符en的<div>元素

$("div[id][title$=&#39;test&#39;]")     选取拥有属性id,并且属性title以&#39;test&#39;结束的<div>元素

7. 하위 요소 필터 선택기

$("div .one:nth-child(2)")       选取class为&#39;one&#39;的<div>父元素下的第2个子元素

$("div span:first-child")        选取每个<div>中的第1个<span>元素 

$("div span:last-child")         选取每个<div>中的最后一个<span>元素 

$("div button:only-child")       在<div>中选取是唯一子元素的<button>元素

8. 양식 개체 속성 필터 선택기

$("#form1 :enabled")             选取id为'form1'的表单内所有可用元素
$("#form2 :disabled")            选取id为'form2'的表单内所有不可用元素 
$("input :checked")              选取所有被选中的<input>元素 　　
$("select option:selected")      选取所有的select 的子元素中被选中的元素

9. jque의 메서드 리

jquery 내장 메서드(함수), 선택한 함수를 조작하는 데 사용됨예:

요소 스타일을 직접 조작하는 메서드CSS 속성css()height()offset()position()scrollLeft()scrollTop()width()

Description
일치하는 요소의 스타일 속성을 설정하거나 반환합니다.
일치하는 요소의 높이를 설정하거나 반환합니다.
문서를 기준으로 첫 번째로 일치하는 요소의 위치를 ​​반환합니다.
상위 요소를 기준으로 첫 번째로 일치하는 요소의 위치를 ​​반환합니다.
스크롤 막대의 왼쪽을 기준으로 일치하는 요소의 오프셋을 설정하거나 반환합니다.
스크롤 막대 상단을 기준으로 일치하는 요소의 오프셋을 설정하거나 반환합니다.

일치하는 요소의 너비를 설정하거나 반환합니다.

요소 스타일을 간접적으로 조작하는 방법jquery에서는 요소 속성을 조작하여 요소 스타일을 간접적으로 조작할 수 있습니다. Method addClass()attr()prop()removeAttr()removeClass()toggleClass()

Description
일치하는 요소에 지정된 클래스 이름을 추가합니다.
일치하는 요소의 속성과 값을 설정하거나 반환합니다.
선택한 요소의 속성/값을 설정하거나 반환합니다.
일치하는 모든 요소에서 지정된 속성을 제거합니다.
일치하는 모든 요소에서 전체 또는 지정된 클래스를 제거합니다.

일치하는 요소에서 클래스를 추가하거나 제거합니다. 🎜🎜🎜🎜

지식 확장:

DOM 모델

DOM에는 다양한 유형의 노드가 있으며 일반적으로 요소 노드, 텍스트 노드 및 속성 노드의 3가지 유형으로 나뉩니다.

DOM 개체

JavaScript에서는 getElementsByTagName() 또는 getElementsById()를 사용하여 요소 노드를 가져올 수 있습니다. 결과는 JavaScript의 메서드를 사용할 수 있는 DOM 개체입니다.

jQuery 객체

DOM 객체를 jQuery로 래핑하여 생성된 객체는 jQuery의 메소드를 사용할 수 있습니다.

예: $("#title").html(); //id가 title인 요소 내에서 html 코드 가져오기

[document.getElementsById("title").innerHTML과 동일]

jQuery object 및 DOM 객체의 상호 변환

1) jQuery 객체를 DOM 객체로 변환

①jQuery 객체는 배열류 객체이며, 해당 DOM 객체는 [index] 메소드를 통해 얻을 수 있습니다.

②get(index) 메소드를 통해 해당 DOM 객체를 가져옵니다.

2) DOM 개체를 jQuery 개체로 변환

jQuery 개체를 얻으려면 $() 함수를 사용하여 DOM 개체를 래핑해야 합니다.

【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상】

위 내용은 jquery 구문 구조는 어떤 부분으로 구성되어 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!