How to use jQuery basic syntax-JS Tutorial-php.cn

How to use jQuery basic syntax

一个新手

Release： 2017-09-29 09:53:01

Original

1295 people have browsed it

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>

Copy after login

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>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

十一、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”);
}
});

Copy after login

十二、remove()、empty()

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

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

例子：

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

Copy after login

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!