jQuery基础语法使用

一、attr()

attr():方法设置或返回元素的属性。

attr(属性名):获取元素属性名的值。

attr(属性名,属性值):设置元素属性名的值。

例子：

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

二、html()、text()

html():获取元素的html内容，原文的格式代码也被抓取。

text():获取元素的html内容，原文的格式代码没有抓取。

如果方法中包含参数，则表示将参数值设置为元素内容。

例子：

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

三、addClass()、css()

addClass():操作元素中的样式，参数为增加元素的样式名称。

css():直接将样式的属性内容写在括号中。

例子：

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

四、removeAttr()、removeClass()

removeAttr(name):实现移除元素的属性名。

removeClass(class):实现移除元素的样式名。

例子：

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

五、append()

append(content):向指定的元素中国追加内容,content参数可以是字符、HTML元素标记、或者一个返回字符串内容函数。

例子：

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

六、appendTo()

appendTo():向指定的元素内插入内容。

使用格式:$(content).appendTo(selelctor),content表示需要插入的内容，参数selector表示被选的元素。

例子：

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

七、before()、after()

before():在元素前面插入内容，

格式:$(selector).before(content)。

after():在元素后面插入内容，

格式:$(selector).after(content)。

例子：

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

八、clone()

clone():生成一个被选元素的副本，

格式:$(selector).clone()，

selector可以是一个元素或HTML内容。

例子：

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

九、replaceWith()、replaceAll()

replaceWith():替换元素或元素中的内容,

格式:$(selector).replaceWith(content)。

replaceAll():替换元素或元素中的内容,

格式:$(content).replaceAll(selector)。

例子：

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

十、wrap()、wrapInner()

wrap():用于包裹元素本身，

格式:$(selector).wrap(wrapper)。

wraplnner():用于包裹元素中的内容，

格式：$(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”);