JQuery自学基础

Jquery就是对js的封装。比js用着更加方便。首先，先去官网下载jquery.js文件，在使用的时候要注意引入进去。
基本使用
$是jquery的别称。
$是Jquery的顶级对象，相当于Js的windows。
$(documetn).ready(function(){
$(‘div’).hide();
})
$(funciton(){})
以上两种方式都是页面加载完再加载Jquery代码
jquery对象跟DOM对象是不同的。
DOM对象是利用var声明并且获得对象。
而jquery是通过
$()对DOM对象进行封装。

图片中第一个是DOM对象。直接将元素获取过来。而第二个是jquery对象，是对DOM对象的封装。并且jquery会把所有的相同的选择器的元素获取过来。所有，DOM对象和Jquery对象只能用自己的方法。
相互转换
DOM->Jquery $(DOM对象)
jquery->DOM $(‘div’)[0];其实jquery对象是一个伪数组，里面的内容就是DOM对象。
jquery方法
修改样式
$(‘div’).css(‘color’,‘red’);等等
juqery内部是隐士迭代的
筛选
$(‘li:first’) 或者 $(‘li:eq(2)’)= $(‘li’).eq(2)找到第三个li
$(‘li:odd’)奇数
$(“li:even”)复数
$(‘li’).parent(‘ul’)祖先及节点
$(‘ul’).children(‘li’)亲儿子节点相当于
$(‘ul>li’)
$(‘ul’).find(‘li’)后辈节点相当于
$(‘ul li’)
兄弟节点
$(‘div’).siblings(‘div’)除了自己，所有的兄弟
.nextAll(‘div’)除了自己，后面所有
.prevtAll(‘div’),除了自己，前面所有
$(‘div’).hasclass(‘类名’)；是否拥有特定的类
因为jquery是会隐士迭代的，故可以获得当前元素的索引值;
$(this).index();
设置类样式
$().addClass(’’)
$().removeClass(’’)
$().toggleClass(’’)

jquery效果

$().show([speed,[easing]],[fn]);显示出来
$().hide();隐藏起来
$().toggle()切换

点第二个li,第三个li就会隐藏，再点一下，就会出现。
上下滑动
$().slideDown()下拉
$().slideUp()上拉
$().slidetoggle();切换，用法跟上面相同
淡入淡出
fadeIn()
fadeout()
fadeToggle()

事件切换
jq属性操作
获取原有固定的属性
$().prop(‘href’);
$().prop(‘属性’，’值‘)
获取设置的属性如index
$().attr(‘index’)

数据缓存
放在内存里,在DOM里面看不到的
设置
$().data(’’,’’)若是传递true或flase不用双引号
获取
$().data(’’)返回数字值
$().change;选中发生改变的元素
$(’_:checked’)选中所有复选框都被选中的元素
内容
$().html();获取内容， 若里面有span等盒子会被log出来
$().html(‘内容’)修改
$().text() 若里面有span盒子不会被log出来
$().text(‘内容’)



获取表单元素里面的值
$().val();
substr(1)去掉第一个字符，在获取参数时用
如p=%name=123;p=p.substr(1),p就变成name=123;
保留两位数：
p=(pxp,toFixed(2));

jQ元素操作

1 $().eash(function(e,v){})遍历,e就是索引值，v就是属性值。如：


也有另外一种表达方式
$eash( $(),function(e,v){}),这种方式也可遍历数组
内增加
创建元素
var li= $(’<li》《li>’)
$().append(li)在最后面加
$().prepend(li)在最前面加
外增加
$(ul).after(li)加在ul后面
$(ul).before(li)加在ul前面

JQ事件

单事件注册：
$().click(function(){})因为JQ是封装js的，所以jq里面的事件都是用方法，而不是跟DOM一样采取赋值。
多事件注册
$().on(
{ click:function(){}},
{mouseover:function(){}},
{}

)

事件委托
跟DOM不同的是，通过动态创建的元素，在DOM中，不能对其进行事件操作。而JQ可以。
如
$(‘ul’).on(‘cliclk’,‘li’,funciton(){})
事件绑定在ul上，但是执行人在li身上。这样做的优点就是可以给动态生成的元素绑定事件。第二就是可以事件委派。

解绑
$().off(‘click’) 解绑点击
$().off(‘click’,‘li’) 解除事件委托
$().one()绑定事件触发1次
自动触发事件
$().click();
$().trggr(‘click’);
$().triggerHandler(‘click’)不会触发元素的默认行为i

阻止事件对象
$().onI(’’,function(e){
e.preventDefault();阻止默认行为
e.stopPropaggation();阻止冒泡
})

JQ其他方法
对象拷贝：
$.extend([deep],target,object;)target就是要拷贝过来的目标。object就是要被拷贝的目标。会覆盖以前的数据
浅拷贝：把复杂数据类型的地址直接给到新目标，会覆盖原来的数据。
深拷贝：把复杂数据类型拷贝一份，地址跟原来那个不一样地址，再赋值给新目标，且不会覆盖原来的/
多库共存
var sb= $.noconflict();
如果你觉得 $不好用，你也可以用上面的方式，此时sb相当于 $.
JQ插件
jq22.com
引入相关文件，复制相关代码
图片懒加载
引入jq的js文件，将所有img的src改为data-lazy-src
JQ尺寸位置
$().width()
$().innerWidth()包padding
$().outerWidth()包padding+border
$().outerWidth(true)包padding+border+margin

位置
$().offset({top:100,left:100})修改位置
$().position()获取位置参数，父亲有定位，那就相对于父亲而言，父亲没定位，就相对于整个页面而言。


$().scrollTop()被卷去头部的高度
$(‘body,html’).scrollTop()。页面滚动时，整个页面被滚去的头部。

链式编程
$(this).css().sbiling().nextAll()等等，JQ允许链式编程。
相当于u
$().css()
$().sbiling()
$().nextAll()