How to use jQuery basic syntax

1. attr()

attr() method sets or returns the attributes of the element.

attr(Attribute name):Get the value of the element attribute name.

attr(attribute name, attribute value): Set the value of the element attribute name.

Example:

<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():Get the html content of the element, and the format code of the original text is also captured.

text():Get the html content of the element. The format code of the original text is not captured.

If the method contains parameters, it means that the parameter value is set to the element content.

Example:

##

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

3. addClass(), css()

addClass(): Manipulate the style in the element, and the parameter is the style name of the added element.

css(): Directly write the attribute content of the style in brackets.

Example:

##

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

Four,

removeAttr(), removeClass()

removeAttr(name):

Removes the attribute name of the element.

removeClass(class):

The style name to implement the removed element.

Example:

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

5. append()

append(content): Append content to the specified element. The content parameter can be a character, an HTML element tag, or a function that returns a string content.

Example:

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

6. appendTo()

appendTo():

Insert content into the specified element

Use the format

:$(content).appendTo(selelctor) ,content represents the content that needs to be inserted, and the parameter selector represents the selected element.

Example:

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

7. before(), after()

before():

Insert content in front of the element,

Format

:$ (selector).before(content.##after():

Insert content after the element, Format

:$(selector).after(content). ##Example:

# #

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

8. clone()

clone():Generate a copy of the selected element,

Format:

$(selector).clone(),selector can be one Element or

HTMLContent Example:

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

9. replaceWith(), replaceAll()

replaceWith():Replace the element or the content in the element

, Format:

$(selector).replaceWith(content)replaceAll():Replace element or content within an element

,Format:

$(content).replaceAll (selector)Example:

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

10. wrap(), wrapInner()

wrap():Used to wrap the element itself,

Format:

$(selector).wrap(wrapper)wraplnner(): is used to wrap the content in the element,

Format: $(selector).wrapInner(wrapper)

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”);

The above is the detailed content of How to use jQuery basic syntax. For more information, please follow other related articles on the PHP Chinese website!