Jquery基础3

课程目的

  • 熟练使用jquery添加、删除元素
  • 熟练使用jquery设置样式、获取、设置元素尺寸

课程内容

Jquery添加、删除元素

1. 添加元素
  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

append是在父元素内部的最后位置添加元素

$("ul.set1").append('<li>看电影</li>');  //两种方式都可以
var $li = $('<li>旅游</li>');
$(".set1").append($li);  

prepend是在父元素的内容的开始位置添加元素

$set1.prepend('<li>遛狗</li>'); 

after在匹配元素之后插入内容

var $firstLi = $set1.find('li:first'),
    $lastLi = $set1.find('li:last');
//在元素后面插入新内容
//$firstLi.before('<li>写代码</li>');
//改变已有元素的位置
$firstLi.before($lastLi);

before在匹配元素之前插入内容

var $firstLi = $set1.find('li:first'),
    $lastLi = $set1.find('li:last');
//$lastLi.after('<li>上课</li>');
$lastLi.after($firstLi);
2. 删除元素
  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素
<ul class="set2" style="border: 1px solid red; height: 40px;">
    <li>吃饭</li>
    <li>睡觉</li>
</ul>
<button id="btn2-1">remove</button>
<button id="btn2-2">empty</button>
<script type="text/javascript">
    var $set2 = $('.set2');
    $('#btn2-1').on('click', function(){
        $set2.remove();
    });

    $('#btn2-2').on('click', function(){
        $set2.empty();
    });

</script>
3. 添加与删除class
  • hasClass('class') - 判断元素是否拥有某个class
  • removeClass('class') - 删除元素的某个class
  • addClass('class') - 给元素添加某个class
  • toggleClass('class') - 切换添加移除class
    var $curTab = $(this),
        idx = $curTab.prevAll().size();
    $curTab.addClass('active').siblings().removeClass('active');
    $tabC.removeClass('active').eq(idx).addClass('active');

Jquery CSS

css() 方法设置或返回被选元素的一个或多个样式属性。

如需返回指定的 CSS 属性的值,请使用如下语法:

$("p").css("background-color");

如需设置指定的 CSS 属性,请使用如下语法:

$("p").css("background-color","yellow");

如需设置多个 CSS 属性,请使用如下语法:

$("p").css({
    "background-color":"yellow",
    "font-size":"200%"
});

Jquery尺寸

  • width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
  • height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
  • innerWidth() 方法返回元素的宽度(包括内边距)。
  • innerHeight() 方法返回元素的高度(包括内边距)。
  • outerWidth() 方法返回元素的宽度(包括内边距和边框)。
  • outerHeight() 方法返回元素的高度(包括内边距和边框)
  • outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
  • outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
$("body").height()  获取文档内容的高度
$(window).height();  获取窗口的高度
$("#div1").width(500).height(500); 设置元素的宽高
$("#btn2").offset();  获取元素相对于document的偏移

如何把页面的footer放在窗口的最底部? 查看demo

function setFooter(){
    var winH = $(window).height(),
        docH = $("body").height();
    if(winH > docH){
        $('footer').css('margin-top', (winH - docH)+"px");
    }       
}