JS入口函数与JQ入口函数的区别？
jq的入口函数(两种)
第一种：
$(document).ready(function(){
console.log('a');
});
第二种：
$(function(){
console.log($('div'));
});
js的入口函数
window.onload=function(){
alert(1);
});
区别：
①js的入口函数比jq的入口函数慢一些，js要等页面所有内容加载完成之后执行，jq等页面结构(节点)加载完成之后就会执行；
②js的入口函数后面的会执行前面的，而jq的入口函数则不会覆盖。
JS与JQ的转化？
var oDiv = document.getElementById("div1"); //js元素
js--->jq //给获取的元素增加$即可
var $div = $("#div1");
jq--->js //jq是类数组,所以有下标有长度,可以通过下标的方式拿到js
var $js = S("#div1")[0];
JQuery中$的含义？
$就是一个函数,$(),有三种用法,参数不同功能不同。
①参数是一个function,也就是入口函数;
$(function(){
});
console.log(typeof $);
②$(obj)把js对象转化为jq对象的写法;
③$("字符串")用来找对象的--->$("div ul li")
选择器
子代、后代、交集、并集、id 、class、tagname
过滤选择器和筛选选择器
过滤选择器：在获取元素字符串之间添加
$("li:eq(0)").css("background","red");
筛选选择器：是方法，在获取元素字符串之外使用
$("li").eq(0).css("background","yellow");
$('ul').children().css('background','green');
children() :找子代
find() :找后代
parent() :找父元素
siblings() :找兄弟
next() :下一个兄弟
prev() :上一个兄弟
eq() :通过指定下标获取元素
JQ中单个样式和多个样式的设置
$(function(){
//even 代表下标为偶数的，odd 代表下标为奇数的
//css(属性，值), 设置单个属性
// $('li:even').css('background','red');
// $('li:odd').css('background','yellow');
// $('li:lt(4)').css('background','green');
// $('li:gt(6)').css('background','yellow');
//css({属性:值,属性:值}) 设置多个属性，用对象的方式
$('li').css({
'background':'red',
'fontSize':'40px',
});
//css(属性名) 获取属性
console.log($('li').css('background'));
index()获取元素下标
$(function(){
$('li').click(function(){
alert($(this).index());
});
});
三组基本动画：
// show()/hide()/toggle()
// fadeIn()/fadeOut()/fadeToggle();
// slideDown()/slideUp()/slideToggle();
show(),可以传参，如果不传递参数，代表没有动画执行。
// 传参可以传数值，比如1000 代表1秒钟执行完动画，还可以传递字符串，比如：normal(正常)，fast(快速)，slow(减速)
自定义动画
animate()四个参数
第一个参数：动画执行的方式，比如：{left:100}；
第二个参数：speed；
第三个参数：执行的效果，比如：linear,swing;
第四个参数：回调函数；
$('#ipt1').click(function () {
$('div').show().animate({ left: 300 }, 3000, 'linear', function () {
console.log('向右移动完成');
});
});
停止动画
stop() clearQueue---是否清楚动画队列 true
jumpToEnd---是否跳转到当前动画的最终结果
小例子：
<script>
$('#ipt1').click(function(){
$('div').slideDown(1000).slideUp(1000);
});
$('#ipt2').click(function(){
$('div').stop(true,true);
});
</script>
创建元素
// $('#box').append('<ul><li></li></ul>');
把一个现有的标签添加的指定的标签中
// $('p').appendTo($("#box"));
创建p标签并添加到div中
$('<p></p>').text( $('textarea').val()).appendTo($('div'));
val()； 获取输入框的值
$('textarea').val())；
append /appendTo 添加的标签为父子关系
//创建一个div，同时把div插入到box中
// $('body').append('<div></div>');
// $('div:eq(1)').appendTo($('#box'));
after /before 添加的标签为兄弟关系
// $('p').before('<span></span>');
// $('p').after('<ul></ul>');
remove() 清除元素
// $('ul li:eq(2)').remove();
empty() 清空内容
// $('ul li:eq(2)').empty();
// $('ul li:eq(2)').text('');
// $('ul li:eq(2)').html('');
获取元素位置
width();height(); 如果不传参数，则是获取元素宽度，给参数，则是设置元素的宽度/高度
// $('div').width();
// console.log($('div').width(500));
innerWidth() 元素的width+padding
outerWidth() 元素的width+padding+border
outerWidth(true) 元素的width+padding+border+margin
scrollLeft() 卷去的宽度
offset() 元素相对于document的偏移
position() 如果有父元素，则是相对于父元素的偏移
事件代理/委托:要给某个元素注册事件,但执行者不是代理方而是最终元素
//delegate() 代理、委托
// 第一个参数：事件最终的执行者，
// 第二参数：触发事件
// 第三个参数：要做什么事情
$('#box').delegate('p','click',function(){
alert('呵呵');
})
//on() 一共是4个参数
// 1：事件类型
// 2.选择器（给谁注册事件）
// 3.data（事件对象event）
// 4.fn (要做的事情)
$('#box').on('click','p',function(e){
//阻止冒泡传播
// e.stopPropagation();
alert('下雨了吗');
})
$('input').click(function(){
$('<p>我是新增加的p标签</p>').appendTo($('#box'));
})
jq中on()的解绑
//off(); 解绑on方法的绑定事件
$('#box p').on('click', function () {
console.log('哈哈');
$('#box p').on('mouseover', function () {
console.log('123');
})
$('#box p').off('mouseover');
})
jq中delay()延迟方法
$('input').on('click',function(){
// $('div').css('display','block');
$('div').fadeIn(1000).delay(3000).fadeOut(2000);
});
jq中each()遍历
//循环添加背景图片
$('li').each(function(index,element){
// console.log(index);//索引值
// console.log(element);//每个元素
$(element).css('background','url(imgs/'+(index+1)+'.jpg)')
$(element).css('backgroundSize','100%')
});
jq中解决$冲突 $noConflict()
jq懒加载
<body>
<div></div>
<img class="lazy" data-original="./images/01.jpg" alt="">
</body>
<script src="./jquery-1.12.4.js"></script>
<script src="./jquery.lazyload.js"></script>
<script>
$ (".lazy").lazyload ();
</script>
jq中设置多个类名和属性
jq方法设置多个类名 addClass 保留之前的样式，增加新样式
$('ul li').eq(7).addClass('a');//增加类名
$('ul li').eq(7).removeClass('a');//删除类名
$('ul li').eq(7).hasClass('a');//有没有类名
console.log($('ul li').eq(9).hasClass('d'));//返回值为布尔类型
// toggleClass 切换类名
attr(属性，值) 设置单个属性
//attr({
// 属性:值，
// 属性:值，
// })
// attr(属性); 获取属性值
$('img').attr('title','我是通过attr改变的');
$('img').attr({
'alt':'老鼠',
'title':'attr改变',
});
//prop() 用法与attr是一样的，只是prop用来设置布尔值类型的属性
// input的几个属性 type：checked， disabled selected
$('#ipt').prop('chicked','true');
console.log($('#ipt2').prop('checked'));