jQuery的基础

一、样式

1. css() 为dom对象设置样式

   第一种用法： css(属性名称,属性值) 一次只能设置一个样式

<div class="demo">
        设置一条样式
</div>
<script>
$('.demo').css('color','blue').css('background-color','red')
</script>

第二种用法：css({属性名称:属性值,属性名称:值....})

<div class="demo">

        设置一条样式

</div>

<script>

    // 写法一

 var s =  { 

     color:'blue',
     backgroundColor:'cyan',
     fontSize:'24px'
       }
     $('.demo').css(s)

   // 写法二 

   $('.demo').css({ 

     'color':'blue',
     'background-color':'cyan',
     'font-size':'24px'
       }) 

</script>

二、DOM操作

1. append() 向匹配到的父元素末尾追加子元素

<div class="add">append</div>
<script>
    /*
	 1. 创建dom元素
     jQ:  $('<a href="http://www.baidu.com">百度</a>')
    2. 获取父元素
    $('.add')
    3. 使用append()追加
    父元素对象.append(要追加的子元素)
        */
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').append(obj)
</script>

2.appendTo() 把子元素追加到父元素中

 <div class="add">append</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
obj.appendTo($('.add'))
</script>

3.prepend() 向父元素的开头添加子

 <div class="add">prepend</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').prepend(obj)  
    //结果： <div class="add"><a href="http://www.baidu.com">taobao</a>prepend</div>
</script>

元素