1. jquery简介
JQ是一个轻量级的原声js库 目前最高版本 3.X 最低支持到 IE9
1. 强大的选择器 总是能得到一个集合
2. 对DOM的处理非常简单方便
3. 兼容强大 自身就已经做完了基本的兼容处理
4. 链式操作 所用的JQ方法 都可以通过 "." 来不断调用
5. 强大的 AJAX 封装库
$(参数) 返回值 JQ对象
2.jquery选择器
1.$('.box') 如果这个同类名标签 只有一个 直接用就行 $('.box').css();
如果同类名标签 有多个 $('.box').css() 是给所有的标签 统一操作
如果需要精准的操作某一个标签 需要用到 .eq() $('.box').eq(0).css()
2. :first 选中第一个子集 只选择一个 $('.box div:first')
3. :last 选择最后一个子集 $('.box div:last')
4. :even 偶数下标 下标从0开始 $('.box .item:even')
5. :odd 奇数下标 $('.box .item:odd')
6. :eq 指定下标 $('.box .item:eq(0)' $('.box .item').eq(0);
7. :gt(index) 指定以上标签被选中 >index 下标的元素 $('.box .item:gt(3)')
8. :lt(index) 指定以下标签被选中 <index 下标的元素 $('.box .item:lt(3)')
9. :contains(文本内容) 选择包含目标文本内容的标签 $('.box1 .item:contains(666)')
10.:empty 选中内容为空的标签 $('.box .item:empty')
11. :parent 选中非空标签 $('.box .item:parent')
12. :has() 选择包含了 对应子集的标签 $('.box .item:has(p)') item 内 有 p 标签
3. jquery样式和方法绑定
通过 JQ对象的属性方法 .css() 来获取或者设置
JQ 的样式设置 .css() 跟原生一样 都是通过行间样式进行设置
1. 单个样式的设置 $('.box').css('width', '200px');
2. 多个样式设置
$('.box').css({
width: '10px',
height: '100px',
top: top + 'px',
})
DOM 0级 最根本是标签的属性方法
box.onclick = function(){} //原生
$('.box').on('click',function(){})
DOM 2级
box.addEventListener('click',function(){},false);
$('.box').click(function(){ })
用JQ获取class 时 是一个集合 不止有一个元素
所以 点击方法内 如果需要操控元素本身 最好使用$(this);
$('.box').click(function(){
// 给盒子 添加 class
$(this).addClass('on');
// 删除 class
$(this).removeClass('on');
// 切换 class
$(this).toggleClass('on');
})
$('.box').width() // 内容区域宽度
$('.box').height() // 内容区域高度
$('.box').innerWidth() // clientWidth 内容+padding
$('.box').innerHeight() // clientHeight
$('.box').outerWidth() // offsetWidth 内容 + padding + border
$('.box').outerWidth(true) // 内容 + padding + border + margin
$('.box').outerHeight() //offsetHeight
$('.box').offset().left // 盒子左边 到 浏览器视窗左边 之间的距离
$('.box').offset().top // 盒子上边 到 浏览器视窗上边 之间的距离
$('.box').position().left // 到 定位 父级 左边 之间的距离 如果父级没定位 则以 body为基准
$('.box').position().top // 到 定位 父级 上边 之间的距离
4. jq动画
$('.box').animate(参数1,参数2,参数3)
参数1 css样式 对象的形式 键值对
参数2 时间（ms）
参数3 callback 回调函数 动画结束后调用
$('.box').animate({
wdith: '300px',
height: "200px",
},1000,function(){ })
常用动画
淡入 fadeIn(时间,callback);
callback 可以省略
淡出 fadeOut()
淡入淡出切换 fadeToggle()
向下打开 slideDown()
向上收起 slideUp()
切换打开状态 slideToggle()
动画执行顺序的控制 delay()
$('.box').fadeIn(500).delay(500).slideUp();
动画停止 stop();
5. jq查询
1. 设置 获取 文本节点
$('.box').text(); //获取
$('.box').text('12312312312'); //设置
2、设置 获取 html 内容
$('.box').html(); //获取
$('.box').html('<p></p>'); //设置
3. 设置 获取 表单内容
$('input').val(); //获取
$('input').val('嘿嘿嘿'); //设置
4. 获取节点
获取所有的子集节点 $('.box').children()
获取指定的子集节点 $('.box').children('.item');
返回第一个指定节点 $('.box').first();
返回最后一个指定节点 $('.box').last();
获取下一个节点对象 $('.box').next(); 只能获取一个
获取后面所有的节点对象 $('.box').nextAll()
获取上一个节点对象 $('.box').prev(); 只能获取一个
获取上面所有的节点对象 $('.box').prevAll()
获取所有的兄弟元素 $('.box').siblings();
获取父节点 $('.box').parent();
获取定位父节点 $('.box').offsetParent();
查找后代元素 $('.box').find('p'); 在后代中 查找 p 标签
获取 元素 在 父元素 子集中 的位置下标 $('.box').index(); 返回值是 数值
将JQ对象 转成 DOM对象 $('.box').get(); get里面出入的是 目标下标
设置自定义属性 行间属性
$('.box').attr('index') 读取
$('.box').attr('index','123') 设置
删除行间属性
$('.box').removeAttr('index');
6. jq事件
1. .on(events,selector,data,function)
2. .events(data,function)
3. .bind(events,data,function)
events : 事件类型
data ： 除了实参外 的 额外参数
selector ： 选择器
function : 所要执行的方法
bind 和 on 更加的相似 都是给 元素 绑定方法的一种方式
bind 在 JQ 1.7.X版本以下 用的多
1.7.x 以上版本 基本上都用 on
bind 是直接绑定在元素上 类似于 在标签中直接绑定事件 没有 selector 参数
1.7.x 版本以后 官方更加推荐使用 on
3. on 事件代理 有selector参数 (选择器) 可以进行事件委托
$('ul').on('click','li',function(){
//筛选出 ul 下面 的 li 给其绑定 点击事件 等同于 $('ul li') 但原理不同
// 原理是 事件冒泡 子元素将事件统一委托给父元素 进行事件处理
// 这样就不用给每一个子元素 绑定事件 大大的提高了性能
// 给动态添加的元素 也能绑定上指定事件
})
4. .off() 事件移除 1.7 以上版本
.unbind() 事件移除 1.7 以下的版本
5. $('.box').click(function () {
// this 是 dom对象 代表是 调用对象的本身
// $(this) 是 JQ 对象 代表 调用对象本身 但是 可以使用 JQ 的一系列方法
// js原生中的 return false 返会一个bool值
// JQ 中的 return false;
// 1. 返回值
// 2、阻止事件冒泡
// 3. 阻止默认事件
return false;
})
7. jq创建标签对象
1. 向末尾添加
$('<p></p>').appendTo('.box');
2. 给目标对象结尾 添加子元素
$('.box').append($('<p></p>'));
3. 向前添加
$('<p></p>').prependTo('.box');
4. 给目标元素前面 添加子元素
$('.box').prepend($('<p></p>'));
5. 将p元素 插入到 目标元素的后面（兄弟关系）
$('<p></p>').insertAfter('.box');
6. 将p元素 插入到 目标元素的前面（兄弟关系）
$('<p></p>').insertBefore('.box');
7. 给目标元素的后面 添加 p 元素
$('.box').after('<p></p>');
8. 给目标元素的前面 添加 p 元素
$('.box').before('<p></p>');
9. 清空内容
$('.box').empty();
10. 删除标签自身
$('.box').remove();
11. 克隆标签
$('.box').clone();
