jquery

第一步使用jQuery 先去官网下载 复制 粘贴

(1)等待文档加载完毕再去执行js代码$(document).ready(function(){代码块});

(2)等待文档加载完毕再去执行js代码$(function(){代码块})

(3)$符号是jquery的顶级对象 可以用Jquery代替

(4)Jquery对象和dom对象

dom对象 doucment.queryselector('div)

jquery对象 $('div) 不能使用原生的js方法

(5）Jquery和js对象相互转化

1.dom对象转jquery对象 (1) $('video') (2) var a =document.queryselector('div') $(a);

2.jquery对象转化为jquery对象 (1)$('video')[0] $('video').get(0)

(6)Jquery常用的api

1.jquery选择器

*类选择器 $('.nav') *id选择器$('#nav') *标签选择器$('div') *全选择器$("*") *并集选择器$("div,li")

*交集选择器$('li.current') *子代选择器$('ul>li') *后代选择器$('ul li')

2.隐式迭代 ：意思是jquery内部把匹配到的元素进行了循环

$("div").css("background","pink");

3.jquery筛选选择器

* 选择选中里面的第一个元素$("ul li:first")   *选择选中里面的最后一个元素$("ul li:last")

*选择选中里面的任意一个元素的索引号记住索引号从零开始   $("ul li:eq(2)") 选择的是第三个

*选择选中里面的奇数行的元素$("ul li:odd")  *选择选中里面的偶数行的元素$("ul li:even")  

4.jquery筛选方法

*选择离自己最近的父亲 $('li').parent();   *选择自己的孩子亲儿子最近的$('ul').children("li")

*选择自己的后代  $('ul').find("li");       *查找兄弟节点$("ul").siblings("li")

*查找之后的同辈元素$("li").nextAll()  *查找之前的兄弟元素prevAll()

*查找第那个元素  $("ul li").eq(2)  *查找某个类名是否存在 $('ul li').hasClass('current')有true无false

5.jquery的排他思想

$('button').click(function({$(this.css("background","g");$(this).sibilings.css('background',"r")})

6.jquery获取当前元素的索引号 

$(this).index()  隐藏 $('li').hide()  显示$('li').show()

7.链式编程

$(this).css('color','red').sibilings().css('color',"");

(7)jquery样式操作

1.操作css方法

*如果只写了属性名，则返回属性值$("div").css('color');   //red    属性名一定要加引号 

*写了属性名加逗号则是修改属性值 $('div').css('width',"100px"); 后面的值是数学可以不加引号

*修改多个样式 $('div').css({ width:400,"height":"400px",backgroundColor:'red',"color":"red" })

2.设置类的方法        

*添加类$('div').addClass("current");                  *删除类 $("div").removeClass('class');

*切换类$('div').toggleClass("current");             注意jquery和原先的不一样他不会覆盖之前的class

(8)jquery效果动画

1.显示效果 show([speed],[easing],[fn])   2.隐藏效果 hide([speed],[easing],[fn])

3.切换效果toggle([speed],[easing],[fn])     4.下滑动效果slideDown([speed],[easing],[fn])

 5.下滑动效果slideUp([speed],[easing],[fn])  6.下滑动效果slideToggle([speed],[easing],[fn])

7.淡入效果 fadeIn([speed],[easing],[fn])   8.淡出效果fadeOut([speed],[easing],[fn])

9.淡入淡出切换fadeToggle([speed],[easing],[fn]) 10 调整效果fadeTo([speed],opacity,[easing],[fn])

一般我们直接写不使用它们的效果 hide() show()

speed:slow慢 nomal正常 fast快 或者毫秒数1000

easing ：默认swing 可以liner

fn:回调函数在动画完成后执行

opacity:透明度必须写 fadeTo

11.事件切换hover(function(){},function(){})  第一个是鼠标经过第二个是鼠标离开的

如果只写一个函数 hover(funxction(){})就是鼠标经过会触发离开也会触发

12.动画停止排队  .stop()谁做动画写在谁前面 $(this).stop().slideToggle()

13.自定义动画  animate(params,[speed],[easing],[fn])

params:对象的形式传递属性名可以不用带引号 

$(this).animate({left:500},500,liner)

(9)jquery的属性操作

1.获取元素固有的属性值prop()  element.prop('属性名') 获取属性值

2.设置修改属性值  element.prop("title","我们都挺好") 设置属性值

3.单选框状态的改变监听 $('input').change(function(){})

4.获取元素的自定义属性 element.attr('index');

5.修改元素的自定义属性 element.attr('index',4);

6.数据缓存 $('span').data('uname',"lizhen")   这个数据在页面上是不到的

7.数据缓存拿到数据$('span').data('uname')   //lizhen

8.数据缓存获取h5自定义属性$(this).data('index')   获取这个属性值data-index

(10)jquery内容文本值

1.获取元素内容  $('div').html()

2.修改元素内容 $('div').html("2134")

3.获取元素文本内容 $('div').text()

4.修改元素文本内容 $('div').text(“123”)

5.获取表单里面的value值 $('div').val()

6.设置表单里面的value值$('div').val('123')

(11)jquery元素操作   dom对象 <div class = "a">dom对象<div>

遍历元素：$('div').each(function(index,domEle){xxx,}) index索引号  domElem是元素的dom对像

遍历元素：$.each($('div'),function(i,e){xxxx;})  上面一个用来遍历元素，这个用来遍历值

创建元素：var li = $("<li>我是后来创建的li</li>")

添加元素：内部添加父子关系，外部添加兄弟关系

（1）内部添加：

1.放到元素的后面  $('ul').append(li);  2.放到元素的前面$("ul").prepend(li)

（2）外部添加

1.放到指定元素的后面$('.test').after(div);  2.放到指定元素的前面 $('.test').after(div);、

（3）删除元素

1.删除元素本身 element.remove() 

2.删除元素集合中所有子节点 element.empty()

3.清空文本内容 element.html('')

十。获取元素尺寸

获取元素的宽高 width()  height() 只算宽高  innerwidth() innerHeight() 包含padding

获取元素的宽高outerWidth()    outerHeight()

获取元素宽高pdding margin bodder值outerWidth(true)/outerHeight(true)

十一.获取偏移量

1.获取元素距离文档的位置返回来的是对象  $('div').offset()   $('div').offset().top

2.设置元素的偏移量 $('div').offset({top:200,left:200})

3.返回数据带有父级位置的偏移量  $('div').position()  只能获取不能设置   

4.获取被卷去头部的大小$('div').scrollTop()   携带动画属性 animate     

十二。jquery事件

1.注册单个元素的点击事件 $(‘div’).click(fucntion(){})

2.事件处理on  $('div')->on({

mouseenter:function(){},

click:function(){}

})

3.事件解除 off    $('div').off('click')

4.事件只触发一次 $('fiv').one('click'.function(){})

5.事件触发但不会执行默认行为 $('div').triggerHandler('click')

6.事件对象event  阻止默认行为 e.preventDefault() 或 return false

阻止冒泡 e.stopPropagation() 

对象拷贝留着后面解决886