锋利的jQuery读书笔记 第3章第4章 第5章
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了锋利的jQuery读书笔记 第3章第4章 第5章相关的知识，希望对你有一定的参考价值。
第三章
DOM 中有一个非常重要的功能，就是节点模型，也就是 DOM 中的“M” 。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。
一．创建节点
为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。
var box = $(‘<div id="box">节点</div>‘); //创建一个节点
$(‘body‘).append(box); //将节点插入到<body>元素内部
二．插入节点
在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢，jQuery 提供了其他几个方法来插入节点。
三．包裹节点
jQuery 提供了一系列方法用于包裹节点， 那包裹节点是什么意思呢？其实就是使用字符串代码将指定元素的代码包含着的意思。
四．节点操作
除了创建、插入和包裹节点，jQuery 还提供了一些常规的节点操作方法：复制、替换和
删除节点。
1、复制节点
$(‘body‘).append($(‘div‘).clone(true)); //复制一个节点添加到 HTML 中
注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上 true
参数的话，这个元素附带的事件处理行为也复制出来。
2、删除节点
$(‘div‘).remove(); //直接删除 div 元素
注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本事也可以
带选择符参数的，比如：$(‘div‘).remove(‘#box‘);只删除 id=box 的 div。
3、保留事件的删除节点
$(‘div‘).detach(); //保留事件行为的删除
注意：.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节
点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。
4、清空节点
$(‘div‘).empty(); //删除掉节点里的内容
5、替换节点
$(‘div‘).replaceWith(‘<span>节点</span>‘); //将 div 替换成 span 元素
$(‘<span>节点</span>‘).replaceAll(‘div‘); //同上
五、设置元素及内容
我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候， 我
们就可以对这些元素进行 DOM 的操作。 那么， 最常用的操作就是对元素内容的获取和修改。
六．元素属性操作
除了对元素内容进行设置和获取，通过 jQuery 也可以对元素本身的属性进行操作，包
括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。
七、元素样式操作
元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种
操作方法。而在整个 jQuery 使用频率上来看，CSS 样式的操作也是极高的，所以需要重点
掌握。
八、CSS 方法
第四章
一．绑定事件
bind(type, [data], fn)
type 表示一个或多个类型的事件名字符串；
[data]是可选的，作为 event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；
fn 表示绑定到指定元素的处理函数。
二、合成事件
jQuery 提供了许多最常用的事件效果，组合一些功能实现了一些复合事件，比如切换功
能、智能加载等。
三、事件对象
四、事件冒泡
五、动画效果
1、hide() 和 show() 显示隐藏
2、fadeIn() 、fadeOut() 、fadeToggle() 、fadeTo() 淡入淡出
3、slideDown() 、slideUp() 、slideToggle() 滑动
4、jQuery animate() 方法用于创建自定义动画。
5、jQuery stop() 方法用于停止动画或效果，在它们完成之前。
第五章
表单作为 HTML 中一种特殊的元素，操作方法较为多样性和特殊性，开发者不但可以使用之前的常规选择器或过滤器，也可以使用 jQuery 为表单专门提供的选择器和过滤器来准确的定位表单元素。
一．常规选择器
我们可以使用 id、 类(class)和元素名来获取表单字段， 如果是表单元素， 都必须含有 name属性，还可以结合属性选择器来精确定位。
$(‘input‘).val(); //元素名定位，默认获取第一个
$(‘input‘).eq(1).val(); //同上，获取第二个
$(‘input[type=password]‘).val(); //选择 type 为 password 的字段
$(‘input[name=user]‘).val(); //选择 name 为 user 的字段
那么对于 id 和类(class)用法比较类似，也可以结合属性选择器来精确的定位，在这里我
们不在重复。对于表单中的其他元素名比如：textarea、select 和 button 等，原理一样，不在
重复。
二．表单选择器
虽然可以使用常规选择器来对表单的元素进行定位， 但有时还是不能满足开发者灵活多变的需求。所以，jQuery 为表单提供了专用的选择器。
三．表单过滤器
jQuery 提供了四种表单过滤器，分别在是否可以用、是否选定来进行表单字段的筛选过滤。
以上是关于锋利的jQuery读书笔记 第3章第4章 第5章的主要内容，如果未能解决你的问题，请参考以下文章