文章目录

1. 1. JQuery
2. 2. 节点控制

JQuery

Css 操作

// 单属性修改
$('div:eq(0)').css('background', 'red');
// 获取
$('div').css('background');
// 多属性修改
$('div').css({'background':'red', 'width':'100px'});

选择器

// 子代选择器
$('div>p');
// 后继选择器
$('div+p');
// 兄弟选择器
$('div~p');

// 过滤选择器
$('ul:eq(3) li:not(:first)')

$('ul li:lt(12):gt(3)'); // 这样不行

// 筛选选择器
$().parent()
$().children('p')
$().siblings()

// 滑动切换动画
$().slideDown(1000);
// 向下滑动切换
$().slideUp(500);
$().slideToggle(600);
// 先清空排队动画 , 再执行动画 !!!!!!!!!!!
$().stop().slideUp(500);

// 排他
$(this).css('background', 'red').siblings().css('background', 'blue')

jq动画机制, 里面的所有动画都遵循排队机制, 所有没有执行完的动画都会 排队等待执行.

Jquery中的选择器是层层过滤的

// 获得索引
$(this).index();
$('li').eq(index);

// 修改标签属性
$(this).attr('key','value');

// 类属性操作
$(this).toggleClass("current");
$(this).addClass("current");
$(this).removeClass("current");

// 透明度动画
$(this).fadeOut(); // 淡出
$(this).fadeIn(); // 淡入
$(this).fadeTo(动画时间, 0.5); // 透明到

节点控制

节点控制就是对文档当中的标签控制

var tag = $('<li>ok</li>');
$(this).append(tag);
// 从内部, 前面插入
$(this).prepend(tag);
// 同级之后
$(this).after(tag);
$(this).before(tag);

// 直接删除
$(this).remove();
// 清空内部节点
$(this).empty();

//获取 or 修改参数
$(this).val();

// 替换指定的节点
$(this).replaceWith('<h3></h3>');

// 对现有节点的修改, 都是选择器的形式
$(this).insertAfter(); // 把*插入*之后
$(this).insertBefore(); // 把*插入*之前

// 链式动画
$(this).animate({left: 300, top: 300}, 500).animate({top: 200}, 300);

// 加工函数
$(this).each(function(index, element){
   $(element).css('background-position','0 ' + num + 'px');
});

// 浏览器的宽度 高度
$(window).width();

$(window).scrollTop();
$(this).scrollLeft();

$(this).animate({scrollTop:2000 }, 500);
$('html, body').stop().animate({scrollTop: 2000}, 500)

网页上所有弹窗效果都可以用创建节点实现

$(window).mousemove(function(e){
  event.pageX; evnet.pageY;
})