一、jQuery的属性操作
- html() 它可以设置和获取起始标签和结束标签中的内容，跟 dom 属性 innerHTML 一样。
- text() 它可以设置和获取起始标签和结束标签中的文本， 跟 dom 属性 innerText 一样。
- val() 它可以设置和获取表单项的 value 属性值， 跟 dom 属性 value 一样
val 方法同时设置多个表单项的选中状态：
Title
单选： radio1
radio2
多选：
checkbox1
checkbox2
checkbox3
下拉多选 ：
下拉单选 ：
二、jQuery练习一
1. 全选、全不选、反选
Title
三、DOM的增删改
内部插入：
- appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素
- prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素
外部插入：
- insertAfter() a.insertAfter(b) 得到 ba
- insertBefore() a.insertBefore(b) 得到 ab
替换:
- replaceWith() a.replaceWith(b) 用 b 替换掉 a
- replaceAll() a.replaceAll(b) 用 a 替换掉所有 b
删除：
- remove() a.remove(); 删除 a 标签
- empty() a.empty(); 清空 a 标签里的内容
四、jQuery练习二
1. 从左到右，从右到左
Title
2. 动态添加、删除表格记录
Title
Name
Email
Salary
Tom
[email protected]
5000
Delete
Jerry
[email protected]
8000
Delete
Bob
[email protected]
10000
Delete
添加新员工
name:
email:
salary:
五、CSS 样式操作
- addClass() 添加样式
- removeClass() 删除样式
- toggleClass() 有就删除，没有就添加样式
- offset() 获取和设置元素的坐标
Insert title here
六、jQuery动画
基本动画：
- show() 将隐藏的元素显示
- hide() 将可见的元素隐藏
- toggle() 可见就隐藏，不可见就显示。
以上动画方法都可以添加参数：
- 第一个参数是动画 执行的时长，以毫秒为单位
- 第二个参数是动画的回调函数 (动画完成后自动调用的函数)
淡入淡出动画：
- fadeIn() 淡入（慢慢可见）
- fadeOut() 淡出（慢慢消失）
- fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
- fadeToggle() 淡入/淡出 切换
1. CSS_动画 品牌展示
需求：
- 点击按钮的时候，隐藏和显示卡西欧之后的品牌。
- 当显示全部内容的时候，按钮文本为“显示精简品牌” 然后，小三角形向上。所有品牌产品为默认颜色。
- 当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌” 然后小三形向下。并且把 佳能，尼康的品牌颜色改为红色（给 li 标签添加 promoted 样式即可）
Title
七、jQuery事件操作
1. $(function(){}); 和 window.onload=function(){} 的区别 ？
他们分别是在什么时候触发？
- jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行
- 原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载 完成
他们触发的顺序？
- jQuery 页面加载完成之后先执行
- 原生 js 的页面加载完成之后
他们执行的次数？
- 原生 js 的页面加载完成之后，只会执行最后一次的赋值函数
- jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行
2. jQuery 中其他的事件处理方法
- click() 它可以绑定单击事件，以及触发单击事件 mouseover() 鼠标移入事件
- mouseout() 鼠标移出事件
- bind() 可以给元素一次性绑定一个或多个事件
- one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
- unbind() 跟 bind 方法相反的操作，解除事件的绑定
- live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出 来的也有效
3. 事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去 响应。
那么如何阻止事件冒泡呢？
在子元素事件函数体内，returnfalse; 可以阻止事件的冒泡传递。
4. javaScript 事件对象
事件对象，是封装有触发的事件信息的一个 javascript 对象。
我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。
如何获取呢 javascript 事件对象呢？
在给元素绑定事件的时候，在事件的 function(event) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象
// 1. 原生javascript获取事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}
// 2. jQuery代码获取事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
// 3. 使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});
5. 练习 图片跟随
Title
