第五章

第五章

初识jQuery

1.语法结构

$(selector).action() ;

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

2.操作页面元素

1.addClass( )方法为元素添加样式
jQuery 对象.addClass([样式名]);

例：$("#current").addClass("current");

2.使用css( )方法设置元素样式
css("属性","属性值") ;                               //设置一个CSS属性
css({"属性1":"属性值1","属性2":"属性值2"...}) ;       //同时设置多个CSS属性

例：$(this).css({"background":"#c81623"});

3.使用show( )、hide( ) 方法设置元素的显示和隐藏
$(selector).show( );
$(selector).hide( );

例：$(".nav-top").show( );
    $("p").hide( );

3.DOM模型

1.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对象分别拥有一套独立的方法，不能混用

2.DOM对象转jQuery对象
使用$()函数进行转化：$(DOM对象)
例：var txtName =document.getElementById("txtName"); 
    var $txtName =$(txtName); 

注：jQuery对象命名一般约定以$开头；
    在事件中经常使用$(this)，this是触发该事件的对象

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

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