初识jquery

1)jquery的引用

<script src="jquery-1.8.3.js"></script>
注意：为同目录下引用，否则需要用"../"来改路径

---

2)jquery使用-4种方法

先写$(function(){ })其余jquery方法都写在其内，运行开始直接加载此项

        $(document).ready(function(){
            alert("hello,1")
        })

        $().ready(function(){
            alert("hello 2")
        })

        jQuery(function(){
            alert("hello 3");
        })

        $(function(){
            alert("hello 4");
        })

例：设置表格间隔行有不同颜色

$(function(){
     $("tr:even").css("background","red");//tr表格的行，偶数行设置红颜色（行从0开始）
     $("tr:odd").css("background","green");//奇数行设置绿色
        })

---

3)DOM对象和jQuery对象

DOM对象：直接使用javas获取的对象

如：var objDOM=documnent.getElementById("p1");
    var objhtml=objDOM.innerHTML;

jQuery对象：使用jQuery产生的对象

var $va=$("#p1").html()
alert($va)

注意：DOM对象和jQuery对象分别拥有一套独立的方法，两者不可混用。

---

3)DOM对象和jQuery对象之间转换：

DOM对象转jQuery对象：$(DOM对象)

var va=document.getElementById("p1");
var $va=$(va)//jQuery对象命名一般约定以$开头
$va.html("yes")

jQuery对象转DOM对象：

var $va=$("#p1");
//方式1 var va=$va[0];
var va=$va.get(0)
alert(va.innerHTML)//innerHTML显示标签中所有内容，innerText不显示标签。但标签里面的内容都显示 

---

4)选择器

     $("p").html("标签选择器");
     $("#p1").html("id选择器");
     $(".pclass").html("类选择器")

---

5)方法

语法：$(selector).action();
//.action(),属性中没有值是获取属性所对应的值，如果跟了值就代表给属性赋值

$("input").attr("checked","true");//attr设置或返回被选元素的属性值。
$("input").attr("checked","false");//全部选不可实现
实现全不选：$("input").removeAttr("checked");

$("p").css("background-color","red");//css设置某一属性
$("p").addClass("hhh");//从css添加指定的类名hhh，设置一组属性
$("p").css({color: "red",background: "blue"});//设置一组属性

---

6)事件

$("p").mouseover(function(){//鼠标覆盖事件
                    $(this).css("background","green");
                    $(this).css("font-size","30px")
  }).mouseout(function(){//鼠标离开事件
                    $(this).css("background","red");
                    $(this).css("font-size","15px")
  })


$("#phone").css("background","green").next().css("background","red");
//next()某元素的相邻元素

 $("span").click(function(){//点击事件事件
                $(this).css("background","red");
                $("div").css("display","block")
            })