jQuery思维导图

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。

中心主题

• 一、jQuery基本介绍
  • jQuery简介：jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
  • jQuery下载：压缩版本：查看代码都是进行压缩后的，变量名都是变动后的。 未压缩版本：代码都是原始的，可观性比较好。
  • jQuery引入： <script src="js/jquery-3.3.1.js" type="text/javascript" ></script>
  • jQuery基本语法：jQuery(选择器) 或 $(选择器) var $username = $(“#username”);#id获取元素 注：jQuery严格区分大小写
  • jQuery页面加载： $(function(){ });
  • jQuery对象和DOM转换： DOM对象转jQuery对象，语法：jQuery(DOM对象); jQuery对象转DOM对象，语法：jQuery对象[index];
• 二、jQuery选择器
  • 基本选择器： $("*"):所有元素 $("#id"):所有ID为id的元素 $(".class"):所有Class为class的元素 $("p"):所有<p>元素 $(".class1.class2"):所有Class="class1"且Class="class2"的元素
  • 层级选择器： $("parent child"):获得父元素内部的所有的子、子孙、元素(祖孙关系) $("parent>child"):获得父元素下面的子元素。（父子关系） $("prev+next"):获得prev元素同级下一个next元素。（兄弟关系） $("prev~siblings"):获得prev元素同级之后所有siblings元素。（兄弟关系）
  • 基本过滤选择器: $("p:first") 第一个 <p> 元素 $("p:last") 最后一个 <p> 元素 $("input:not(:empty)") 所有不为空的 input 元素 $("tr:even") 所有偶数 <tr> 元素 $("tr:odd") 所有奇数 <tr> 元素 $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始） $("ul li:gt(3)") 列出 index 大于 3 的元素 $("ul li:lt(3)") 列出 index 小于 3 的元素 $(":header") 所有标题元素 <h1> - <h6>
  • 属性选择器: $("[href]") 所有带有 href 属性的元素 $("[href='#']") 所有 href 属性的值等于 "#" 的元素 $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素 $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
  • 表单属性选择器: $(":enabled") 所有激活的 input 元素 $(":disabled") 所有禁用的 input 元素 $(":selected") 所有被选取的 input 元素 $(":checked") 所有被选中的 input 元素
• 三、重写JavaScript广告特效
  • 特效：隐藏&显示 show(speed,fn); //显示效果，参数1：speed显示速度，单位，毫秒。也可以传递固定的字符串：slow、mormal或fast。参数2：显示成功后回调的函数。 hide() //隐藏效果，参数同上。 Toggle() //切换效果，参数同上。
  • 特效：滑动效果 slideDown() //显示 slideUp() //隐藏 slideToggle() //切换
  • 特效：淡入淡出 fadeIn() //显示 fadeOut() //隐藏 fadeToggle() //切换 fadeTo(speed,opacity,[fn]) 可以指定透明度，opacity指定一个0-1之间透明度数字。
  • 1.在div内写image标签展示图片 2.在延迟函数内设置一个一次性定时器，间隔3秒弹出广告 3.弹出广告后在设置一个一次性定时器2秒后消除广告 $("#ad").show(); $("#ad").hide();
• 五、省市联动
  • 1.写三个select标签分别代表省市区 2.准备省市区数据，一维数组、二维数组、三维数组 3.将省的一位数组的值append到省下拉框中 4.给省下拉框绑定onchange事件 5.判断当前选中值是不是-1 6.不是的话获取到所有[省级选中的值][]市级数组 7.用.html清空市级下拉框追加数据 8.将市级数组的值append到市下拉框中 9.为市级下拉框绑定onchange事件获取选中的值 10.判断市级数组获取到的值是不是-1 11.不是的话获取到所有区级[省级选中的值][市级选中的值][]数组 12.用.html清空区级下拉框追加数据 13.将区级数组append到区级下拉框中 其它：当是-1时也要对市级下拉框和区级下拉框进行.html清空追加数据
  • 涉及到的方法： //遍历数值： shuzu.each(function(index,value){}) //追加数据： $('#pro').append("<option value="+index+">"+value+"</option>") //清空追加数据： $('#pro').html("<option value='0'>---请选择城市---</option>")
• 四、使用jQuery实现全选/全不选
  • 1.创建一个table表单第一列设置一个多选标签，同时为第一个复选框设置Id，其他的复选框设置value值
  • 2.设置一个批量操作按钮，设置Id
  • 3.在延迟函数中写一个多选脚本：获取第一个复选框，给第一个复选框绑定单击事件，获取其它复选框，设置其它复选框checked属性值等于第一个复选框checked值
  • 4.给批量操作按钮绑定一个单击事件，获取除去第一个之外所有被选中的checked的value值
  • //为按钮绑定单击事件 $("#selectAll").click(function(){} //为所有其它复选框赋值 $(".selectOne").attr("checked",this.checked); //获取所有被选中复选框的值 $(".checkeds [checked='checked']").val()
• 三、使用jQuery实现表格隔行换色
  • 1.写一个table表格来展示数据 2.写3个class分别代表 奇数行样式 偶数行样式 选中样式 3.获取<tr>除了第一行之后的奇数行 4.添加奇数行样式 5.给除了第一行的<tr>绑定onmouseover事件，添加选中class 6.给除了第一行的<tr>绑定onmouseleave事件，去除选中class $("table tr:odd")//获取table下的奇数行的对象 $("table tr:even").addClass("even");//给元素添加class $("table tr:even").removeClass("even");//移除元素class $("#mover").mouserover(function(){})//绑定鼠标悬浮事件 $("#mover").mouserleave(function(){})//绑定鼠标移除事件
• 当遇到table表单时要注意 <thead>与<tbody>