<meta charset="utf-8">
一、jQuery简介
1、什么是jQuery
jQuery 是一套兼容多浏览器的 javascript 脚本库.
核心理念是写得更少，做得更多，
使用 jQuery 将极大的提高编写 javascript 代码的效率,帮助开发者节省了大量的工作,让 写出来的代码更加优雅, 更加健壮，“如虎添翼”. 同时网络上丰富的 jQuery 插件也让我 们的工作变成了"有了 jQuery,一切 soeasy."--因为我们已经站在巨人的肩膀上了。
jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自 世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今， jQuery 已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超 过 55%在使用 jQuery
2、下载和安装
- 官网：http://jquery.com/
- 版本：
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)
（1）完整版 : jquery-2.1.4.js -->学习版本(学习源码 想高手学习是最好学习方法)
（2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
- 优点：
（1）提供了强大的功能函数
（2）解决浏览器兼容性问题
（3）实现丰富的 UI 和插件
（4）纠正错误的脚本知识
- 安装：
在页面引入即可 ：<script src="js/jquery.js" type="text/javascript" ></script>
3、核心
"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象，通过该对象 可以获取 jQuery 对象，调用 jQuery 提供的方法等。
注意：只有 jQuery 对象才能调用 jQuery 提供 的方法。
二、DOM 对象和 jQuery 包装集对象
原始的 Dom 对 象只有 DOM 接口提供的方法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery 获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象才能使用 jQuery 提 供的方法。
1、DOM对象
javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法:
// 得到DOM对象
var mydivDom = document.getElementById("mydiv");
console.log(mydivDom);
2、 jQuery 包装集|对象
可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组,
都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集:
var jQueryObject = $("#testDiv");
3、DOM与jQuery互转
//Dom 对象转为 jQuery 对象,只需要利用$()方法进行包装即可
var domDiv = document.getElementById('mydiv'); // 获取 Dom 对象
mydiv = $(domDiv);
//jQuery 对象转 Dom 对象，只需要取数组中的元素即可
//第一种方式 获取 jQuery 对象
var jqueryDiv = jQuery('#mydiv');
//第二种方式 获取 jQuery 对象 jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0];
//将以获取的 jquery 对象转为 dom
三、jQuery选择器
1、层次性选择器
层次选择器 Hierarchy
选择器 名称 举例
后代选择器 ancestor descendant $("#parent div")选择 id 为 parent 的元素的所有 div 元素
子代选择器 parent > child $("#parent>div")选择 id 为 parent 的直接 div 子元素
相邻选择器 prev + next $(".blue + img")选择 css 类为 blue 的下一个 img 元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素
示例:
// 后代选择器 ancestor descendant
var houdai = $("#parent div");
console.log(houdai);
// 子代选择器 parent > child
var zidai = $("#parent > p");
console.log(zidai);
// 相邻选择器 prev + next （1、只找当前元素的下一个同级 2、只找一个）
var next = $("#parent + div");
console.log(next);
// 同辈选择器 prev ~ sibling
var tb = $("#parent ~ div");
console.log(tb);
2、基础选择器
基础选择器 Basics
选择器 名称 举例
id 选择器 #id $("#testDiv")选择 id 为 testDiv 的元素（id属性值）
元素名称选择器 element $("div")选择所有 div 元素 （元素名称）
类选择器 .class $(".blue")选择所有 class=blue 的元素 （class属性值）
选择所有元素 * $("*")选择页面所有元素
组合选择器 selector1, $("#testDiv,span,.blue")同时选中这几个选择器匹配的元素
selector2,
selectorN
示例:
// id 选择器 #id 如果有多个同名ID，以第一个为准
console.log($("#mydiv1"));
// 元素名称选择器 element
console.log($("div"));
// 类选择器 .class
console.log($(".blue"));
// 选择所有元素 *
console.log($("*"));
// 组合选择器 selector1,selector2,selectorN
console.log($("#mydiv,div,span,.blue"));
3、表单选择器
过滤选择器
:checked:得到所有checked为true的元素
:eq(index):匹配指定下标的元素
:gt(index):大于指定下标的
:odd 获取所有的奇数位置的元素
:even 获取所有的偶数位置的元素
var cked = $(":checked");
console.log(cked);
console.log($(":checkbox:checked"));
var eq1 = $(":checkbox:eq(0)");
console.log(eq1);
var gt1 = $(":checkbox:gt(0)");
console.log(gt1);
四、jQuery DOM操作
1、操作元素的属性
操作元素的属性
获取属性
方法 说明 举例
attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 attr('checked')attr('name')
checked，没有选中返回 undefined。
prop(属性名称) 获取具有 true 和 false 两个属性的属性值 prop('checked')
设置属性
attr("属性名","属性值")
prop("属性名","属性值")
移除属性
removeAttr("属性名")
attr()与prop()的区别：
共同点：都可以获取元素的属性
不同点：
1、attr()可以获取自定义属性和固有属性的值，而prop()只能获取固有属性的值 （固有属性：元素本身就有的属性）
2、操作返回值是boolean类型的属性时，attr()返回的是对应的值，而prop()返回的是true和false
如何选择：
如果属性的返回值是boolean类型时，用prop()方法； （checked、selected、disabled）
如果是非boolean类型，则使用attr()方法
示例：
// 获取元素的属性 （固有属性）
var name1 = $("#ck1").attr("name");
console.log(name1);
var name2 = $("#ck2").prop("name");
console.log(name2);
// 获取元素的属性 （自定义属性属性）
var a1 = $("#ck1").attr("aa");
var a2 = $("#ck1").prop("aa");
console.log(a1,a2);
// 获取元素的属性 （设置过属性且属性返回值是boolean类型）
var c1 = $("#ck1").attr("checked");
var c2 = $("#ck1").prop("checked");
console.log(c1,c2);
// 获取元素的属性 （未设置过属性且属性返回值是boolean类型）
var c11 = $("#ck2").attr("checked");
var c22 = $("#ck2").prop("checked");
console.log(c11,c22);
// 设置元素的属性值
$("#ck1").attr("value","1");
$("#ck2").prop("value","2");
// attr()
$("#ck1").attr("checked","checked");
$("#ck2").prop("checked",true);
// 移除属性
$("#ck1").removeAttr("name");
2、操作元素的样式
操作元素的样式
方法 说明
attr(“class”) 获取 class 属性的值，即样式名称
attr(“class”,”样式名”) 修改 class 属性的值，修改样式
addClass(“样式名”) 添加样式名称
css() 添加具体的样式
removeClass(class) 移除样式名称
增加元素的具体样式，格式：
1）css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})
例：css({"background-color":"red","color":"#fff"})2）css(“样式名”,”样式值”)
例：css('color','white')
2）css(“样式名”,”样式值”)
例：css('color','white')
attr():设置样式时，会重新设置class的属性值，所以会将原来的样式覆盖
addClass():添加样式，原来的样式依然保留，如果出现了相同样式，以后定义的样式为准
css():设置具体的样式（设置行内样式，写在style属性中的样式）
3、操作元素的内容
操作元素的内容
方法 说明
html() 获取元素的 html 内容
html("html 内容") 设定元素的 html 内容
text() 获取元素的文本内容，不包含 html
text("text 内容") 设置元素的文本内容，不包含 html
val() 获取元素 value 值
val(‘值’) 设定元素的 value 值
html()和text()
html()可以识别数据中的html标签并 显示出来；
text()不识别html标签，会当做纯文本显示
取值时，html()能够获取到元素中的html代码，text()只会获取纯文本
表单元素：取值赋值使用 val()
文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域、（按钮）等
非表单元素：取值赋值使用 html()和text()
div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等
4、创建元素
在 jQuery 中创建元素很简单，直接使用核心函数即可
$(‘元素内容’)
$(‘<p>this is a paragraph!!!</p>’)
5、添加元素
添加元素
方法 说明
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数
可以是字符、HTML 元素标记。
$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是
字符、HTML 元素标记。
$(content).appendTo(sector) 把 content 元素或内容插入 selector 元素内，默认是在尾部
before() 在元素前插入指定的元素或内容:$(selector).before(content)
after() 在元素后插入指定的元素或内容:$(selector).after(content)
6、删除元素
删除元素
方法 说明
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty() 清空所选元素的内容
7、遍历元素
遍历元素： each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element 是当前的元素，此时是 dom 元素。
$(".pink").each(function(index,element){
console.log(index);
console.log(element);
console.log($(element).html());
});
五、jQuery事件
1、ready加载事件
ready()加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function(){})等价于$(function(){})
ready()加载事件和onload加载事件：
ready()加载事件在dom结构（htm标签）加载完毕后，就执行
onload加载事件在dom结构（htm标签）及引入的外部资源（js文件、css文件等）加载完毕之后才执行
示例：
<script type="text/javascript">
// JS
window.onload = function() {
console.log("js的预加载事件....");
}
// jquery
$(document).ready(function(){
console.log("jquery的预加载事件....");
console.log($("#mydiv"));
});
$(function(){
console.log("jquery的预加载事件2....");
});
</script>
<body>
<div id="mydiv">
预加载事件
</div>
</body>
//打印结果
js的预加载事件....
10-ready加载事件.html?__hbt=1559225739497:16 jquery的预加载事件....
10-ready加载事件.html?__hbt=1559225739497:17 jQuery.fn.init(1)
10-ready加载事件.html?__hbt=1559225739497:21 jquery的预加载事件2....
2、绑定事件
bind()绑定元素事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind( eventType [, eventData], handler(eventObject))
eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可
以包括如下：
blur, focus, focusin, focusout, load, resize, scroll, unload, click,
dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,
mouseleave,change, select, submit, keydown, keypress, keyup, error [, eventData]：传递的参数，格式：{名:值,名 2:值 2}
handler(eventObject)：该事件触发执行的函数
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第一个参数：事件的类型
3.相应事件触发的，执行的操作
第二个参数：函数
3、总结与注意：
* 绑定事件只能使用匿名绑定或者使用已声明的方法时不能加括号
function test(){
console.log(1);
}
//绑定成功
$("#btn1").click(function(){
test();
})
$("#btn2").click(test);
//绑定失败
$("#btn2").click(test());
* jQuery中each
类似于javascript的for循环 ，但不同于for循环的是在each里面不能使用break结束循环，也不能使用continue来结束本次循环，想要实现类似的功能就只能用return,
break 用return false
continue 用return true
