DOM操作
// 外部之前
$('#d').before('Before');
// 外部之后
$('#d').after('After');
// 内部之前
$('#d').prepend('Prepend
');
// 内部之后
$('#d').append('Append
');
// 外部周围
$('#d').wrap('');
// 内部周围
$('#d').wrapInner('');
// 删除节点(节点+内容)
$('#d1').remove();
// 清空节点(内容)
$('#d2').empty();
// 删除父节点
$('p').unwrap();
// 节点替换
$('p').replaceWith('标题3
');
杂项方法
// 声明字符串
var str = ' helloworld ';
console.log(str);
console.log($.trim(str));
console.log($.type(str)); // string
var cars = ['奔奔', '红旗', '50宏光'];
console.log($.type(cars));
console.log(cars);
// 遍历数组
$.each(cars, function(i, v){
console.log("索引:"+i+" 值:"+v);
});
var person = {
username: "小新",
age: "18",
skill: "PHP"
};
// 遍历对象
$.each(person, function(label, value){
console.log('属性名: '+label+'属性值: '+value);
});
// 遍历选择器选中的结果集
$('ul').children().each(function(i,v){
// console.log(i+": "+v);
// 获取当前节点 $(this)
// 获取当前节点的索引
console.log($(this).index());
// 获取当前节点的内容
console.log($(this).text());
});
事件绑定
绑定多个事件
$('button').bind('click mouseout', function(){
$('#d').text('试试就试试');
});
鼠标悬浮态
$('#d').hover(function(){
// 鼠标滑过
$(this).text('我进来了');
}, function(){
// 鼠标离开
$(this).text('我离开了');
});
隐藏与显示
// 单击第一个按钮,将div藏起来
$('button:first').click(function(){
$('#d').hide(20000, function(){
alert('我藏起来了');
});
});
// 单击第二个按钮,显示div
$('button').eq(1).bind('click', function(){
$('#d').show(20000);
});
// 单击最后一个按钮,切换div的状态
$('button:last').click(function(){
$('#d').toggle(1000);
});
滑动收起
// 单击第一个按钮,将div藏起来
$('button:first').click(function(){
$('#d').slideUp(10000, function(){
// alert('我藏起来了');
});
});
// 单击第二个按钮,显示div
$('button').eq(1).bind('click', function(){
$('#d').slideDown(10000);
});
// 单击最后一个按钮,切换div的状态
$('button:last').click(function(){
$('#d').slideToggle(1000);
});
渐变
// 单击第一个按钮,将div藏起来
$('button:first').click(function(){
$('#d').fadeOut(10000, function(){
// alert('我藏起来了');
});
});
// 单击第二个按钮,显示div
$('button').eq(1).bind('click', function(){
$('#d').fadeIn(10000);
});
// 单击最后一个按钮,切换div的状态
$('button:last').click(function(){
$('#d').fadeToggle(1000);
});
});
自定义动画
// 自定义动画
$('button').click(function(){
$('#d').animate(
{
left: '100px',
top: '50px',
width: '200px',
height: '50px'
},
5000,
function() {
alert('动画执行完毕');
}
);
});
验证码点击更新-原生写法
// 1. 获取验证码对象
var c = document.getElementById('captcha');
// 2. 响应单击事件
c.onclick = function(){
// 3. 设置src属性
c.src = "captcha/c.php?rand="+Math.random();
}
验证码点击更新-jQuery写法
// 单击事件
$('#captcha').click(function(){
$(this).attr('src', 'captcha/c.php?rand='+Math.random());
});
京东侧边栏动画
jQuery
tab选项卡
tab(选项卡)
选项卡功能
悟空,蜘蛛精,金角大王
潘金莲,武松,大郎
宝玉,刘姥姥,黛玉