初始jQuery

jQuery基本语法
<script>
     $(document).ready(function() {
        alert("我欲奔赴沙场征战jQuery，势必攻克之！");
    });
</script>

 

$(document).ready()与window.onload类似，但也有区别 

window.onload      必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行
                         编写个数    同一页面不能同时编写多个

$(document).ready()    网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
                        编写个数      同一页面能同时编写多个       
              简化写法     $(function(){
             //执行代码
          })?;

 

jQuery语法结构   $(selector).action()?; 
    工厂函数$()：将DOM对象转化为jQuery对象
    选择器 selector：获取需要操作的DOM 元素
    方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

jQuery操作页面元素
    使用addClass( )方法为元素添加样式
    使用css( )方法设置元素样式
    使用show( )、hide( ) 方法设置元素的显示和隐藏

 

addClass( )方法       jQuery 对象.addClass([样式名]);
    $("#current").addClass("current");      

css( )方法       css("属性","属性值") ;        css({"属性1":"属性值1","属性2":"属性值2"...}) ;
    $(this).css({"background":"#c81623"});

设置元素的显示和隐藏     $(selector).show( );          $(selector).hide( );
    $(".nav-top").show( );
    $("p").hide( );

“$”等同于“ jQuery ”    
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...})      

 

链式操作     对一个对象进行多重操作，并将操作结果返回给该对象
     $("h2").css("background-color","#ccffff").next().css("display","block");

隐式迭代
 $(document).ready(function() {
        $("li").css({"font-weight":"bold","color":"red"});
    });

 

DOM对象和jQuery对象
DOM对象：直接使用JavaScript获取的节点对象
var objDOM=document.getElementById("title"); 
var objHTML=objDOM.innerHTML;  

 jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
$("#title").html( );
等同于
document.getElementById("title").innerHTML; 

DOM对象转jQuery对象 
     使用$()函数进行转化：$(DOM对象)
var txtName =document.getElementById("txtName"); 
var $txtName =$(txtName);  
jQuery对象命名一般约定以$开头
在事件中经常使用$(this)，this是触发该事件的对象

 

jQuery对象转DOM对象
      jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
var $txtName =$ ("#txtName"); 
var txtName =$txtName[0]; 

      通过get(index)方法得到相应的DOM对象
var $txtName =$("#txtName"); 
var txtName =$txtName.get(0);