[웹 프론트 엔드 | jQuery] jQuery 운영

1 : jQuery 속성 작업

1 : 요소 prop ()의 고유 속성 값 설정 또는 가져 오기

//1. 获取属性语法
prop(''属性'');

//2. 设置属性语法
prop(''属性'', ''属性值'');

2 : 요소 사용자 정의 속성 값 attr () 설정 또는 가져 오기

//1. 获取属性语法
attr(''属性'');

//2. 设置属性语法
attr(''属性'', ''属性值'');   // 类似原生 setAttribute()

이 메서드는 H5 사용자 지정 속성을 가져올 수도 있습니다.

3 : 데이터 캐시 data ()

data () 메서드는 DOM 요소 구조를 수정하지 않고도 지정된 요소의 데이터에 액세스 할 수 있습니다. 페이지를 새로 고치면 이전에 저장된 모든 데이터가 제거됩니다.

//1. 附加数据语法
data(''name'',''value'');   // 向被选元素附加数据
   
//2. 获取数据语法
date(''name'');            //   向被选元素获取数据

동시에 HTML5 맞춤 속성 데이터 색인을 읽을 수도 있으며 결과는 숫자입니다.

2 : jQuery 콘텐츠 텍스트 값

1 : 공통 요소 콘텐츠 html () (기본 내부 HTML과 동일)

html()             // 获取元素的内容
html(''内容'')     // 设置元素的内容

2 : 일반 요소 텍스트 콘텐츠 text () (기본 innerText와 동일)

text();              // 获取元素的文本内容
text(''文本内容'')   // 设置元素的文本内容

3 : val () 형식의 값 (원래 값과 동일)

val()              // 获取表单的值
val(''内容'')      // 设置表单的值

3 : jQuery 요소 작업

1 : 요소 트래버스

//方法一
$("div").each(function (index, domEle) {
    
     xxx; })      

1

  1. each () 메서드는 일치하는 각 요소를 반복합니다. 주로 DOM 처리를 사용합니다. 각각
  2. 내부 콜백 함수에는 2 개의 매개 변수가 있습니다. index는 각 요소의 색인 번호이고 demEle은 jquery 객체가 아닌 각 DOM 요소 객체입니다.
  3. 따라서 jquery 메서드를 사용하려면이 dom 요소를 jquery 객체 $ (domEle)로 변환해야합니다.
//方法二
$.each(object,function (index, element) {
    
     xxx; })       
  1. $ .each () 메서드는 모든 개체를 탐색하는 데 사용할 수 있습니다. 주로 배열, 객체와 같은 데이터 처리에 사용됩니다.
  2. 내부 함수에는 2 개의 매개 변수가 있습니다. index는 각 요소의 색인 번호입니다. 요소는 콘텐츠를 순회합니다.

2 : 요소 만들기

$(''  '');

3 : 요소 추가

//内部添加
element.append(''内容'')  //把内容放入匹配元素内部最后面,类似原生 appendChild。

element.prepend(''内容'')  //把内容放入匹配元素内部最前面。

//外部添加
element.after(''内容'')        //  把内容放入目标元素后面
element.before(''内容'')    //  把内容放入目标元素前面 
  1. 요소는 내부적으로 추가되며 생성 후 부모-자식 관계가 있습니다.
  2. 외부에서 요소를 추가하면 세대가 지나면 형제입니다.

4 : 요소 삭제

element.remove()   //  删除匹配的元素(本身)
element.empty()    //  删除匹配的元素集合中所有的子节点
element.html('''')   //  清空匹配的元素内容
  1. remove는 요소 자체를 제거합니다.
  2. empt () 및 html ( '' '')은 동일하며 둘 다 요소 내부의 콘텐츠를 삭제할 수 있지만 html은 콘텐츠를 설정할 수도 있습니다.

4 : jQuery 크기

속성 기술
너비 () / 높이 () 일치하는 요소의 너비와 높이를 얻는 것은 너비 / 높이뿐입니다.
innerWidth () / innerHieght () 패딩을 포함하여 일치하는 요소의 너비와 높이를 가져옵니다.
outerWidth () / outerHeight () 패딩을 포함하여 일치하는 요소의 너비와 높이를 가져옵니다.
outerWidth (true) / outerHeight (true) 패딩, 보르 드, 여백을 포함하여 일치하는 요소의 너비와 높이를 가져옵니다.
  1. 위의 매개 변수가 비어 있으면 해당 값을 가져오고 반환 된 값은 숫자입니다.
  2. 매개 변수가 숫자이면 해당 값을 수정하십시오.
  3. 매개 변수는 단위를 쓸 필요가 없습니다.

5 : jQuery 위치 연산

1 : offset () 요소 오프셋 설정 또는 가져 오기

  1. 문서에 상대적인 오프셋 좌표는 부모와 관련이 없습니다.
  2. 이 메서드에는 left 및 top 속성이 두 개 있습니다. offset (). top은 문서 상단으로부터의 거리를 가져 오는 데 사용되며 offset (). left는 문서의 왼쪽에서 거리를 가져 오는 데 사용됩니다.
  3. 요소의 오프셋을 설정할 수 있습니다. offset ({top : 10, left : 30});
  4. 문서의 거리를 기반으로하는 상위 상자 및 위치 지정

2 : position () 요소 오프셋 가져 오기

  1. 위치를 지정하는 상위에 상대적인 오프셋 좌표 상위 위치가 지정되지 않은 경우 문서가 우선합니다.
  2. 이 메서드에는 left 및 top 속성이 두 개 있습니다. position (). top은 위치 지정 부모의 맨 위에서 거리를 가져 오는 데 사용되며 position (). left는 위치 지정 부모의 왼쪽에서 거리를 가져 오는 데 사용됩니다.
  3. 이 방법은 설정이 아닌 획득 만 가능합니다.

3 : scrollTop () / scrollLeft () 롤링되는 요소의 머리와 왼쪽을 설정하거나 가져옵니다.

  1. scrollTop () 메서드는 선택한 요소의 스크롤 된 헤드를 설정하거나 반환합니다.
  2. 매개 변수 뒤에 획득이없는 경우 매개 변수가 단위가없는 숫자이면 헤드가 롤링되도록 설정합니다.

2

추천

출처blog.csdn.net/qq_43490212/article/details/111823905