10분 안에 요소에 대한 jquery의 기본 작업 이해하기

이 글은 요소 획득, 이동, 생성 및 수정 방법을 포함하여 jquery의 일반적인 기능에 대한 요약을 제공합니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.

jQuery 소개

jQuery는 JS의 특정 기능을 캡슐화하여 DOM 작업을 간단하게 만들고 코드를 간결하고 사용하기 쉽게 만들고 체인 작성과 우수한 호환성을 지원하는 JS의 클래스 라이브러리입니다.

jQuery의 디자인 아이디어와 주요 사용법은 특정 웹 페이지 요소를 선택한 다음 이에 대해 몇 가지 작업을 수행하는 것입니다.

jQuery의 특별한 점은 jQuery를 사용하여 해당 요소를 가져온 후 해당 요소를 반환하지 않고 대신 jQuery 개체(jQuery로 생성된 개체)를 반환하며 이 개체는 이러한 해당 요소에 대해 작동할 수 있다는 것입니다.

jQuery가 달성할 수 있는 기능은 확실히 JS로 달성할 수 있지만 반드시 그 반대는 아닙니다.

window.jQuery = window.$로 두고 jQuery를 $.

jQuery로 요소를 가져오는 방법

선택 표현식을 생성자 $()에 넣은 다음 선택한 요소를 가져옵니다. 선택 표현식은 CSS 선택기 또는 jQuery 관련 표현식일 수 있습니다.

// CSS选择器
$(document) // 选择整个文档对象
$('#xxxID') // 选择ID为xxx的元素
$('div.xxxClass') // 选择Class为xxx的元素
$('input[name=first]') // 选择类名属性为first的元素

// jQuery特有表达式
$('a:first') // 选择网页中第一个a元素
$('tr:odd') // 选择表格的奇数行
$('#myForm:input') // 选择表单中的input元素
$('div:visible') // 选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

jQuery로 요소를 생성하는 방법

새 요소를 jQuery 생성자에 직접 전달하기만 하면 됩니다.

생성된 새 요소는 페이지에 자동으로 삽입되지 않습니다. 또한 페이지에 삽입되는 위치를 명시적으로 지정해야 합니다.

예:

태그 쌍 만들기

$(function(){
let $h1 = $(&#39;<h1></h1>&#39;) // 创建元素h1
$(&#39;body&#39;).append($h1) // 将元素h1放入到body里（用append表示成为body的最后一个子元素）
}

div 사용 예:

$('div').prepend('') // 给div添加一个大儿子（即添加到最前）
$('div').append(选择器/jQuery对象) // 给div添加一个小儿子（即添加到最后）
$(&#39;<h2>xxx</h2>&#39;).appendTo(选择器/jQuery对象) // 在选择器选中的元素的子元素里，将“xxx”添加到最后

jQuery가 요소를 이동하는 방법

방법 1: 요소를 직접 이동

$('div').insertAfter($('p')) // 将元素div移动到元素p后面

방법 2 : 목적 함수가 원하는 위치에 도달하도록 다른 요소를 이동하세요

$('p').after($('div')) // 把元素p放到元素div前

이 두 가지 방법의 차이점: 반환되는 객체가 다릅니다. 메서드 1에서 반환된 개체는 div이고 메서드 2에서 반환된 개체는 p입니다.

요소를 이동하는 다양한 방법:

.insertAfter()和.after() // 在现存元素的外部，从后面插入元素
.insertBefore()和.before() // 在现存元素的外部，从前面插入元素
.appendTo()和.append() // 在现存元素的内部，从后面插入元素
.prependTo()和.prepend() // 在现存元素的内部，从前面插入元素

jQuery가 요소 속성을 수정하는 방법

attr()을 사용하여 요소 속성과 해당 콘텐츠를 수정합니다. attr은 attribute의 약어로, JS에서 setAttribute&getAttribute의 약어입니다. attr이 값을 취하는지 또는 값을 할당하는지 여부는 함수의 매개변수에 따라 결정됩니다.

예:

$('img').attr('width','100px') // 为属性'width'赋值'100px'

사용법:

$(selector).attr(attribute) // 返回被选元素的属性值
$(selector).attr(attribute.value) // 返回被选元素的属性&值
$(selector).attr(attribute,function(index,oldvalue)) // 用函数返回值设置被选元素的属性&值
$(selector).attr({attribute1:value,attribute2:value...}) // 为被选一个及以上的元素设置属性&值，可一次修改多个属性的属性值

보충: 위의 세 번째 사용 방법은 함수의 반환 값을 사용하여 속성 값을 속성에 할당하는 것을 의미합니다. 함수는 선택기의 인덱스 값을 받아 사용할 수 있습니다. 현재 속성 값. 예를 들면 다음과 같습니다.

$('button').click(function(){
    $('img').attr('width',function(n,v){
     return v-50;  // 点击按钮图片宽度减少50
    })
})

jQuery의 체인 연산

웹 페이지 요소를 선택한 후 해당 요소에 대해 일련의 연산을 수행하면 모든 연산이 서로 연결되어 체인 형태로 작성될 수 있습니다. 작업.

예: $('div').find('h3').eq(2).html('Hello'); 이 코드 줄은 다음과 같이 나눌 수 있습니다.

$('div') // 找到div元素
  .find('h3') // 选择其中的h3元素
  .eq(2) // 选择第3个h3元素
  .html('Hello'); // 将它的内容改为Hello

jQuery는 뒤로 작업도 제공합니다. end()를 사용하면 연산 결과를 한 단계 뒤로 되돌릴 수 있습니다.

$('div')
　.find('h3')
　.eq(2)
　.html('Hello')
　.end() // 退回到选中所有的h3元素的那一步
　.eq(0) // 选中第一个h3元素
　.html('World') // 将它的内容改为World

추천 관련 비디오 튜토리얼: jQuery 비디오 튜토리얼

위 내용은 10분 안에 요소에 대한 jquery의 기본 작업 이해하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!