简介：简洁的JavaScript框架，优化HTML文档操作、事件处理、动画设计和Ajax交互
jQuery的封装原理推导过程：
1.js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖；
2.使用对象封装，将代码封装到对象中，但是如果对象被覆盖，则全部失败，风险极高；
3.使用工厂模式，将代码进行封装，但是并没有解决问题；
4.将封装的函数名字去除，避免重复，但是函数没有办法调用了；
5.匿名自调用，可以在页面加载的时候调用一次，但是不能重复调用，并且数据无法获取；
6.使用闭包，将数据一次性挂载到Window对象下，因为Window是关键字，不会重复；
闭包原理：在全局区中不能够获取函数体内的数据，使用更大作用域的变量来记录小作用域的变量的值；
JQuery的使用：
网页添加JQuery：
方法一：使用HTML的<script>标签引用它：
将下载的文件存放在网页的同一目录下
<head>
<script src="jquery-1.10.2.min.js">
</script>
</head>
方法二：
不需要下载存放 jQuery，也可以通过 CDN（内容分发网络）引用它，
Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery ，利用浏览器的缓存，直接可引用它；
如：百度CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
jQuery官网3.0版本引用地址
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
来自 <http://www.jq22.com/jquery-info122>
jquery的选择器学习：
基本选择器
ID选择器
标签选择器
类选择器
组合选择器
层级选择器
简单选择器
内容选择器
可见性选择器
属性选择器
子元素选择器
注意：
jQuery中选择器获取的是存储了HTML元素对象的数据；
jQuery获取的元素对象不能够直接使用js的内容，按照数组的取出方式将对象取出后可以使用js的内容；
jQuery对我们提供了多种多样的选择器类选择需要操作的HTML元素对象；
<script type="text/javascript">
//按ID获取元素
function testId(){
var inp=$("#uname");
alert(inp.val());
}
//获取属性
function testEle(){
var inps=$("input");
alert(inps.length);
}
//获取子元素
function testdiv(){
var divs=$("#showdiv>input");
alert(divs.length);
}
</script>
jQuery操作元素属性：
获取：
对象名.attr("属性名") //返回当前属性值
注意此种方式不能获取value属性的实时数据，要使用对象名.val()进行获取；
修改：
对象名.attr("属性名","属性值");
jQuery操作元素内容：
获取：
对象名.html() //返回当前对象的所有内容，包括HTML标签；
对象名.text() //返回当前对象的文本内容，不包括HTNL标签；
修改：
对象名.html("新内容") //新的内容会将原有内容覆盖，HTML标签会被解析执行；
对象名.text("新内容") //新的内容会将原有内容覆盖，HTML标签不会被解析执行；
jQuery操作元素样式：
操作样式：
对象名.css({"width":"300px","height":"300px"});
注意：该方法是批量修改多个样式；
获取元素样式：
对象名.css(属性名); //返回当前属性的样式值；
增加元素样式：
对象名.addClass(类名);
删除元素样式：
对象名.removeClass(类选择器名);
jQuery操作文档结构学习：
获取元素对象
1.内部插入
Append(内容) 将指定的内容追加到对象的内部
Appendto(元素对象) 将指定的元素对象追加到指定的对象内容里
Prepend() 将指定的内容追加到对象的内部的前面
Prependto() 将指定的元素对象追加到指定的对象内容前面
2.外部插入
After 将指定的内容追加到指定的元素后面
Before 将指定的内容追加到指定的元素前面
insertAfter 把元素插入到另一个指定的元素集合后面
insertBefore 把元素插入到另一个指定的元素集合前面
3.替换
replaceWith（）
4.删除
empty（）
jQuery操作事件：
对象名.bind（事件，执行函数） //jQuery绑定事件，可实现1个事件添加不同的监听函数；动态的追加事件和监听函数；
注意：js方式添加的事件不能移除；
Unbind 解绑
元素对象名.one("事件名",function) //给指定元素添加一次性事件，事件触发执行一次就失效；
页面载入事件：
$(document).ready(function(){})；
//页面载入成功后会调用传入的函数对象
注意：
此方式可以给页面载入动态的增加多个函数对象，不会被覆盖；
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
