jQuery

jQuery能做什么:{

访问和操作DOM元素

控制页面样式

对页面事件进行处理

扩展新的jQuery插件

与Ajax技术完美结合

注:jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率

}
jQuery的优势:{

体积小,压缩后只有100KB左右

强大的选择器

出色的DOM封装

可靠的事件处理机制

出色的浏览器兼容性

使用隐式迭代简化编程

丰富的插件支持

}

分为压缩版和未压缩版

jQuery_第1张图片

压缩版体积小压缩成一行,不方便阅读

jQuery_第2张图片

直接引入即可

jQuery_第3张图片

$(document).ready():{

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

jQuery_第4张图片

}

}

jQuery语法结构:{

$(selector).action() ;

工厂函数$():将DOM对象转化为jQuery对象

选择器 selector:获取需要操作的DOM 元素

方法action():jQuery中提供的方法,其中包括绑定事件处理的方法

}

jQuery操作页面元素:{

使用addClass( )方法为元素添加样式

使用css( )方法设置元素样式

使用show( )、hide( ) 方法设置元素的显示和隐藏

addClass( )方法:jQuery 对象.addClass([样式名]);

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

css( )方法:css("属性","属性值") ;(设置一个css属性) css({"属性1":"属性值1","属性2":"属性值2"...}) ;(设置多个css属性)

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

设置元素的显示和隐藏:$(selector).show( ); $(selector).hide( );

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

}

jQuery代码风格:{

“$”等同于“ jQuery ”

链式操作:对一个对象进行多重操作,并将操作结果返回给该对象

$("h2").css("background-color","#ccffff").next().css("display","block");

next()下一个兄弟标签

隐式迭代:

jQuery_第5张图片

jQuery_第6张图片

当需要设置多个同样标签属性时,只需要设置一个样式其他标签也会改变

}

添加注释:{

jQuery_第7张图片

}

DOM对象转jQuery对象:{

使用$()函数进行转化:$(DOM对象)

$(dom对象)

jQuery_第8张图片

注释:

jQuery对象命名一般约定以$开头

在事件中经常使用$(this),this是触发该事件的对象

}

jQuery对象转DOM对象:{

jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象

$("p").get(0)/$("p").[0]

jQuery_第9张图片

通过get(index)方法得到相应的DOM对象

jQuery_第10张图片

}

总结:{

jQuery_第11张图片

}

你可能感兴趣的:(jquery)