1、jQuery 的属性操作

jQuery 属性操作
html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。
text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。
val() 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样。
不传参数，是获取；传递参数，是设置

attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等
attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

2、jQuery 练习

// 在 each 遍历的 function 函数中，有一个 this 对象。这个 this 对象是当前正在遍历到的 dom 对象
// 在事件的 function 函数中，有一个 this 对象，这个 this 对象是当前正在响应事件的 dom 对象

4、DOM 的增删改

内部插入：
appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素
$(content).appendTo(selector)
prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素
$(content).prependTo(selector)

外部插入：
insertAfter() a.insertAfter(b) 得到 ba
$(selector).insertAfter(element)
insertBefore() a.insertBefore(b) 得到 ab
$(selector).insertBefore(element)

替换:
replaceWith() a.replaceWith(b) 用 b 替换掉 a
$(selector).replaceWith(content)
replaceAll() a.replaceAll(b) 用 a 替换掉所有 b
$(content).replaceAll(selector)

| content | 必需。规定替换被选元素的内容。
可能的值:
- HTML 代码 - 比如 (“

replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。
该方法与 replaceAll() 执行的任务相同，但颠倒了参数。

删除：
remove() a.remove(); remove() 方法移除被选元素，包括所有文本和子节点。
$(selector).remove()
empty() a.empty(); empty() 方法从被选元素移除所有内容，包括所有文本和子节点。标签还在
$(selector).empty()

6、CSS 样式操作。

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作（没有就添加，有就删除）
这些类是css中通过.class选择器定义的
css() - 设置或返回样式属性
offset() 获取和设置元素的坐标。

7、jQuery 动画

基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。
以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
淡入淡出动画
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle() 淡入/淡出 切换
以上动画除了fadeTo()方法都可以添加以下参数。
1、第一个参数是动画执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)

8、jQuery 事件操作

$( function(){} );
和
window.onload = function(){}
的区别？
他们分别是在什么时候触发？
1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
2、原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。

他们触发的顺序？
1、jQuery 页面加载完成之后先执行
2、原生 js 的页面加载完成之后

他们执行的次数？
1、原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。
2、jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

1、window.onload：在页面所有资源加载完后执行，如果有多个定义则只执行最后一个
2、$(function(){})：在DOM加载完成时运行的代码，如果有多个定义则依次执行

通用的页面加载js有四种方式：
1.window.onload = function(){}; —-js
2.$(window).load(function(){});——Jquery
3.$(document).ready(function(){});–Jquery
4.$(function(){});———————Jquery
其中1和2为同一种，3和4为同一种
1、2表示：页面全部加载完成（引用文件，图片）在加载内部函数，且只能执行一个（当文件由多个onload或者load，只加载最后一个）。
3、4在window.onload执行前执行的，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

jQuery 中其他的事件处理方法：

$(function(){
  $("h5").click(function(){//传function是绑定事件
    alter("h5单机事件");
  })
  $("button").click(function(){
    $("h5").click();//不传function是触发事件
  })
});

click() 它可以绑定单击事件，以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件。

.bind("click",function(){ 绑定一种事件
  ....
                        })
.bind({"click":function(){},"mouseover":function(){}...)})绑定多个事件,通过对象的方式
.bind("click mouseover mouseout",function(){ 绑定多个事件
  ....
                        })

one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
unbind() 跟 bind 方法相反的操作，解除事件的绑定
live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面 动态创建出来的也有效

事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢？
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

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 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#areaDiv").bind("mouseover mouseout",function (event) { 
  if (event.type == "mouseover") { 
    console.log("鼠标移入"); 
  } else if (event.type == "mouseout") { 
    console.log("鼠标移出"); 
  } 
});
confirm()//返回值为true/false

04尚硅谷_jQuery王振国 - 课堂笔记.pdf