jQuery常用点
1 、trigger() 方法触发被选元素的指定事件类型。
2 、delegate() 事件委派 1.不占内存2.可以给未来元素（后期动态添加的元素）添加事件。
2. 添加元素
- append() - 在被选元素的结尾插入内容 *例如： 要插入li标签， 则要在ol元素后append。 插入tr标签，要在table元素后append。 * append內的内容必须为字符串。
里面的 a 也要是字符串
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
3. 删除元素/内容
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
4. 操作css
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
5.动画效果
6.设置内容属性
选择器
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
| $("p:first") | 选取第一个 <p> 元素 |
| $("input[name=name]") | 选取input元素中属性为name=name的元素 |
7.jquery找盒子和页面的距离
$('div').offset().left/top
8.为什么$(window).scrollTop() 随着页面滚动没有变化？
因为 $(window).scrollTop()只有在$(window).scroll（function（）{里面才有效果}）
9.$.ajax 完整参数
$.ajax(
{
// crossDomain: true,
async:false,
cache: false,
type: 'POST',
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
data:{
order_id:rowData.order_id_str,
access_key:$('#hisAcc').val(),
secret_key:$('#hisSec').val(),
exchange:'huobidm',
symbol:rowData.symbol,
},
url: 'http://www.xxxxx' + '/api/v1/contract/order/detail?key=asdkjaslkdjhaskdqw325e45q6we',
success:function (res) {
if(res.data != ""){
data = res.data[0]
}else {
data = {noData:'0'}
}
}
}
);
JS 使用URL 传递对象参数 encodeURI
var eg = {
keyName: 'U_key',
MODULE_CODE: '123'
PRIMARY_KEY: 'abc'
}
var jsonObj = JSON.stringify(eg)
var url = basePath + 'customManage/openListChild.do?TYPE_ID= P11227f338d03&PAPERCODE' + encodeURI(jsonObj)
传JSON数据
headers: { "Content-Type": 'application/json;charset=utf-8' }, data:JSON.stringify(flashObj),
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
console.log(data);
}
});
});
});
10. 返回顶部
//返回顶部
$(function() {
var scrollDiv = document.createElement('div');
//$(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body');
$(window).scroll(function() {
if ($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('.toTop').click(function() {
$('body,html').animate({ scrollTop: 0 }, 800);
})
});
11.序列化表单值
$('form选择器').serialize() //字符串化表单值
$('form选择器').serializeArray() //数组化表单值
$('form选择器').parseForm() //对象化表单值
$('form选择器').serializeObject() //对象化表单值
去掉空值函数
function serializeNotNull(serStr){ return serStr.split('&').filter(item=> !item.endsWith('=')).join('&') }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form action=""> First name: <input type="text" name="FirstName" value="Bill" /><br /> Last name: <input type="text" name="LastName" value="Gates" /><br /> </form> <button >序列化表单值</button> <div></div> </body> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> // 给jquery添加 parseForm方法 将表单转化为JSON对象 （方法1） $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; // 给jquery添加 parseForm方法 将表单转化为JSON对象 （方法2） $.fn.parseForm=function(){ let serializeObj={}; let array=this.serializeArray(); let str=this.serialize(); $(array).each(function(){ if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } }); return serializeObj; }; $(function () { $("button").click(function(){ console.log('让我康康',$("form").serialize()) console.log('让我康康',$("form").serializeArray()) console.log('让我康康',$("form").parseForm()) console.log('让我康康',$("form").serializeObject()) }); }) </script> </html>
12.自己写提示框
function kbtMsg(title,time){ layui.use('jquery',function () { let $ = layui.$; $('body').append('<div class="kbt-msg" ><span class="txt">' + (title?title:'请填写提示') +'</span></div>') setTimeout(function () { $('.kbt-msg').remove() },(time?time:2) * 1000) }) }
