jQuery是一个轻量级的js库，提供链式编程、简化DOM操作。它优化了DOM操作、事件和动画，如animate、hide、show。jQuery对象和DOM对象可以互相转换，常用API包括选择器、CSS操作、事件绑定等。jQuery还支持动画效果如淡入淡出、滑动和自定义动画，以及事件委托。
jQuery- javascript query
js库： 是一个封装好的集合，封装了很多的函数，比如animate, hide, show，比如获取元素等，将原生函数封装好了，可以直接调用，jquery就是js库
优化了dom,事件，动画，与ajax的联系
优点：
轻量级
链式编程
简化了DOM操作
在<head>中引入 script jQuery: <script src='jquery.min.js'></script>
也是符合js的DOM操作流程，在页面元素加载完之后才能进行操作
1.等着页面dom操作完再操作script
2.$(document).ready(function(){
$('div').hide();
})
3.$(funciont(){
所有js内容;
})
2. $对象
代表是jQuery，顶级对象 用$或者jQuery+()的效果是一样的
3.jQuery对象和DOM对象
原生js: document.queryselector('...');
jQuery对象：$('...');是一种伪数组
原生js只能用原生js的方法，jQuery对象只能用jquery.min.js中定义的方法
DOM对象和jquery对象可以互相转换
DOM对象具有jquery对象没有的方法，比如视频的播放，play()
1.DOM对象对象转换为jquery对象：
var video = document.queryselector('video');
$(video)
这样就将DOM对象转化为了jquery对象
2.jquery转化为DOM对象
在jquery获取对象的语句后面加一个索引就行了,例如[0]
$(video)[0] 就代表获取使用jquery获取的所有video元素的第一个dom元素
也可以使用.get(索引)，一样的效果
4.jquery API
$(this)代表当前元素(在函数中)，代替了原生js的this
jquery选择器：
$('选择器')
与css的选择器一致，例如 #->id .->classname
<ul>
<li></li>
<li></li>
</ul>
想要选择ul 里的 li，便是 $('ul li')，会返回一个伪数组，其中有两个dom元素
jquery中无法使用.style来修改css
$(选择器).css('属性'， '值'); 例如： $('div').css('background', 'red');
隐式迭代： 会直接改变所有div元素的background-color， 不需要js中再遍历数组来依次改变元素
jquery筛选选择器：
$('div:first')选择第一个
$('ul li:first')
其余选择规则：
first: 第一个
last: 最后一个
eq(index): 获取索引=index的元素
odd： 索引为奇数
even: 索引为偶数
$('选择器').index()查找它在兄弟中的索引
$('选择器').parent()查找父级 .parents()查找所有祖先
$('选择器').children()查找子代， 但是是最近一级的
$('选择器').find('选择器')查找所有的后代中符合选择器要求的
$('选择器').siblings('选择器') 查找满足选择器的元素的所有满足选择器2的元素
$('选择器').nextAll(‘选择器) 查找满足选择器的元素的所有后面的满足选择器2的元素
$('选择器').hasClass('类名') 查找满足选择器的元素是否拥有classname， 返回True or False
jquery排他思想：
js原生代码需要for循环遍历
在jquery中，可以直接给所有的符合选择器的直接用数组的特性来改变
再使用siblings()和father, children的筛选器，可以做到很多隐式迭代的效果
jquery链式编程：
可以直接在一行里改变多个角色的属性，例如： $('ul li').css('color', 'red').siblings().css('color', 'pink'); 达到在一行中将一个li元素的颜色变为红色的同时将其的兄弟元素全部变为粉色
jquery修改样式：
简单的样式修改可以直接改css, style
多组样式需要修改则使用css({'color': , 'height': })
jquery修改属性：
增加/删除类
$('选择器').addClass('current')
$('选择器').removeClass('current')
对比原先js中操作: 加类名不会影响类名，原生js .classname='xxx'会直接覆盖，但是.addClass是在原来基础上加一个
切换类
$('选择器').toggleClass('current') -->有current类就删除，没有就加上
jquery效果：
显示隐藏：
show(), hide(), toggle()
show([speed,easing, fn])， speed：显示的时间ms easing：用来指定切换效果，有swing,linear fn:回调函数，在动画执行完毕后执行此中的函数
滑动：
sildeDown(s,e,fn)
sildeUp(s,e,fn)
slideToggle(s,e,fn)
切换：
hover([over, out]), over:鼠标移到元素上时触发的函数
out: 移出元素触发的函数
如果只写了一个函数则经过和离开都会触发
**解决动画排队问题：
在上一个执行此动画的对象后加.stop()，在动画开始之前停止上一个残留动画
淡入/淡出：
fadeIn(s,e,fn)
fadeOut(s,e,fn)
fadeToggle(s,e,fn)
调整透明度：
fadeTo(s,opacity,e,fn) opacity范围为0-1
自定义动画：
animate(params,s,e,fn) params上传字典一一对应目标的位置
.animate({
left: 200px;
},1000)
获取jquery中元素属性：
获取固有属性： element.prop('属性名')
设置/修改属性： element.prop('属性名'，'新属性')
获取自定义属性： element.attr('属性名')
设置/修改自定义属性： element.attr('属性名'，'新属性')，类似于原生的setAttribute()
数据缓存data:
获取固有属性： element.data('属性名')
设置/修改属性： element.data('属性名'，'新属性')
element.data('username', '111');暂时缓存数据，在f12中看不到
jquery对于元素的值的修改：
$('选择器').html('修改内容')， 括号内不加东西就是单纯的得到值
纯文本内容：
$('选择器').text('修改内容')， 括号内不加东西就是单纯的得到文本
获取表单的内容：
$('选择器').val('')
jquery遍历元素（为同一类元素做不同操作）：
$('选择器').each(function(index, domEle) {})第一个参数index为每个元素的索引号，第二个参数domEle是每个dom元素对象而非jquery对象
所以想要使用jquery的方法，需要给dom元素转化为jquery对象 $(domEle)
jquery创建元素：
var li = $('<li>I am a new element</li>')
添加元素：
内部添加： element.append('内容')， 默认添加到element的尾部；preprend()放到前面
外部添加：
$('选择器').before(li);在当前元素的前面添加li元素
$('选择器').after(li);在当前元素的后面添加li元素
删除元素：
$('选择器').remove(); 带着这个节点全清除
$('选择器').empty(); 只是将这个节点的孩子都清除
$('选择器').html(''); 同上
jquery尺寸、位置操作：
$('选择器').offset() 返回被选元素相对于当前文档的偏移坐标，与父级没有关系，与原生js不同
有两个属性left、top
可以设置偏移坐标： .offset({'xx': xxpx, 'xxx': xxpx })
$('选择器').position()
返回带有定位的父元素的相对偏移坐标，但是只能返回坐标不能修改定位的值
$('选择器').scrollTop() 或者.scrollLeft() 分别返回被卷去的头部和被卷去的左边
jquery事件：
jquery事件注册：
1.单个事件注册
$('选择器').事件名(function(){}) 例如：$('div').click(function(){$(this).css('color', 'red');})
2.事件处理on
可以为元素绑定一个或者多个事件
$('选择器').on({
mouseenter: function(){},
click: function(){},
mouseover: function(){}
})
为多个元素绑定一个事件
$('选择器').on('事件1 事件2 ... 事件n', function(){})
3.事件委托
$('父元素').on('事件', '子元素', function(){}) 意为只有在对子元素进行事件操作时才会触发父元素的相对应事件函数
on的好处：可以为未来会出现的元素绑定事件
jquery事件解绑：
$('选择器').off() 括号为空时自动将所有此选择器筛选出来的绑定的函数+事件全部移除
$('选择器').off('事件') 接触筛选出来的元素的指定事件
$('父元素').off('事件', '子元素') 对于父元素的子元素进行事件委托的解除
jquery自动触发事件：
trigger()
比如现在为div元素加一个click事件，但是在某些情况下想要click的效果自动事件
$('div').trigger('click')或者triggerHandler(但是不会触发元素默认行为)
jquery事件对象：
相当于原生js里的e，但是jquery中是event，拥有clientX, clientY......所有的原生js事件的属性，以及stopPropagation阻止冒泡事件
jquery中其他方法：
jquery拷贝对象：
$.extend([deep], target, object1, [objectN]) deep:true为深拷贝，默认false target: 要拷贝的目标对象 object1: 待拷贝的第一个对象
扫一扫
1746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
