>  기사  >  웹 프론트엔드  >  jQuery 기본 구문을 사용하는 방법

jQuery 기본 구문을 사용하는 방법

一个新手
一个新手원래의
2017-09-29 09:53:011380검색

1. attr()

attr() 메소드는 요소의 속성을 설정하거나 반환합니다.

attr(속성 이름):요소 속성 이름의 값을 가져옵니다.

attr(속성 이름, 속성 값): 요소 속성 이름의 값을 설정합니다.

예:


<a href=”http://127.0.01” id =”a1”>点我就变</a>
   <p>我改变后的地址是:<span id=”tip”></span></p>
   <script type=”text/javascript”>      
   $(“#a1”).attr(“href”,”www.imooc.com”);
       var $url = $(“a1”).attr(“href”);
        $(“#tip”).html($url);   </script>

2, html(), text()

html(): 요소의 html 콘텐츠 및 형식 코드를 가져옵니다. 원본 텍스트도 캡처되었습니다.

text():요소의 html 콘텐츠를 가져옵니다. 원본 텍스트의 형식 코드는 캡처되지 않습니다.

메서드에 매개변수가 포함되어 있으면 매개변수 값이 요소 콘텐츠로 설정된다는 의미입니다.

예:


<p id=”html”></p>
<p id=”text”></p>
<script type=”text/javascript”>  
var $content=”<b>你好</b>”;  
$(“#html”).html($content);
  $(“#text”).text($content);</script>

Three, addClass(), css()

addClass(): 요소의 스타일을 동작시키며, 매개변수는 추가된 스타일 이름입니다. 요소.

css(): 괄호 안에 스타일의 속성 내용을 직접 작성합니다.

예:


<p id=”content”>我穿了一件红衣</p>   …
   $(#content”).css({“background-color”:”red”,”color”:”white”});

4. removeAttr(),removeClass()

removeAttr(name):제거된 요소의 속성 이름을 구현합니다.

removeClass(class):제거된 요소의 스타일 이름을 구현합니다.

예:


<p id=”content” class=”blue white”>我脱下了一件蓝衣</p>…
$(“#content”).removeClass(“blue”,”white”);

5.append()

append(content): 지정된 요소에 콘텐츠를 추가합니다. 콘텐츠 매개변수는 문자, HTML 요소 태그 또는 것일 수 있습니다. 반환 문자 문자열 콘텐츠 함수.

예:


function rethtml(){   
var $html = “<p id=”test” title=”hi”>我是调用函数创建的</p>”  
return $html;
}
$(“body”).append(rethtml());

6.appendTo()

appendTo():지정된 요소에 콘텐츠 삽입

형식 사용 : $(콘텐츠). (selector), content는 삽입해야 하는 콘텐츠를 나타내고, selector 매개변수는 선택한 요소를 나타냅니다.

예:


<p>
  <span class=”green”>小乌龟</span>
</p> var $html = “<span class=”red”>小青蛙</span>
 $($html).appendTo(“p”);

Seven, before(), after()

before():요소 앞에 콘텐츠 삽입,

형식 : $ (selector).before(content.

after():요소 뒤에 콘텐츠를 삽입하세요.

format:$(selector).after(content).

예:


<span class=”green”>交个朋友吧!</span>var $html = “<span class=”red”>兄弟</span>”
$(“.green”).after($html);

8.clone()

clone():선택한 요소의 복사본을 생성합니다.

Format:$(selector).clone( ),

selector는 요소이거나 HTMLcontent

예:


<span class=”green”>交个朋友吧!</span>
$(“body”).append($(“.green”).clone());

9일 수 있습니다.

replaceWith() : 요소 또는 요소 내 콘텐츠 바꾸기,

Format:$(selector).replaceWith(content)

replaceAll():요소 내 요소 또는 콘텐츠 바꾸기,

Format:$(content).replaceAll(selector)

예:


<span class=’green’ title=’hi’>我是屌丝</span>var $html = “<span class=’red’ title=’hi’>我是土豪</span>”;
$($html).repalceAll(“.green”);

10. 랩():

는 요소 자체를 래핑하는 데 사용됩니다. 형식

:$(selector).wrap(wrapper)wraplnner():

은 요소의 콘텐츠를 래핑하는 데 사용됩니다. 형식 :

$(선택기).wrapInner(래퍼)

wrapper参数为包裹元素的格式

例子:


<span class=”red” title=’hi’>我的身体有点歪</span>
$(“.red”).wrapInner(“<b></b>”);

十一、each()

each():遍历指定的元素集合,通过回调函数返回遍历元素的序列号,

格式:$(selector).each(function(index))

参数function为遍历时的回调函数,index为遍历元素的序列号,从0开始。

例子:


<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
$(“span”).each(function(index){ if(index == 1){
$(this).attr(“class”,”red”);
}
});

十二、remove()、empty()

remove():删除元素本身和子元素,通过添加过滤参数指定需要删除的某些元素;

empty():只删除所选元素的子元素

例子:


<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
$(“span”).empty(“.green”);

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

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