jquery初识

jQuery之前做小组项目的时候用过特效，做出来的效果非常漂亮，可是那时候只会添加在html里面实现效果，对于jquery具体是啥不太清楚……
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#aa
{
    200px;
    height:200px;
}
</style>
<script src="jquery-1.11.2.min.js"></script>//想在HTML中用jquery一定要添加这个
</head>

<body>
<div id="aa" style="">hello</div>
<div class="bb">22</div>
<div class="bb">33</div>
<div class="bb">44</div>
<input type="text" name="cc" bs="dd" />

</body>
<script type="text/javascript">

//根据ID找元素,找到具体的DOM对象
var d = document.getElementById("aa");
var c = document.getElementsByClassName("bb");
var div = document.getElementsByTagName("div");
var input = document.getElementsByName("cc");

//操作内容
//1.非表单元素
d.innerHTML; d.innerTEXT;
//2.表单元素
d.value;

//操作属性
d.setAttribute("bs","pp"); //添加属性
d.getAttribute("bs");//获取属性
d.removeAttribute("bs");//移除属性

//操作样式
//d.style.color = "red";
//d.style.backgroundColor = "yellow";
//alert(d.style.width);



$(document).ready(function(e) {
    
    //根据ID找元素，找出的JQUERY对象，如果要取DOM对象，取索引0的元素
    var jd = $("#aa"); //根据ID
    var jc = $(".bb"); //根据Class
    var di = $("div"); //根据标签名
    var ip = $("input[bs=dd]");//根据属性筛选
    
    for(var i=0;i<jc.length;i++)
    {
        jc.eq(i); //取数组里面的第几个JQUERY对象
    }
    
    //操作内容
    //1.非表单元素
    jd.text();  jd.text("aa");
    jd.html();  jd.html("vv");
    //2.表单元素
    jd.val();
    
    //属性操作
    jd.attr("bs","aa");//设置属性
    jd.attr("bs"); //获取属性
    jd.removeAttr("bs");//移除属性
    
    //操作样式
    jd.css("background-color","green");
    //alert(jd.css("width"));
    
    //给一个元素加事件
    /*$("#aa").click(function(){
        
        alert("aa");
        
        })*/
    //给多个元素加事件
    /*$(".bb").click(function(){
        
        alert($(this).text());
        
        })*/
        
    //给多个元素设置相同样式(属性)
    //$(".bb").css("color","pink");
    
    
    
    
});


</script>
</html>