jQuery
一、jQuery 的下载和安装
下载
jQuery
安装
在页面引入即可<script src="js/jquery.js" type="text/javascript" ></script>
二、jQuery 核心
"$"
"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象
三、DOM 对象和 jQuery 包装集对象
Uncaught ReferenceError: $ is not defined 报错原因：
1、没有引入jquery文件
2、引入的jquery文件顺序不对
DOM对象转 Jqyery包装集对象
将DOM对象放到$()括号中
// 得到DOM对象
var mydivDom = document.getElementById("mydiv");
// 得到Jquery包装集对象
var mydivJquery = $("#mydiv");
Jqyery包装集对象转DOM对象
Jqyery包装集取下标 Jqyery包装集[0]
/*Jqyery包装集对象转DOM对象*/
ar jtod = mydivJquery[0];
通过each()方法遍历 jQuery
对象数组得到的对象是 Dom 对象，可以通过$()转为 jQuery 对象
mydivJquery.each(function(index,element){ })
四、jQuery 选择器
1. 基础选择器 Basics
id 选择器
$("#testDiv")选择 id 为 testDiv 的元素（id属性值）
元素名称选择器
$("div")选择所有 div 元素 （元素名称）
类选择器
$(".blue")选择所有 class=blue 的元素 （class属性值）
选择所有元素
$("*")选择页面所有元素
子主题 5
$("#testDiv,span,.blue")同时选中这几个选择器匹配的元素
2.层次选择器 Hierarchy
后代选择器
$("#parent div")选择 id 为 parent 的元素的所有 div 元素
子代选择器
$("#parent>div")选择 id 为 parent 的直接 div 子元素
相邻选择器
$(".blue + img")选择 css 类为 blue 的下一个 img 元素
1、只找当前元素的下一个同级
2、只找一个
同辈选择器
$(".blue ~ img")选择 css 类为 blue 的之后的 img 元素
3.表单选择器
元素选择器
var inputs = $("input");
表单选择器
var inps = $(":input");
获取所有的复选框
var cks = $(":checkbox");
过滤选择器
console.log($("input:checkbox"));
:checked:得到所有checked为true的元素
:eq(index):匹配指定下标的元素
:gt(index):大于指定下标的
:odd 获取所有的奇数位置的元素
:even 获取所有的偶数位置的元素
五、jQuery DOM 操作
1. 操作元素的属性
获取属性
attr(属性名称)
获取指定的属性值，操作 checkbox 时选中返回checked，没有选中返回 undefined
prop(属性名称)
获取具有 true 和 false 两个属性的属性值
设置属性
attr("属性名","属性值")
prop("属性名","属性值")
移除属性
removeAttr("属性名")
attr()与prop()的区别：
共同点：
都可以获取元素的属性
不同点：
1、attr()可以获取自定义属性和固有属性的值，而prop()只能获取固有属性的值 （固有属性：元素本身就有的属性）
2、操作返回值是boolean类型的属性时，attr()返回的是对应的值，而prop()返回的是true和false
如何选择：
如果属性的返回值是boolean类型时，用prop()方法； （checked、selected、disabled）
如果是非boolean类型，则使用attr()方法
2.操作元素的样式
attr("class")
获取 class 属性的值，即样式名称
attr("class","样式名")
修改 class 属性的值，修改样式
attr():设置样式时，会重新设置class的属性值，所以会将原来的样式覆盖
addClass("样式名")
添加样式名称
addClass():添加样式，原来的样式依然保留，如果出现了相同样式，以后定义的样式为准
css()
添加具体的样式
设置一个样式
$("#remove").css("color","red");
同时设置多个
$("#remove").css({"font-weight":700,"height":"200px"});
css():设置具体的样式（设置行内样式，写在style属性中的样式）
removeClass(class)
移除样式名称
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.创建元素、添加元素
创建元素
$(‘元素内容’)
添加元素
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)
5.删除元素、遍历元素
remove()
删除所选元素或指定的子元素，包括整个标签和内容一起删
empty()
清空所选元素的内容
遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element 是当前的元素，此时是 dom 元素。
六、Jquery 事件
1. ready()加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function(){})等价于$(function(){})
2. bind()绑定元素事件
简单的 bind()事件
$(selector).bind( eventType [, eventData], handler(eventObject))
绑定多个事件
$("#upwd").bind("blur",function(){
console.log("....");
}).bind("focus",function(){
console.log("。。。");
});
$("#upwd").bind({
"blur":function(){
console.log("失焦...");
},
"focus":function(){
console.log("聚焦。。。");
}
});
