Jquery 相关
引入
<head>
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
入口函数
- 多个入口函数会依次执行
$(function(){
// step 1
})
$(function(){
// step 2
})
Jquery对象
Query对象就是通过jQuery包装DOM对象(DOM元素就是DOM对象)后产生的对象
遍历
each
- 可以遍历jquery对象
- index: 序号
- value：遍历当前值
$(".div").each(function (index, value) {
console.log(index, value);
})
var list = {1:'1', 2:'2'};
$.each(list, function (index, value) {
console.log(index, value);
})
map
- map和each区别于map可以在遍历时修改数组元素并返回新数组
var set = [8, 4, 5, 4 ,4];
$.map(set, function (value, index) {
console.log(index, value);
});
// 遍历数组将每个元素转换为字符串返回
var new_set = $.map(set, function (value, index) {
return value + ':30';
});
console.log(new_set);
异步请求ajax
- type 默认get方法
- url 默认当前页地址
- async 默认异步请求（true），设置同步
- data 发送到数据库的数据
- contentType 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型
- dataType 预期服务器返回的数据类型：xml、json、text、html、script
- success 成功后的回掉函数
- error 错误回掉函数
- beforeSend 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头
function searchform() {
$.ajax({
url: 'rpdsearch',
contentType: 'application/json',
data: $("#rpdform").serialize()
})
}
异步回调函数
function(backData,textStatus,xmlHttpRequest){}
- 参数1：backData表示返回的数据
- 参数2：textStatus表示返回状态的文本描述，如success，error
- 参数3：xmlHttpRequest表示ajax中核心对象
backData格式
服务器返回html，backData就是String
服务器返回json, backData就是Object
表单序列化
表单元素.serialize()
好文章监听删除js代码段
- _method:"DELETE"对应RequestMethod.DELETE类型
$(".delLink").click(function () {
var articleId = $("#articleId").val();
$.ajax({
url:"/article",
type:"post",
dataType:"json",
data:{
_method:"DELETE",
"articleId":articleId
},
success:function (result) {
if(result && result['status']==200) {
//更新成功返回页面
window.location.href = "/articles";
}else {
//跳转错误页面
window.location.href = "/error";
}
},
error:function (result) {
//跳转错误页面
window.location.href = "/error";
}
});
});
好文章修改js代码段
updateArticle:function (content,contentHtml,title,cateName,articleId) {
$.ajax({
url:"/article",
type:"put",
dataType:"json",
data:{
"content":content,
"contentHtml":contentHtml,
"title":title,
"cateName":cateName,
"articleId":articleId
},
success:function (result) {
if(result['status']==200 && result) {
//更新成功返回页面
window.location.href = "/articles";
}else {
//跳转错误页面
window.location.href = "/error";
}
},
error:function (result) {
//跳转错误页面
window.location.href = "/error";
}
});
}
获取/修改属性值
input属性
获取属性值：val()
修改属性值：val(Param)
span属性
获取属性值：text()
修改属性值：html(Param)
获取自定义属性值
获取属性值：attr('loan')
修改属性值：attr('loan', 200)
和js方法的对比
| JavaScript | Jquery |
|---|---|
| innerHTML | html() |
| value | val() |
| removeChild | remove() |
| appendChild | append() |
jquery和js对象转换
- js对象转换jq对象
var $ele = $(js对象)
- jq对象转换js对象
var ele = $("#id")[0] //jq对象=数组
获取url参数
// 获取url参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return decodeURI(r[2]);
return null; //返回参数值
}
选择器
根据id选择
$.('#id').val()
根据class选择
$.('.xyg')
根据标签名选择
$.('div')
全选
$.('*')
直接父元素
// loan-name的直接父元素
$("#loan-name").parent()
子孙关系
// div下的多级div元素（包含直接父子）
$.('div div')
相邻兄弟关系
// div后的span
$.('div+span').val()
一般兄弟关系
// div的所有兄弟并排除span
$.('div~span')
筛选器
首尾
var html =$("p").first().html(); // 选择所有p标签且筛选出第一个
var html =$("p").last().html(); // 选择所有p标签且筛选出最后一个
奇偶
下标0开始
- 选择每个相隔的（偶数） 元素：
$("tr:even")
- 选择每个相隔的（奇数） 元素：
$("tr:odd")
选择单个
eq(index)
大于小于index的所有元素
gt(index)
lt(index)
去除不匹配 :not(select)
input:not(:checked)//筛选所有input没有checked的
包含内容
- :contains(text)
//选取所有包含 "is" 的 <p> 元素：
$("p:contains(is)")
包含元素
//选取所有包含“指定元素”的元素
$("p:has(selector)")
有子元素的元素
:parent 含文本 <a> </a>
无子元素的元素
:empty 含文本 <a></a>
可见隐藏
:visible :hidden
避坑
- ajax请求的contentType和服务器返回的数据类型不一致导致的error
