JQuery DOM의 일반적인 방법을 요약합니다.-JS 튜토리얼-php.cn

1. jquery 객체의 기본 방법:

(1) get(); 일치하는 요소 모두 가져오기
(2) get(index); 일치하는 요소 중 하나 가져오기 $(this).get(0)은 $와 동일합니다. (this)[0]
(3) Number index(jqueryObj); 하위 객체 검색
(4) Each(callback); foreach와 유사하지만 요소 배열을 순회합니다
예:

$("img".each(function(index){
    this.src = "test" + index + ".jpg";
 });

로그인 후 복사

return 사용 false; true 반환; 중단 및 계속을 나타내는 함수

(5) length, size(); 모두 요소의 총 값을 반환합니다.

이때 $

대신 dom.query를 사용하세요. 2. JQuery 선택기

(1) 기본:

*는 모든 DOM 요소와 일치합니다.

.classname은 지정된 클래스 이름을 가진 DOM 요소와 일치합니다.

요소(DOM 태그 이름)는 모두 일치합니다. 지정된 이름을 가진 DOM 요소 DOM 요소

id는 지정된 ID를 가진 DOM 요소

와 일치하며 로 구분되어 여러 선택 조건 중 하나와 일치함을 나타냅니다.

(2) 수준:

하나 선택 [공백] 두 개 선택을 의미합니다. 두 번째 조건을 충족하는 요소를 선택합니다. 모든 요소

1개 선택[>]2개 선택은 조건 2를 충족하는 선택 요소 중 첫 번째 요소를 의미합니다

1개 선택[+]2개 선택은 조건 2를 충족하는 다음 요소가 다음으로 선택됨을 의미합니다

하나 선택[~]두 개 선택은 조건 두 형제의 모든 요소 선택을 나타냅니다.

(3) 연산자

:animated 애니메이션 요소

:eq(index) 인덱스 위치, 예: $("div:eq(1) "

:짝수 요소

dd . 제목 요소

: 마지막
:not(Selector) 제외
:contains(string) 선택한 개체에
:empty가 포함되어 있습니다. 선택한 개체가 비어 있습니다.
:has(Selector) Contains
:parent 비어 있는 것과 반대로

:first-child

: last-child
:nth-child(index)
nly-child 수 유일한 하위 요소

form:text :checkbox :radio :image :file : submit :reset :password :button

form Status

:checked :disabled :enabled :selected

Visibility

:hidden :visible

속성 및 해당 연산자

[속성 이름] 지정된 항목을 포함하는 요소와 일치합니다. attribute

[att=value] 동등 위의

[att*=value] through out through ''s'''' out's out's out out out out out out out out out out's to ' s'' 's'' 's' 's'' s'''' right through out's' together''' through's' together's' through through through through through through through through through so through through together off together off 아웃 아웃 오프 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 아웃 그래서 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 to to to to to to to to to to to totos [att3]... 여러 속성 조건 중 하나와 일치

3. JQuery DOM의 일반적인 작업

(수행할 수 있는 일반적인 작업을 나타냄) 선택기, 즉 JQuery 객체 인스턴스의 메소드를 통해 DOM을 필터링한 후)

1. 속성 작업(참고: attr(name), html(), val()은 첫 번째 일치하는 요소에서만 작동하는 메소드입니다. , 나머지는 모두에 대해 작동합니다)

attr(name); 일치하는 요소 얻기 첫 번째 요소에 의해 지정된
attr(key, fn) 및 attr(key, value) 속성은 모든 일치 요소에 대한 속성 값을 설정합니다. 전자의 매개변수는 함수이고 값은 이
함수의 반환값입니다. Value

attr(properties) 다음과 같이 일치하는 모든 요소에 대해 하나 이상의 속성 값을 설정하려면 키-값 쌍을 사용하세요. "img".attr({ src: "test.jpg", alt: "Test Image" });

removeAttr(name) 일치하는 요소의 지정된 속성 값을 삭제합니다

addClass(classname) 클래스 이름을 추가합니다. , 클래스 속성 추가

removeClass(classname)

toggleClass(classname) 클래스 이름 전환(존재하면 삭제, 존재하지 않으면 추가) )

html()

html(setvalue)

text()
text( setvalue)val()val(val) 일반 요소의 경우 선택, 라디오 등에 대한 사용 방법은 object.val(설정 값)이어야 합니다. 그런 다음 값을 사용하여 다음과 같이 이 값의 개체를 나타냅니다.
$ ("#Multiple". Val (["value1", "value3"]; "]);

2. Filtering
실제로 많은 필터링 방법이 선택 연산자를 통해 구현될 수 있으므로 일부 특수한 작업 방법만 사용 가능 여기에 나열되어 있습니다.

eq(index), filter(expr), hasClass(class), is(expr), not(expr),

filter(fn) 필터링됨 개체는 한 번만 계산됩니다
('$. 각각'). 호출된 함수가 false를 반환하면 요소가 삭제되고, 그렇지 않으면 유지됩니다.

slice(start,[end]) 일치하는 하위 집합을 선택합니다.

. map(callback) 요소 집합을 다른 배열로 변환합니다. 요소 배열인지 여부)

andSelf() 선택한 요소를 현재 요소 집합에 추가
end() - . 문서 처리

append(content) 각 요소 콘텐츠에 콘텐츠를 추가합니다. 콘텐츠는 다음 중 하나를 참조합니다. 요소, jQuery, 아래와 동일합니다.

appendTo(content) 위와 반대로 위는 선택한 개체에 추가하는 것이고, 이는 선택한 개체를 콘텐츠 선택에 추가하는 것입니다.

prepend(content), prependTo(content), after(content), before(content )

replaceWith(content) 선택한 요소를 content로 교체
replaceAll(selector) 선택한 객체를 현재 객체로 교체

empty()
remove([expr])
clone()
clone(true) 복제할 때 이벤트가 함께 복제됩니다

4. CSS 처리

css(name) 첫 번째 일치하는 요소의 스타일 속성에 액세스합니다.

css(name,value) 일치하는 모든 요소에서 스타일 속성의 값을 설정합니다

css( 속성) 키-값 쌍을 사용하여 값을 지정합니다.

offset() 선택한 요소의 변위를 가져오고 반환 값은 객체입니다 Object{top,left}

height(), height(val), width(), width(val)

4.
JQuery 객체의 이벤트 처리

1. 전역 작업

(1) Ready(fn)

DOM이 준비되었을 때의 이벤트입니다. $(function(){ … });

( 2) 바인딩(type,[data],fn)은 모든 일치 항목에 이벤트를 바인딩합니다. data는 이 이벤트 함수에 전달되는 추가 개체입니다. p".bind("클릭", function() {

경고( $(this).text() );
});
함수 핸들러(이벤트) {
경고(event.data.foo);

}

$("p".bind("click", {foo: "bar"}, handler)

(3) one(type,[data],fn) 위의 차이점은 이 이벤트가 한 번만 응답한다는 것입니다
( 4) 각각의 Trigger(type,[data]) 이벤트는 요소에서 한 번 트리거됩니다
(5) TriggerHandler(type,[data])는 이벤트 기능만 트리거하고 브라우저에서는 동일한 이벤트를 트리거하지 않습니다
( 6) unbind([type],[data])는 바인딩 이벤트를 삭제합니다.
(7) hover(overFn, outFn)는 마우스 통과 이벤트에 응답합니다.

(8) 토글(fn1,fn2...)은 다양한 기능에 응답합니다. 각 마우스 클릭 후 순서대로

2. 매개변수 없는 고정 이벤트
다음은 이벤트 실행을 의미하고, 매개변수를 사용하면 이벤트 설정을 의미합니다.

다음 이벤트가 트리거될 수 있고 설정할 수도 있습니다:

blur(), 변경 (), click(), dblclick(), error(), focus (), keydown(), keypress(), keyup(), select(), submit()

다음 이벤트는 설정만 가능하며 설정할 수 없습니다. JS에 의해 트리거됨:

load(fn), mousedown(fn), mousemove(fn)、mouseout(fn)、mouseover(fn)、mouseup(fn)、resize(fn)、scroll(fn)、unload(fn )

5.Effect

hide()

hide(speed ,[callback]) 애니메이션을 사용하여 숨깁니다. 콜백은 애니메이션이 완료되었을 때 실행되는 함수입니다.

show()

show(speed,[ callback])

toggle() 스위치 상태

slideDown(speed,[callback] ) 높이 변경(아래로 증가)을 통해 일치하는 모든 요소를 동적으로 표시하고 선택적으로 표시가 완료된 후

콜백 함수
를 트리거합니다.

slideUp(speed,[callback]) 높이를 변경(위로 감소)하여 일치하는 모든 요소를 동적으로 숨기고 선택적으로 숨기기가 완료된 후 콜백 함수를 트리거합니다.

slideToggle(speed,[callback]) 높이 변경을 통해 일치하는 모든 요소의 표시 여부를 전환하고 선택적으로 전환이 완료된 후 콜백 기능을 트리거합니다.

fadeIn(speed,[callback]) 불투명도 변경을 통해 일치하는 모든 요소의 페이드 인 효과를 구현하고 선택적으로 애니메이션이 완료된 후 콜백 함수를 트리거합니다. fadeOut(speed,[callback]) 불투명도 변경을 통해 일치하는 모든 요소의 페이드 아웃 효과를 실현하고 선택적으로 애니메이션이 완료된 후 콜백 함수를 트리거합니다.
fadeTo(speed,opacity,[callback]) 일치하는 모든 요소의 불투명도를 지정된 불투명도로 점진적으로 조정하고 선택적으로 애니메이션이 완료된 후 콜백 함수를 트리거합니다.

animate(params,options) 사용자 정의 애니메이션을 만드는 데 사용되는 함수입니다.

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
options (Options) : 一组包含动画选项的值的集合。

animate(params[,duration[,easing[,callback]]])

duration、 easing 是预设的动画动作
duration (String,Number) : (可选) 三种预定速度之一的字符串(“slow”, “normal”, or > “fast”或表示动画时长的毫秒数值(如：1000)
easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).> 默认jQuery提供”linear” 和 “swing”.
dequeue() 从动画队列中移除一个队列函数
queue() 返回指向第一个匹配元素的队列(将是一个函数数组)
queue(callback) 在匹配的元素的动画队列中添加一个函数
queue(queue) 将匹配元素的动画队列用新的一个队列来代替(函数数组)
stop()

六、AJAX

1、jQuery.ajax(options) 通过 HTTP 请求加载远程数据。

参数列表：
(1) async (Boolean) : (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
(2) beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 是Function的唯一参数
(3) cache (Boolean) : (默认: true,dataType为script时默认为false) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
(4) complete (Function) : 请求完成后回调函数 (请求成功或失败时均调用)。
(5) contentType (String) : (默认: “application/x-www-form-urlencoded” 发送信息至服务器时内容编码类型。
(6) data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为

Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1″, “bar2″]} 转换为 ‘&foo=bar1&foo=bar2’。
(7) dataFilter (Function) :给Ajax返回的原始数据的进行预处理的函数。
(8) dataType (String) : 预期服务器返回的数据类型，”xml”、”html”、”script”、”json”、”jsonp”、”text”。
(9) error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。
(10) global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件
(11) ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
(12) jsonp (String) : 在一个jsonp请求中重写回调函数的名字。
(13) password (String) : 用于响应HTTP访问认证请求的密码
(20) username (String) : 用于响应HTTP访问认证请求的用户名
(14) processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。如

果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
(15) scriptCharset (String) : 只有当请求时dataType为”jsonp”或”script”，并且type是”GET”才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。
(16) success (Function) : 请求成功后回调函数。参数：服务器返回数据，数据格式。 Ajax 事件。
(17) timeout (Number) : 设置请求超时时间（毫秒），此设置将覆盖全局设置。
(18) type (String) : (默认: “GET” 请求方式 (“POST” 或 “GET”)，默认为 “GET”。
(19) url (String) : (默认: 当前页地址) 发送请求的地址。

参数用 : 分开，如：

$.ajax({
url: "test.html",
cache: false,
success: function(html){
    $("#results").append(html);
}
});

로그인 후 복사

2、封装好的简易方法(callback是成功时执行的函数，参数是返回的数据)

jQuery.get(url,[data],[callback])
jQuery.getJSON(url,[data],[callback])
jQuery.getScript(url,[callback]) 载入远程JS并执行
jQuery.post(url,[data],[callback])
load(url,[data],[callback]) 把远程的HTML载入当前选中的DOM中

3、事件(事件参数为event, XMLHttpRequest, ajaxOptions, thrownError)

ajaxError(callback) AJAX 요청에 오류가 발생한 경우 함수를 실행합니다.
ajaxSend(callback) AJAX 요청이 전송되기 전에 함수 실행
ajaxComplete(callback) AJAX 요청이 완료되면 함수 실행
ajaxStart(callback) AJAX 요청이 시작되면 함수 실행
ajaxStop(콜백) AJAX 요청 종료 시 함수 실행
ajaxSuccess(콜백) AJAX 요청 성공 시
jQuery.ajaxSetup(options) 함수 실행
serialize() 구조 데이터

7. 일반적으로 사용되는 정적 메서드

jQuery.boxModel 현재 페이지의 브라우저가 페이지를 렌더링하기 위해 표준 상자 모델을 사용하는지 여부

jQuery.browser 브라우저 커널 식별. navigator.userAgent에 따라 다릅니다. ㅋㅋㅋ
jQuery.each(obj,callback)은 객체와 배열을 반복하는 데 사용할 수 있는 일반적인 반복 방법입니다.
jQuery.inArray(value,array)는 배열에서 첫 번째 매개변수의 위치를 결정합니다(찾을 수 없는 경우 -1 반환).
jQuery.map(array,callback) 배열과 유사한 객체를 배열 객체로 변환합니다. 반환 값은 데이터입니다. 콜백은 이전 배열을 개별적으로 처리할 수 있습니다.
jQuery.unique(array) 배열에서 중복된 요소를 삭제합니다.

위 내용은 JQuery DOM의 일반적인 방법을 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!