标签：效率 develop block parent 第一个 覆盖 ack extend 函数
jQuery 是一个着重简化 DOM 操作，AJAX 调用和事件处理的 JavaScript 库
jq:js库，封装了大量的特定集合【函数和方法】——方法应用熟练即可
如：animate()、css()、show()
使用jq提高开发效率，简化dom操作
常见js库{对原生JS的封装}：jQuery YUI Dojo zepto ExtJs
常见API：通过将原生js包装成jQuery对象
$ ---------> jQuery
=====================
//DOM对象转jQuery对象
var domToJq = $(box).html;
//jQ转DOM
var $box = $(‘.box‘);
var jqToDom = $box[0];
var jqToDom = $box.get(0);
jQuery选择器
$(selector)
$(‘#id‘) $(‘p‘) $(‘.class‘) $(‘*‘) $(‘div.p‘) $(‘div.box‘)
$(‘ul li‘) $(‘div>p‘)
$(‘ul li:first‘)
$(‘ul li:eq(0)‘)
$(‘li:eq(6)‘):所有li元素从上到下排序
$(‘ul li:odd‘):奇数行
$(‘ul li:even‘)：偶数行
筛选方法；
parent() $(‘li‘).parent() 直系父亲
children(selector) $(‘ul‘).children(‘li‘) 直系儿子
find(selector) $(‘ul‘).find(‘p‘) 所有后代
siblings(selector) $(‘div‘).siblings(‘li‘) 兄弟节点，不包含自己
nextAll() $(‘li:eq(2)‘).nextAll() 第三个li之后的所有
prevAll() $(‘li:eq(2)‘).prevAll() 第三个li之前的所有
hasClass() $(‘div‘).hasClass(‘demo‘)
eq(index) $(‘li‘).eq(2) ==== $(‘li:eq(2))‘)
链式调用：[背后：行内样式实现]
$(‘.first‘).css(‘width‘,‘400px‘);
$(‘.first‘).css(‘width‘,300);
$(‘.first‘).css(‘background‘,‘blue‘);
alert($(‘first‘).css(‘width‘));
//设置多个样式:传参json
$(‘.first‘).css({
width:200,
height:300,
fontSize:20
});
jQuery处理样式
css()
//增加、去除类名（对应css样式）——动态
addClass() $(‘ul li:eq(1)‘).addClass(‘current‘)
removeClass()
toggleClass()
hasClass()
//click() 注册单机事件
$(‘ol li:eq(1)‘).click(function(){
//切换（增加删除）类名
$(this).toggleClass(‘current‘);
//等效于
if($(this).hasClass()){
$(this).addClass(‘current‘);
}else(
$(this).removeClass(‘current‘);
)
});
动画：针对不同对象实现动画效果
//现实与隐藏
show(speed,easing,cb)
设置宽高透明度动画效果
show() show(1000):1s内显示 show(‘fast‘)[200 million Seconds] show(‘slow‘) show(‘normal‘)
hide()
toggle()
//滑动
slideDown() 往下滑出
slideUp() 往上卷入
slideToggle()
//淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo() 透明度具体到某个值fadeTo(400,0.8) 切记：第一个参数 时间一定要传！
animate()
：$(‘.button‘).onclick = function(){
$(‘.box‘).animate({
left:400,
top:400,
opacity:.5,
//只支持为数值的
//bgc——等
});
}
Note: position:relative————相对于自身做运动
stop() 停止动画排队
//hover() : 事件切换，鼠标经过和鼠标离开的复合写法
hover(function(){
},function(){
})
//hover():如果传入一个函数，则鼠标离开、切换都执行这一个函数
jQuery属性操作:prop() attr() data()
// ele.prop(‘属性名‘) 获取
prop()——设置或者获取元素固有的属性
ex: $(‘a‘).prop(‘href‘);
//传两个值，设置属性
$(‘a‘).prop(‘target‘,‘_blank‘)
//多选按钮的状态
$(‘input‘).change(function(){
$(this).prop(‘checked‘);
});
//不支持获取自定义属性
attr()——支持获取元素自定义属性
——同理：支持set（参数2个）\get（参数1个）方法，根据参数不同
data()——操作数据
ex: $(‘p‘).data(‘age‘,22) $(‘p‘).data(‘age‘)
//读取h5自定义属性data-uname,并且读取支持省略data前缀
$(‘p‘).data(‘uname‘)
Jquery操作文本
html() \ html(‘内容‘)
text()
val()
JQuery元素操作：创建、添加、删除、遍历
$(‘div‘).each(function(index,ele){
//ele 为原生dao元素
})
$(‘div‘).on(‘click‘,function(){
alert(‘hha‘);
});
//自动触发
//方法1： 元素.事件()
$(‘p‘).click();
//方法2： 元素.trgger(事件)
$(‘p‘).trigger(‘click‘);
//方法3： 元素.triggerHandler(‘click‘)
$(‘p‘).triggerHandler(‘click‘)
ex:输入框输入内容
$(‘input‘).on(‘focus‘,function(){
$(this).value(‘hello‘);
});
jq常用方法
//复制
$.extend(target,source)
//会覆盖原对象相同属性的值
//保留原对象不同属性
//对于引用类型，同理浅层复制
//深层复制
$.extend(true,target,source)
======================
jq操作元素尺寸
$(‘div‘).width(); 获取
$(‘div‘).width(300); 设置
$(‘div‘).innerWidth(); 获取设置 width + 左右padding \\
$(‘div‘).innerHeight(); 设置
$(‘div‘).outerWidth(); 获取设置 width + 左右padding + 左右border \\
$(‘div‘).outerHeight(); 设置
$(‘div‘).outerWidth(true); 获取设置 width + 左右padding + 左右border + margin \\
$(‘div‘).outerHeight(); 设置
// 不是很清晰明了使用
//获取设置距离文档的位置
offset()：left top
$(‘.son‘).offset({
left:300,
top:300
})
//获取距离带有定位的最近祖先偏移。假如没有定位的祖先，则以文档为准；
//该方法只能获取，不能设置！！！！！！！！
$(‘.son‘).position()
scrollTop()
scrollLeft()
ex:
//设置窗口滚动效果
$(‘window‘).scroll(function(){
});
//返回顶部
$(‘html,document,body‘).scrollTop(0);
--设置动画
$(‘html,body‘).stop.animate({
scrollTop:0
});
---注意：对元素做动画，只能使用元素html,body, 而document失效！
标签：效率 develop block parent 第一个 覆盖 ack extend 函数
原文地址：https://www.cnblogs.com/macro-renzhansheng/p/13053563.html
