用到的文件
style.css
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}form div { margin:5px 0;}.int label { float:left; width:100px; text-align:right;}.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}.sub { padding-left:100px;}.sub input { margin-right:10px; }.formtips{width: 200px;margin:2px;padding:2px;}.onError{ background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center; padding-left:25px;}.onSuccess{ background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center; padding-left:25px;}.high{ color:red;} div,span,p { width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini { width:55px; height:55px; background-color: #aaa; font-size:12px; } div.hide { display:none; }table { border:0;border-collapse:collapse;}td { font:normal 12px/17px Arial;padding:2px;width:100px;}th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}.even { background:#FFF38F;} /* 偶数行样式*/.odd { background:#FFFFEE;} /* 奇数行样式*/.selected { background:#FF6500;color:#fff;} jquery-1.11.0.js
什么JQuery:
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
JQuery的作用:
1. 写更少的代码,做更多的事情: write Less ,Do more
2. 将我们页面的JS代码和HTML页面代码进行分离
为什么学习JQuery:
提高我们的工作效率
JQuery入门
JQ中根据ID查找元素
全都是根据选择器去找的#ID{}.类名{}$("#ID的名称") -
JQuery选择器
- ID选择器 : #ID的名称
- 类选择器: 以 . 开头 .类名 - 元素选择器: 标签的名称 - 通配符选择器: * - 选择器,选择器: 选择器1,选择器2表单选择器
层级选择器
- 子元素选择器: 选择器1 > 选择器2
- 后代选择器: 选择器1 儿孙 - 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟 - 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟
基本过滤器
选择器:first : 找出的是第一个
:last :even 找出索引为偶数 :odd 找出奇数索引 :gt(index) : 大于索引 :lt(index) 小于 :eq(index) 等于
基本选择器
ID选择器: #ID的名字
类选择器: .类名 元素选择器: 标签名称 通配符选择器: * 选择器分组: 选择器1,选择器2
属性选择器
选择器[href] : 单个属性
选择器[href][title] : 多个属性
选择器[href][title='test'] : 多个属性,包含值herf 111 herf 222
$(function(){ //找到有name属性的input $("#btn1").click(function(){ $("input[name]").attr("checked",true); }); $("#btn2").click(function(){ $("input[name='accept']").attr("checked",true); }); $("#btn3").click(function(){ $("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true); }); }); 表单过滤器
:input 找出所有输入项: input textarea select
:text :password-
JQ查找元素
-
JQ和JS对象之间的转换
JQ对象,只能调用JQ的属性和方法
JS对象 只能调用JS的属性和方法
-
JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)
1. 导入JQ相关的文件
2. 文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器 3. 确定相关操作的事件 4. 事件触发函数 5. 函数里面再去操作相关的元素 显示和隐藏 img.style.display-
JQ动画效果
show()
hide() slideUp slideDown fadeIn fadeOut animate : 自定义动画步骤分析：
1. 导入JQ的文件 2. 编写JQ的文档加载事件 3. 启动定时器 setTimeout("",3000); 4. 编写显示广告的函数 5. 在显示广告里面再启动一个定时器 6. 编写隐藏广告的函数
-
使用JQuery完成页面定时弹出广告
定时器:
setInterval clearInterval
setTimeout clearTimeout
显示: img.style.display = "block"
隐藏: img.style.display = "none"
img 对象
style属性: style对象
使用JQuery完成表格的隔行换色
获得所有的行
table.rows[]
修改行的颜色
row.bgColor ="red"
row.style.backgroundColor = "black"
row.style.background = "red"
"background-color:red"
"background:red"
| 分类ID | 分类名称 | 分类商品 | 分类描述 | 操作 | |
| 1 | 手机数码 | 华为,小米,尼康 | 黑马数码产品质量最好 | 修改|删除 | |
| 2 | 成人用品 | 充气的 | 这里面的充气电动硅胶的 | 修改|删除 | |
| 3 | 电脑办公 | 联想,小米 | 笔记本特卖 | 修改|删除 | |
| 4 | 馋嘴零食 | 辣条,麻花,黄瓜 | 年货 | 修改|删除 | |
| 5 | 床上用品 | 床单,被套,四件套 | 都是套子 | 修改|删除 |
| 分类ID | 分类名称 | 分类商品 | 分类描述 | 操作 | |
| 1 | 手机数码 | 华为,小米,尼康 | 黑马数码产品质量最好 | 修改|删除 | |
| 2 | 成人用品 | 充气的 | 这里面的充气电动硅胶的 | 修改|删除 | |
| 3 | 电脑办公 | 联想,小米 | 笔记本特卖 | 修改|删除 | |
| 4 | 馋嘴零食 | 辣条,麻花,黄瓜 | 年货 | 修改|删除 | |
| 5 | 床上用品 | 床单,被套,四件套 | 都是套子 | 修改|删除 |
使用JQuery完成复选框的全选效果
checked属性
如何获取所有复选框:
document.getElementsByName get Elements By Name 数据库里面
| 分类ID | 分类名称 | 分类商品 | 分类描述 | 操作 | |
| 1 | 手机数码 | 华为,小米,尼康 | 黑马数码产品质量最好 | 修改|删除 | |
| 2 | 成人用品 | 充气的 | 这里面的充气电动硅胶的 | 修改|删除 | |
| 3 | 电脑办公 | 联想,小米 | 笔记本特卖 | 修改|删除 | |
| 4 | 馋嘴零食 | 辣条,麻花,黄瓜 | 年货 | 修改|删除 | |
| 5 | 床上用品 | 床单,被套,四件套 | 都是套子 | 修改|删除 |
使用JQuery完成省市联动效果
需求分析:
在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市 技术分析: 1. 准备工作 : 城市信息的数据 2. 添加节点 : appendChild (JS) 1. append : 添加子元素到末尾 2. appendTo : 给自己找一个爹,将自己添加到别人家里 3. prepend : 在子元素前面添加 4. after : 在自己的后面添加一个兄弟 3. 遍历的操作: 步骤分析: 1. 导入JQ的文件 2. 文档加载事件:页面初始化 3. 进一步确定事件: change事件 4. 函数: 得到当前选中省份 5. 得到城市, 遍历城市数据 6. 将遍历出来的城市添加到城市的select中$(function(){ $("#province").change(function(){// alert(this.value); //得到城市信息 var cities = provinces[this.value]; //清空城市select中的option /*var $city = $("#city"); //将JQ对象转成JS对象 var citySelect = $city.get(0) citySelect.options.length = 0;*/ $("#city").empty(); //采用JQ的方式清空 //遍历城市数据 $(cities).each(function(i,n){ $("#city").append(""); }); }); }); JS中的数组: ["城市"]
new Array()
DOM树操作:
创建节点: document.createElement
创建文本节点: document.createTextNode
添加节点: appendChild
- JQ遍历
- JQ中DOM操作
- 省市联动
使用JQuery完成下列列表左右选择
select下拉列表
multiple 允许多选
ondblclick : 双击事件
for循环遍历,一边遍历一边移除出现的问题
| 分类名称 | |
| 分类描述 | |
| 分类商品 | |
使用JQuery完成表单的校验(扩展)
事件:
获得焦点事件: onfocus
失去焦点事件: onblur
按键抬起事件: onkeyup
鼠标移入: onmouseenter
鼠标移出: onmouseout
JS引入外部文件 : script