JQuery相关了解
1.Jquery对象
1.1安装
下载网址：http://jquery.com/
有两种加载方式
1.1.1文件路径加载方法
<script type="text/javascript" src="JS文件路径"></script>
1.1.2网址加载方法
<script src="http://code.jquery-1.11.2.min.js"></script>
1.2.jQuery核心
$符号在JQuery中代表对Jquery对象的引用.jquery是核心对象。通过该对象可以获取jquery对象，
调用jquery提供的方法等，只有jquery对象才能调用jquery提供的方法
$<==>jQuery
1.3.Dom对象与Jquery包装集对象
明确Dom对象和Jquery包装集的概念。原始的Dom对象只有Dom只有Dom接口提供的方法和属性，通过js代码
获取的对象都是dom对象；而通过jquery获取的对象是jQuery包装集对象，简称jquery对象，只有jQuery对象
才能使用jQuery提供的方法。
1.3.1 Dom对象
javaScript中获取Dom对象，Dom对象只有有限的属性和方法
var div = document.getElementById("testDiv");
var divs = document.getElementByTagName("div");
1.3.2 Jquery包装集对象
可以说是dom对象的扩充在jquery的世界中将所有的对象，无论是一个还是一组们都封装成
一个jQuery包装集，比如获取包含一个元素的jquery包装集；
var jqueryobject=$("#testDiv");
1.3.3 Dom对象转Jquery对象
Dom对象转换为jQuery对象。只需要利用$()进行包装即可
var domDiv=document.getElementById('mydiv'); //获取Dom对象
mydiv = $(domDiv);
1.3.4 Jquery对象转Dom对象
jquery对象转Dom对象，只需要取数组的元素即可
//第一种 获取jquery对象
var jqueryDiv = jquery('#mydiv');
//第二种方式 获取jquery对象
jqueryDiv = $(#mydiv);
var dom = jqueryDiv[0];//将获取的jquery对象转换为Dom
2.jquery选择器
按照功能主要分为"选择"和"过滤"
2.1基础选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| id选择器 | #id | $("#testDiv")选择id为testDiv的元素 |
| 元素选择器 | element | $(“div”)选择所有元素 |
| 类选择器 | .class | $(".blue")选择所有class=blue的元素 |
| 选择所有元素 | * | $("*")选择页面所有元素 |
| 组合选择器 | selector,selector2,selectorN | $("#testDiv.span.blue")同时选中多个选择器匹配的元素 |
<body>
<div id="mydiv1" class="blue">
元素选择器
</div>
<div id="mydiv1">
id选择器<span>标签的内容</span>
</div>
<span>样式选择器</span>
</body>
<script src="http://code.jquery-1.11.2.min.js" type ="text/javascript" charset="utf-8"></script>
<script type ="text/javascript">
//id选择器
var mydiv=$("#mydiv1");
console.log(mydiv);
//类选择器
var clas=$(".blue");
console.log(clas);
//元素选择器
var spans = $("span");
console.log(spans);
//通用选择器
var all=$("*");
console.log(all);
//组合选择器
var group=$("#mydiv1,div,.blue");
console.log(group);
</script>
2.2层次选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| 后代选择器 | 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元素 |
2.3表单选择器
| Forms | 名称 | 举例 |
|---|---|---|
| 表单选择器 | :input | 查找所有的input元素：$(“input”); 注意：会匹配所有的input、textarea、sleect和button元素 |
| 文本框选择器 | :text | 查找所有文本框：$(".text") |
| 密码框选择器 | :password | 查找所有密码框：$(".password") |
| 单选按钮选择器 | :radio | 查找所有单选按钮：$(".radio") |
| 复选框选择器 | :checkbox | 查找所有复选框：$(".checkbox") |
| 提交按钮选择器 | :submit | 查找所有提交按钮：$(".submit") |
| 图像域选择器 | :image | 查找所有图像域：$(".image") |
| 重置按钮选择器 | :reset | 查找所有重置按钮：$(".reset") |
| 按钮选择器 | :button | 查找所有按钮：$(".button") |
| 文件域选择器 | :file | 查找所有文件域：$(".file") |
3.jQuery Dom操作
3.1操作元素的属性
获取属性
| 方法 | 说明 |
|---|---|
| attr(属性名称) | 获取指定的属性值，操作checkbox时 选中返回checked，没有选中返回undefined |
| prop(属性名称) | 获取具有true和false两个属性的属性值 |
3.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')
3.3创建元素
创建元素很简单，直接使用核心函数即可
$('元素内容');
$('<p>this is text!!!</p>');
3.4删除元素
| 方法 | 说明 |
|---|---|
| remove() | 删除所选元素或指定的子元素，包括整个标签和内容 |
| empty() | 清空所选元素的内容 |
3.5添加元素
| 方法 | 说明 |
|---|---|
| prepend(content) | 在被元素内部的开头插入元素会内容，被追加的content参数， 可以是字符、Html元素标记 |
| $(content).prepend(selector) | 把content元素或内容加入selector元素开头 |
| append(content) | 在被选元素内部的结尾插入元素或内容，被追加的content参数 可以是字符、HTML、元素标记 |
| $(content).appnedTo(selector) | 把content元素或内容插入selector元素内，默认是在尾部 |
| before() | 在元素前插入指定的元素或内容$(selector).before(contenct) |
| after() | 在元素后插入指定的元素或内容$(selector).after(content) |
3.6遍历元素
each()
$(selector).each(function(index,element));遍历元素
参数function 为遍历时的回调函数
index 为遍历元素的序列号，从零开始
element是当时的元素，此时是dom元素
4.jquery事件
4.1 ready加载事件
ready()类似于onLoad()事件
ready()可以写多个，按顺序执行
( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 等 价 于 (document).ready(function(){})等价于 (document).ready(function())等价于(function(){})
4.2 bind绑定事件
未被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
$(selector).bind(evenType[,eventData],handler(eventobject));
even Type:是一个字符串类型的事件类型，就是你所需要绑定的事件
这类类型可以包括如下：
blur，focus,focusin,focusin,load ,resize ,scroll,unload,click,dblclick,mousedown,mouseup
mousemove,mouseover, mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress
keyup,error
[,eventData] ：传递的参数，格式：{名：值，名2：值2}
handler(evenObject):该事件出发执行的函数
5.jquery Ajax
5.1 $ajax
jquery调用ajax方法：
格式：$.ajax({});
参数：
type：请求方式GET/POST
url：请求地址url
async：是否异步，默认是true表示异步
data：发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
5.2 $get
这是一个简单的GET请求功能以取代复杂$.ajax
请求成功时调用回调函数。如果需要在出错时执行函数，请使用$.ajax
//1.请求json文件，忽略返回值
$.get('js/cuisine_area.json');
//2.请求json文件，传递参数，忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});
//3.请求