jQuery的优点
1.轻量级、核心文件才几十kb、不会影响页面加载速度
2.跨浏览器兼容。基本兼容了现在的主流的浏览器
3.链式编程、隐式迭代
4.对事件、样式、动画支持，大大简化了DOM操作
5.支持插件扩展开发。有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等
6.免费、开源
jQuery之入口函数
$(document).ready(function(){
// 此处是页面DOM加载完成的入口
})
或者
$(function(){
// 此处是页面DOM加载完成的入口
})
jQuery之选择器
jQuery中所有选择器都是以美元符号开头: $()
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
举个简单的例子
$(function(){
$("p").css("color","red");
})
以上程序通过获取p标签从而改变文本颜色
jQuery之事件
什么是事件?
页面对不同访问者的响应叫做事件
事件处理程序指的是当HTML中发生某些事件时所调用的方法
常见的DOM事件
鼠标事件：click、dbclick、mouseenter、mouseleave、hover
键盘事件：keypress、keydown、keyup
表单事件：submit、change、focus、blur
文档/窗口事件：load、resize、scroll、unload
举个简单的例子
$(function(){
$("p").click(function(){
$(this).hide();
})
})
注意：$(this)选取当前的HTML元素，这里指p元素
jQuery效果-隐藏和显示
hide()隐藏
$("button").click(function(){
$("p").hide();
})
show()显示
$("button").click(function(){
$("p").show()
})
toggle()切换hide()和show()方法
$("button").click(function(){
$("p").toggle();
})
jQuery效果-淡入淡出
fadeIn()淡入
$("button").click(function(){
$("p").fadeIn();
})
fadeOut()淡出
$("button").click(function(){
$("p").fadeOut();
})
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
$("button").click(function(){
$("p").fadeToggle();
})
jQuery效果-滑动
slideDown()向下滑动元素
$("button").click(function(){
$("p").slideDown();
})
slideUp()向上滑动元素
$("button").click(function(){
$("p").slideUp();
})
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
$("button").click(function(){
$("p").slideToggle();
})
jQuery效果-动画
animate() 方法允许您创建自定义的动画
$("button").click(function(){
$("p").animate({
left:'250px',
height:'150px',
width:'150px',
})
})
默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
网友评论