1、JQuery 一个快速、简洁的JavaScript框架 2、作用 write less,do more 将JS代码与HTML代码分离 提高工作效率 3、JQ入门 JQ的三种文档加载完成事件 jQuery(document).ready(function(){ }); $(document).ready(function(){ }); $(function(){ }); JS的文档加载完成事件 window.onload = funcion(){ }; 按照定义顺序执行,但JQ的文档加载事件不会被覆盖,可定义多个; 而JS由于使用的是匿名函数,只能加载一个,且会被覆盖。 4、开发步骤 导入相关JQ文件 文档加载完成事件:$(function(){}); 页面初始化操作:如绑定事件,启动页面定时器 确定相关操作的事件 事件触发函数 函数里面操作相关元素 5、JQ的动画效果 show() hide() slideUp() slideDown() fadeIn() fadeOut() animate 自定义动画 6、网页定时弹出广告 导入JQ文件 编写JQ的文档加载事件 启动定时器 编写显示广告的函数 在显示广告中加入定时器 编写隐藏广告的函数 7、JQuery中的选择器 基本选择器 ID选择器 # 类选择器 . 元素选择器 标签 通配符选择器 * 分组选择器 选择器1,选择器2 层级选择器 子代选择器 选择器1 > 选择器2{} 后代选择器 选择器1 选择器2{} 相邻兄弟选择器 选择器1 + 选择器2{} 找出选择器1之后紧紧相邻的那个选择器2 所有兄弟选择器 选择器1 ~ 选择器2{} 找出选择器1之后的所有选择器2 注意 $("div").siblings() 找出所有兄弟 基本过滤器 选择器:first 找出第一个 :odd 找出奇数 :even 偶数 :gt(index) 大于索引 :lt(index) 小于索引 :eq(index) 等于索引 :last 找出最后一个 属性选择器 选择器[href] 单个属性 选择器[href][title] 多个属性 表单过滤器 :input 找出所有输入项 input textarea select :text :password 表单对象属性 找出select中被选中的哪项 option:selected 8、DOM操作 JS .appendChild() jQ .append() 在其后面添加子节点或子元素 .appendTo() .prepend() 在其前面添加子节点或子元素 .prependTo() .after() 在其后面添加一个兄弟节点 9、JQ对象的常用方法 $(function(){}) 文档加载完成事件 css() 修改css样式 prop() 修改属性/获取属性 prop 通常用来操作元素固有属性(建议使用) attr 操作一些自定义属性 html() 修改innerHTML addClass() 添加一个class样式 removeClass() 移除 10、遍历 $(arr).each(function(i, n){ }); $.each(arr, function(i, n){ });