jQuery는 무엇을 할 수 있나요?-JS 튜토리얼-php.cn

이 문서에서는 jquery 사용에 대한 관련 요약을 제공합니다.

jQuery는 작고 빠르며 강력한 JavaScript 라이브러리입니다. DOM 작업, 이벤트 수신, 애니메이션, AJAX 등과 같은 사용하기 쉬운 API를 통해 많은 작업을 단순화합니다.
jQuery가 할 수 있는 것은 네이티브 JS도 할 수 있지만 네이티브 JS는 더 복잡할 것이고, 복잡성을 단순함으로 바꾸는 것이 jQuery의 목적입니다.
적게 쓰고, 더 많이 하세요.

jQuery 객체와 DOM 네이티브 객체의 차이점은 무엇인가요? 변환하는 방법?

이러한 HTML 조각이 있다고 가정해보세요

이 요소 노드는 jQuery 메서드 또는 기본 DOM 메서드를 통해 얻을 수 있습니다

$("#btn1");  //jQuesy方法；document.querySelector("#btn1");    //原生DOM方法；

로그인 후 복사

이 두 가지 방법을 통해 얻습니다. 요소 개체는 완전히 다른 두 개체입니다.
jQuesy 메소드로 얻은 것을 jQuesy 객체라고 합니다. 자체 메소드를 갖고 있으며 네이티브 DOM 메소드를 사용할 수 없습니다.
네이티브 DOM 메소드로 얻은 것을 DOM 네이티브 객체라고 합니다. 또한 자체 메소드가 있으므로 사용할 수 없습니다. jQuery 메소드를 사용하세요.

두 객체는 서로 변환될 수 있습니다.

$("#btn1")[0]; //jQuery 객체는 네이티브로 변환됩니다. DOM 개체 및 해당 요소 개체는 인덱스를 사용하여 얻습니다. $(document .querySelector("#btn1")) //DOM 요소 개체를 $로 래핑하여 jQuery 개체를 가져옵니다. jQuery? 바인딩, 바인딩 해제, 위임, 라이브, 켜기, 끄기 기능은 무엇인가요? 어느 것이 권장됩니까? on을 사용하여 이벤트를 바인딩하고 이벤트 프록시를 사용하는 방법은 무엇입니까?

jQuery에서는 on() 메서드를 사용하여 이벤트를 바인딩할 수 있습니다

$("#btn1").on("click",function() {  //最简单的事件绑定；
    console.log("hello world");
}）

로그인 후 복사

기타 이벤트 바인딩 메서드

bind(). 이 메서드는 3.0 이후 버전에서는 더 이상 사용되지 않으며 on()으로 대체되었습니다.

1.4 .3 여러 매개변수를 허용하는 버전: eventType(이벤트 유형, "클릭" 등), eventData(이벤트 처리 함수에 전달된 데이터), 핸들러(이벤트 처리 함수), PreventBubble(부울, 기본 이벤트 방지, 이벤트 버블링 방지) )

기존 요소에만 바인딩할 수 있으므로 새로 추가된 요소는 이벤트에 바인딩되지 않습니다. 이는 유연성이 부족하고 더 이상 사용되지 않습니다.

unbind(), 이 메서드는 바인딩() 메서드 바인딩을 제거할 수 있습니다. 지정된 이벤트; , 매개변수를 전달하지 않으면 모든 이벤트가 삭제됩니다. 매개변수를 전달하면 지정된 이벤트 및 이벤트 처리 함수가 삭제될 수 있습니다.

delegate() 메서드는 버전 1.7 이전에 일반적으로 사용되는 이벤트 프록시 메서드이며 on() 대체으로 대체되었습니다. 여러 매개변수를 허용합니다.

selector: 이벤트를 트리거하는 요소를 필터링하는 데 사용되는 선택기 문자열

evenType: 이벤트 유형, 공백으로 구분된 다중

eventData: 이벤트 핸들러에 전달된 데이터
handler: 이벤트 핸들러

live()도 이벤트입니다. 프록시 메소드, 선택기와 일치하는 모든 요소에 이벤트 핸들러를 첨부하지만 이벤트를 문서에 직접 바인딩하고 관련 매개변수를 통해 이벤트를 트리거할지 여부를 결정합니다.
이벤트: 이벤트 유형

데이터: 이벤트 핸들러에 전달된 데이터

handler: 이벤트 핸들러
live()가 이벤트를 문서에 바인딩하기 때문에 버블링 체인이 너무 길어 더 이상 사용되지 않습니다.

on()은 이제 여러 매개변수
1.events를 허용하는 이벤트 바인딩을 위한 일반적인 방법입니다. 공백으로 구분된 하나 이상의 이벤트 유형과 선택적 네임스페이스 또는 "click", "keydown.myPlugin"과 같은 네임스페이스만 허용합니다. 또는 ".myPlugin";

2.selector: 선택한 요소 중에서 이벤트를 트리거할 수 있는 하위 요소를 필터링하는 데 사용되는 선택기 문자열입니다. 선택기가 null이거나 선택기가 무시되면 선택한 요소는 항상 이벤트를 트리거할 수 있습니다.

3.data: 이벤트가 트리거되면 이벤트 핸들러 함수
4.handler(eventObject; ): 이벤트가 트리거될 때 실행되는 함수입니다. 함수가 returnfalse만 실행하면 되는 경우 매개변수 위치를 false로 직접 축약할 수 있습니다.

off() 메서드는 on() 메서드에 바인딩된 이벤트를 제거할 수 있습니다. 매개변수가 전달되지 않으면 모든 이벤트가 삭제됩니다. 매개변수는 지정된 이벤트 및 이벤트 처리 함수를 삭제할 수 있습니다.

jQuery 이벤트 프록시 작성 방법

HTML 조각 가정

<ul id="container">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li></ul>

로그인 후 복사

on() 메서드를 사용하고 관련 매개변수를 제공하여 이벤트 프록시를 완료할 수 있습니다

//이벤트를 On에 바인딩합니다. 상위 컨테이너, 필터 선택기를 충족하는 하위 요소만 $("#container").on("click","li",function() { //do Something..})

jQuery 이벤트를 트리거할 수 있습니다. 요소를 표시하거나 숨기는 방법은 무엇입니까?

3개의 매개변수를 허용하는 jQuery의 hide() 메소드를 통해 요소를 숨깁니다.

[duration]: 애니메이션이 지속되는 시간

[easing]: 전환에 사용할 여유 함수를 나타냅니다. jQuery 자체는 "선형" 및 " Swing"

[완료]: 애니메이션이 완료되면 실행되는 함수
매개변수가 추가되지 않은 경우 요소 표시를 없음으로 직접 설정하는 것과 같습니다.
매개변수를 추가하면 그라데이션이 숨겨진 효과를 얻을 수 있습니다. element

$(element).hide()
--------
$(element).hide(3000,function() {
    alert("hello world")
})

로그인 후 복사

마찬가지로 jQuery에서는 숨겨진 요소를 표시하기 위해 show() 메소드를 사용합니다. 사용법은 hide()와 동일합니다.

jQuery中通过hide()方法隐藏元素，其接受三个参数
[duration]：动画持续多久
[easing]：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
[complete]：在动画完成时执行的函数
不添加参数时，其方法等同于直接设置元素的display为none
通过添加参数，该方法可以实现一个渐变的隐藏元素的效果

$(element).hide()
--------
$(element).hide(3000,function() {
    alert("hello world")
})

로그인 후 복사

同样，jQuery中使用show()方法来展示隐藏的元素，使用方法与hide()相同
hide()方法会把元素的display变为none，show()方法会还原元素的display
toggle()方法用于切换元素的隐藏/显示，参数与hide()``show()相同，它的机制就是元素如果是隐藏的，就显示该元素，如果元素是显示的，就隐藏该元素，来回切换

fadeIn()/fadeOut用调整元素透明度的方法来显示/隐藏元素，一旦透明度变为0，display将设置为none，接受参数与hide()、show()相同
不设置参数，fadeIn()/fadeOut默认会有渐进显示/隐藏的效果

$(element).fadeIn()
$(element).fadeOut()

fadeTo以动画的形式调整元素到指定的透明度，接受这几个参数：
duration, opacity [, easing ] [, complete ]
opacity为指定变化的透明度
当opacity为0时，fadeTo方法不会使元素display为none

$(element).fadeTo(1000,0.5) //在1s内透明度变化到0.5

로그인 후 복사

fadeToggle会通过改变透明度的方式显示和隐藏元素，如果元素是隐藏的，则显示，显示的，则隐藏，参数与fadeIn()``fadeOut()相同
fadeToggle在元素透明度为0时，会display为none

fadeIn()/fadeOut和show()/hide()的区别：
前者通过调整元素透明度实现元素隐藏和显示，透明度为0时设置display为none。后者通过改变同时元素的width/height/opacity来显示隐藏元素

slideUp()/slideDown()通过上下滑动来实现元素的隐藏/显示，接受参数与show()/hide()相同
slideToggle()通过上下滑动的方式切换元素的隐藏/显示

animate()是自定义动画方法，接受这几个参数
properties：一个CSS属性和值的对象,动画将根据这组对象进行变化
[duration]：动画时间
[easing]：缓动函数
[complete]：完成动画后的回调函数
animate()的本质是通过动画的方式把元素的样式变为指定的样式
animate()可以通过链式调用实现多个动画

$(element).animate({//something})
          .animate({//something})
          .animate({//something})
          .animate({//something})

로그인 후 복사

多个动画可以整合到一个数组中，对数组进行遍历，执行所有动画

var action = [{//action1},
              {//action2},
              {//action3},
              {//action4}]action.forEach(function(action,index) {
    ${element}.animate(action)
})

로그인 후 복사

stop()方法可以停止当前动画，它接受2个参数：
[clearQueue]：一个布尔值，当为true时，当前动画停止，未执行的动画全部删除
[jumpToEnd]：为true时，当前动画将停止，但该元素上的 css属性会被立刻修改成动画的目标值
stop()不添加任何参数时，会立即结束掉元素当前动画（不完成），马上进入下一个动画（如果有的话）

如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

在原生DOM中，我们可以使用innerText操作元素文本，innerHTML操作元素内的HTML
在jQuery中提供了相同功能的方法：html()和text()
当没有传递参数时，获取元素内的innerHTML和innerText；当传递了一个string参数的时候，修改元素的innerHTM和innerText为参数值

<ul id="container">
    <li>content1</li></ul>
$("#container").html() //"<li>content1</li>"$("#container").text() //"content1"

로그인 후 복사

如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

val()方法可以用来获取和设置input的value
当没有传递参数时，获取value的值
传递一个字符串参数时，将value的值改为参数值
attr()可以获取指定属性，也可以设置属性

$(element).attr("id") //获取元素id属性值$(element).attr("id","container") //设置元素id值为container

로그인 후 복사

本篇对jquery的作用进行了相关的讲解，更多相关内容请关注php中文网。