本文为作者原创未经允许不许转发
JQuery
创建元素：
使用JQ内部创建并添加元素
for (var i = 0; i <= 5; i++) {
$('<div></div>').addClass('box').appendTo('body');
}
同时可以使用prependTo
使用JQ外部创建并添加元素
varspan = $('<span style="color:green">用户名可以使用</span>');
$('#uname').after(span);
varspan = $(‘<span style=”color:green”>用户名可以使用</sapn>’);
$(‘#uname’).before(span);
使用JQ寻找元素
$('select[name="sel"]').css('border','2px solid red');
$('#box').html('希望你找个300斤的老婆').css('background-color','pink');
$('li').css('background-color','#AB5A5A').css('margin-top', '10px');
Attribute查找元素的方式：
$("input[name='newsletter']") //查找name为val值的input元素
$("input[name!='newsletter']") //查找name不为val值的input元素
$("input[name^='news']") //查找name值以news开头的input元素
$("input[name$='letter']") //查找name值以letter结尾的input元素
$("input[name*='man']") //查找name包含man的input元素
$(“input + span”) //查找一个紧挨着input的下面的指定为span标签
$("form> input") //在给定的父元素下匹配所有的子元素
原生DOM对象(节点): 拥有 innerHTML，firstChild 等属性
varbox = document.getElementById('box');
JQ对象: 拥有 html() css() 等方法
var$box = $('#box');
区分DOM对象于JQ对象，两者方法不能混淆
.html()和.text()以及.val()
能解析HTML标签
$('.link:first').html('<h2>晚上小树林见</h2>');
//不解析HTML标签
$('.link:last').text('<h2>晚上小树林见</h2>');
//eq() 可以寻找指定下标的对象
varcontent = $('.link:eq(1)').html();
//获取文本框的值
$("input").val();
互相转换
//JQ对象
varlist = $('ol > li');
console.dir(list);
//JQ对象转换为DOM对象
vardom_list = list.get();
console.log(dom_list);
//DOM对象
varibox = document.getElementById('ibox');
console.dir(ibox);
//DOM对象转换为JQ对象
var$ibox = $(ibox);
$ibox.css('background-color','#94E0F0');
console.log($ibox);
属性添加删除
添加HTML标签属性
$('a').attr('title', '激情四射');
删除属性
$('a').removeAttr('title');
添加类
$('a').addClass('link');
删除类
$('a').removeClass('link');
function_toggle() {
没有则添加，有则删除
$('a').toggleClass('link');
}
JQ遍历
function _toggle() {
JQ的遍历方法 each
$('.link').each(function(i){
this是DOM对象
$(this)是JQ对象
console.log(this,$(this));
});
}
$().html $().text 的区别
能解析HTML标签
$('.link:first').html('<h2>晚上小树林见</h2>');
不解析HTML标签
$('.link:last').text('<h2>晚上小树林见</h2>');
eq()可以寻找指定下标的对象
var content = $('.link:eq(1)').html();
console.log(content);
text()与 html() 的区别，就是前者仅仅获取文本节点，会过滤标签
var content = $('.link:eq(1)').text();
console.log(content);
边距设置
获取左边距
varle = $('.box').offset().left;
varto = $('.box').offset().top;
console.log(le,to);
设置
$('.box').offset({left:100, top: 50});
宽高设置
$('.box').width(200).height(50);
宽高获取
varw = $('.box').width();
varh = $('.box').height();
console.log(w,h);
宽度 + 内边距
varinnerWidth = $('.box').innerWidth();
varinnerHeight = $('.box').innerHeight();
console.log(innerWidth,innerHeight);
宽度 + 内边距 + 外边距
varouterWidth = $('.box').outerWidth(true);
varouterHeight = $('.box').outerHeight(true);
console.log(outerWidth,outerHeight);
排除元素：
$('.pictures > li').eq(1).siblings() //选择到除了下标为1的所有li
返回对象集合的元素的下标：
$('.container> .btns a').parent().index(); //找到包裹a标签的li的下标
eq(index|-index)
index为从这个对象的第几个开始找到第index个元素，而-index为从尾部开始寻找
动画效果：
// 显示
$('#box').show(500);
//隐藏
$('#box').hide(500);
//缓慢下拉显示
$('#box').slideToggle(500);
//动画过程改变属性，第二个参数是时间
$('#box').animate({
400,
left:800,
},2000)
//在动画多个过程中的衔接暂停1000毫秒
.delay(1000)
//综合
$('#box').animate({
400,
left:800,
},2000).delay(1000).animate({
height:500
},2000).delay(2000).animate({
100,
left:0,
height:100
},2000);
内外插入元素：
先创建元素再添加到指定对象中
$('<div></div>').addClass('box').appendTo('body');
插入到后面
$('.rect').append($('<div></div>').addClass('box') );
插入到前面
$('.rect').prepend($('<div></div>').addClass('box').html(i) );
外部插入元素
$('.rect').after($('<div class="box">'+i+'</div>') );
$('.rect').before($('<div class="box">'+i+'</div>') );
包裹和穿内衣：
1.包裹（将所有的子元素都用<li>包起来）
$('.btns').children().wrap('<li></li>')
2.穿内衣
$('.btns').children().wrap('<li></li>').parent().parent().wrapInner('<ul class="pagination"></ul>') //红色的这一块为div
全选：
$('.zz-table tr td input[type="checkbox"]').prop('checked',true);
将所有的这个表格下的checkbox的checked属性设置为true；
绑定AJAX
$.get( './action.php', //ajax数据传输处理的路径
{'a':'delete','gid':gid}, //传的参数
function(data){ //传过去的回调函数
console.log(data);
if(data > 0){
that.remove();
}
},
'text' //ajax中返回的responseText是字符串就为’text’，但是如果是需要json处理的就是’json’
);
删除元素
$('.btns').remove()
选择框的禁用和选择
$("input[type='checkbox']").prop("disabled",false);
$("input[type='checkbox']").prop("checked",true);
为匹配到的元素绑定多种触发事件
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
阻止浏览器默认事件和冒泡
Return false是最好的解决方法
如果你对一个focus事件执行了.triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。
HTML 代码:
$("#old").click(function(){ $("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});
通用JQ请求AJAX的操作$.ajax({
$.ajax({
url:'action.php',
//datatype:'json', json,html,script,指定返回数据的类型：xml,html, script, json, text, _default (不要骗他),几乎不用
type:'post',//设置请求的类型：get(默认) post
data:'username='+val,//传输的数据(有两种格式)
//data:{username:val}
async:true,//同步异步：true 默认异步 false 同步
success:function(res) {
if(res== 1){
$('#uname+ span').remove();
varspan = $('<span style="color:red">用户名已存在</span>');
$('#uname').after(span);
}else{
$('#uname+ span').remove();
varspan = $('<span style="color:green">用户名可以使用</span>');
$('#uname').after(span);
}
},
error: function(a){
alert('出错鸟~~~');
}
})
找到一个元素下的子元素，并制定事件，并且出发时间是触发一个函数的运行
TP框架中更好的办法是：
$this->fetch();的方法
找元素上级某个元素或者下级某个元素；
var num =$(this).closest('.am-tab-panel');找出上面最近的这个class名的元素
num.find('.order-main');找到num下面的class这个名字的元素
$(“select[name=’city’]option :selected”).text()
找到对应的select下拉框，获取你选中的值，不是指value而是其中显示出来的