>  기사  >  웹 프론트엔드  >  jQuery로 DOM을 조작하는 방법

jQuery로 DOM을 조작하는 방법

一个新手
一个新手원래의
2017-09-27 09:53:202978검색

1. jQuery 연산 스타일

2. jQuery 연산 속성

3. jQuery 애니메이션 단순 연산

4. jQuery 연산 DOM 노드 추가 및 삭제 연산

1. CSS 작업 :

기능: 스타일을 설정하거나 수정하고, 스타일 속성을 조작합니다a. 단일 스타일을 설정합니다. CSS(이름/속성 이름, 값/속성 값)

$('#box').css(‘background’,'#000')
b. 매개변수는 객체 CSS(obj)입니다.

$('#box').css({'background':'gray',
'width':'400px',
'height':'200px'
})

스타일 가져오기:

.css(이름)

Features, jQ의 CSS 메서드는 모두 인라인 스타일입니다.

jq 암시적 반복, 컬렉션의 속성을 가져올 때 JQ 0번째 속성을 자동으로 인쇄합니다.

연산 설정 시 요소가 여러 개인 경우 모든 요소에 동일한 값을 설정합니다

box.eq(0).css('width',190);
box.eq(1).css('width',110);

.....

2.class 연산

기능: 스타일을 처리하는 클래스

a.添加addClass(name);参数类名不用带点,并且不会覆盖之前的作用;
$("box").addClass("one");
b.移除removeClass("name");
$("box").removeClass("one");
c.判断hasClass是否有具体的类,返回值为布尔值
$("box").hasClass("one");//false
d.切换样式类toggleClass,需要切换的样式类名,如果有,移除该样式,如果没有,添加该样式。
$("box").toggleClass("one");切换样式类
2. jq 연산 속성

1.attr 연산

a.设置单个属性,attr(name,value);
$(“img”).attr(“title”,”哎哟,不错哦”);
b.设置多个属性(attr(obj));
$("img").attr({
title:"哎呦,不错哦“,
alt:"你很棒棒哟”,
style:"opacity:.5"
});
c.获取属性attr(name)
$(“img”).attr("title");

1 속성 획득 시 첫 번째 요소에 해당하는 속성만 획득하게 되는데, 이는 CSS 방식과 동일합니다. 2. 속성을 가져올 때 해당 속성이 존재하지 않으면 undefed가 반환됩니다.d.Remove attributeremoveAttr(name);

매개변수: 제거해야 하는 속성의 이름이 비어 있는 경우. 어떤 작업도 발생하지 않습니다. 모든 속성이 제거되는 것은 아닙니다. RemoveClass를 구별하세요.

$("img").removeAttr("title");

2. Prop은 불리언 속성을 운용합니다

checked, selected, 비활성화 등 불리언 형태의 속성은 attr 메소드를 사용할 수 없으며, prop 메소드만 사용할 수 있습니다. 속성 설정

$(“:checked”).prop(“checked”,true);
모든 선택 항목, 매개변수에 선택한 속성 추가(속성 이름, true/false)

속성 가져오기

$(“:checked”).prop(“checked”);//返回true或者false;

3. jQuery 기본 애니메이션

jquery는 세 가지 기본 애니메이션 세트를 제공합니다. 애니메이션 모두 표준적이고 일반 효과이며 jquery는 맞춤 애니메이션 기능도 제공합니다. 1. 표시 및 숨기기

show ([speed], [callback]) 및 hide()

show() 매개변수가 전달되지 않으면 매개변수: 속도: 시간(밀리초 값), 고정 문자열 'fast') = 200 nomal = 400 느림=600;콜백: 애니메이션 종료 후 실행되는 콜백 함수

hide()同show()方法一致

show/hide修改的是元素的width、height、opacity。

2.滑入与滑出

slideUp()与slideDown()

*如果不传参数,默认为nomal!(与show和hide区分 )

参数:时间,固定字符串

callback:执行动画结束后执行的回调函数

滑入滑出切换slideToggle(speed,callback)

$(selector).slideToggle(speed,callback);

//如果是隐藏状态,那么执行slideDown操作,如果是显示状态,那么执行slideUp操作。

3.淡入与淡出

fadeIn()与fadeOut()

用法与show好fadeOut一致

淡入淡出切换:

fadeToggle(speed,callback);

//如果当前元素处于隐藏状态,那么执行fadeIn操作,如果处于显示状态,那么执行fadeOut操作。

fade系列方法:修改的是元素的opacity

 4.基本动画小结

1. jQuery给我们提供了三组动画,show/hide、slideUp/slideDown、fadeIn/fadeOut

2. 动画切换方法:slideToggle、fadeToggle,toggle()。

3. show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。

4. show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值,都是带数字的,因为带了数字才能做渐变。

5.自定义动画animate

animate:自定义动画

$(selector).animate({params},[speed],[callback]);

// {params}:要执行动画的CSS属性,带数字可以是对象(必写)

// speed:执行动画时长

时间和速度:毫秒数,字符串’swing‘两边慢,中间快/’linner‘匀速

// callback:动画执行完后立即执行的回调函数

例:

设置数值型的属性做动画

box.animate({

left:800;

width:800;

height:800 逐渐变大

transform:'rotate(360deg)'

},1000,'swing',function)

6.动画队列问题

在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画执行完成了才会执行。

7.停止动画

stop()函数暂停当前执行动画

stop(clearQueue,jumpToEnd)

第一个参数:是否清楚队列,第二个参数:是否跳转最终效果,最后一帧

四、jQuery操作dom节点增删操作

1.创建元素

$(htmlStr)//html格式的字符串

$(“<span>这是一个span元素</span>”);

2.添加元素append/prepend

append方法:添加到当前的最后面。

参数:字符串(标签)或者jq对象

字符串:$(“p”).append(“这是一个span元素”);
JQ对象:var $span = $(“<span>这是一个span元素</span>”);
$(“p”).append($span);

prepend:追加到当前元素的最前面。

*如果添加的是已经存在的元素,那么会把之前的元素给干掉。(类似于剪切的功能)。

3.清空元素empty

empty:清空指定节点的所有元素,自身保留(清理门户)

1)$(“p”).empty();//清空p的所有内容(推荐使用,会清除子元素上绑定的内容,源码)
2)$(“p”).html(“”);//使用html方法来清空元素,不推荐使用,会造成内存泄漏,绑定的事件不会被清除。

4.删除元素remove

remove:相比于empty,自身也删除(自尽)

$(“p”).remove();

5.克隆元素clone

$(selector).clone();

复制$(selector)所匹配到的元素(深度复制)和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。

위 내용은 jQuery로 DOM을 조작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.