前端学习---jquery
本部分主要记录jquery的 ‘选择器’ ‘dom操作’ ‘ajax’:
1:'语法'：
jquery的基本语法：$(selector).action()
$符号：定义jquery selector:选择器，用于查找html元素 action() 方法：对元素的操作
如：$('p').hide():隐藏所有<p>标签
说明：文档加载就绪的函数
实际的项目中所有的jquery函数都位于 document ready 函数中：这是一个文档加载就绪的函数，为了防止文档在加载就绪
之前运行jquery函数，导致失败；
如： $(document).ready(function(){
$('p').hide();
});
一个正确的加载jquery的函数应当如上所示；
2：选择器：
按照jquery的官方文档来划分：jquery可分为九大选择器：
1): * $("*") 所有元素
#id $("#name") id="name"的元素
.class $(".info") class="info" 的元素
element $("p") <p>标签的元素
.class.class $(".info.demo") 所有 class="intro" 且 class="demo" 的元素
具体的 jquery选择器的种类以及使用方法可点击查看一下链接：
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
3：'dom操作'：DOM = Document Object Model（文档对象模型）
获得内容 --- text(),html()和val();
text() - 设置或返回所选元素的文本内容;
如：<b>this is the b element</b> 只是获取其中的文本内容，文本不加黑体
html() - 设置或返回所选元素的内容（包括 HTML 标记）
如：<b>this is the b element</b> 获取其中的黑体文本内容
val() - 设置或返回表单字段的值 获取表单元素提交的值
获取属性---attr();
如：操作<a href="a11" target="_blank">点击进入超链接</a>
$("href").attr();返回的值为：all
设置内容-- text("xxx")、html("xxx") 以及 val("xxx")
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
设置属性---attr();
添加新的 HTML 内容---
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
删除元素/内容---
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
4:jquery ajax操作：
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新
这里主要关注的是使用ajax技术实现前后台的数据交互：
get方式：一般用于向后台请求数据的场景 Post方式：用于前端向后台提交数据
1):使用get请求获取后台服务返回的数据
$("#button").click(function(){
$.ajax({
type:"get", 请求的方法
url:"/user/getUser.do", 请求的服务地址
contentType:"application/json", 返回数据的格式，这里是json
data:JSON.stringify(data), 向后台提交数据时，需要将json格式的数据转化为json字符串，这里就是起这个作用的
dataType:"json", 需要提交的数据格式
success:function(result){ 回调函数：通过回调函数可以获取到后台返回的数据
alert(result.name);
}
});
});
2)post方式：
$("#button").click(function(){
var data={"id":"1111","name":"张上亮","code":"beppe"}; 需要提交到后台服务的数据，一般是通过dom操作获取元素中的数据；
$.ajax({ ajax模板，post请求和get请求基本一致
type:"post",
url:"/user/saveUser.do",
contentType:"application/json",
data:JSON.stringify(data),
dataType:"json",
success:function(result){
alert(result.shanghai);
}
});
});
基于ajax的个get请求和post请求都基本一致，而且各个方法中应用ajax的模板都是基本一致的，可以将这个方法进行封装一层，这里就不做这个操作了；
