jq

【1.jq简介】
jQuery出生于2006年 是一个美国人约翰写的，它出生的目的是简化js书写，jq的广告语：写的少，做的做。它和js是父子关系；

【2.什么是DOM】
dom其实就是我们的document；

【3.为什么要学习jq】
因为jq书写简单，容易理解，兼容性好（解决了几乎所有的兼容性问题）。

【4.jq的书写步骤】
1.加载jq文件
2.换一行再写script标签
3.写jq版的window.onload :  $(function(){ 这里是代码 })
4.利用“金钱”收买元素 ： $('想要获取的元素')
5.jq的事件不用加on，直接写匿名函数即可 ： click(function(){ 代码 })

【5.关于入口函数】
window.onload 只能写一个，如果写了多个，只会执行最后一个
$(function(){})  可以写多个 并且都会执行

【6.关于对象】
DOM对象：    利用document获取的是DOM对象   安卓手机：安卓系统、双卡双待、换电池
jQuery对象： 利用$('') 获取的是jQuery对象  苹果手机：ios系统、单卡单待、不能电池

结论：对象之间的方法和属性是不能通用的；

【7.对象之间的转换】
DOM对象转换为jq对象：用金钱收买它：  $(box) 这样就可以实现转化 转化之后就可以使用jq的方法和属性了；

jq对象转化为DOM对象：写法1：.get(0)   写法2：[0]  注意：这个0是编号，意思是获取的第几个元素

【8.用jq控制css】
书写格式: .css('属性名','属性值');
注意：控制复合属性的时候，有两种写法 1.完全按照css的书写格式例：background-color
2.按照驼峰命名法的写法 例：backgroundColor

多属性的修改：.css({'属性名1':'属性值1','属性名2':'属性值2','属性名3':'属性值3'.......});
注意：不要学坏 该用单引号括起来的就一定不能省，这样做会让你犯错误的几率降到最低

获取css属性： .css('要获取的属性名');

【9.用jq控制标签属性】
同css的语法，只不过换成attr而已

【10.修改html内容】
使用html()  例： html('这里面写成什么，<h1>就会改成什么</h1>'); 注意这里面的标签是给浏览器看的；

【11.jq动画】
（1）渐变动画
hide()   隐藏
show()   显示
toggle() 在显示和隐藏之间切换
注意：如果想实现渐变动画 必须添加时间参数 否则看不到动画效果

（2）滑动动画
slideUp()      滑动隐藏
slideDown()    滑动显示
slideToggle()  滑动切换
注意：滑动动画如果不加时间参数 默认也是有动画效果的

【12.jq的选择器】
（1）jq的基本选择器
$('#id')        id选择器
$('.class')     类选择器
$('div')        标签选择器
$('*')          通配符选择器
$('div,li,a')   多条件选择器
$('.demo li')   子代选择器
$('.demo>li')   选择第一级的子代
$('.demo+li')   紧挨着的下一个
$('.demo~li')   指定标签后面的所有同级

（2）jq的过滤选择器
特点： 冒号开始
$('div:first')          找第一个
$('div:last')           找最后一个
$('div:not(.demo)')     找所有的div但是里面不能有叫demo的
$('div:eq(2)')          找第三个div
$('div:gt(2)')          找大于三的div
$('div:lt(2)')          找小于三的div

（3）筛选选择器
父：  $('p').parent()       找父亲
子：  $('li').children()    找儿子
兄弟：$('.demo').siblings() 找兄弟（找我的小伙伴）

【13.jq的动画排队机制】
在jq当中有一种机制：如果动画被执行了多次，那么一定会按照次数执行完毕，有的时候我们不想要这样的事情发生，解决办法： 在动画之前加上stop() 就可以取消动画排队的机制

 

 

 

【1.jq中的链式编程】
在jq中但凡是针对同一目标进行的操作，都可以利用点语法连续来书写，这种形式叫链式编程

【2.jq中的索引值】
在jq中元素自带的有一个索引值 我们只需要 .index() 就可以获取了

【3.控制class】

addClass()       添加类
removeClass()    删除类
hasClass()       判断是否有某一个类(判断的结果是true或者false)
toggleClass()    切换类 如果有某一个类那么就删除它，如果没有就加上
注意：这一系列的方法 小括号中都不加“点” ，我们使用attr（）也可以设置class，但是既然jq已经给我们准备好了专门class的方法 哪么我们就不要再使用attr去控制class了
例  addClass('myClass')

【4.节点操作】
在选定标签的内部添加
（1）append()    添加在指定元素的最后
（2）prepend()   添加在指定元素的最前

在同级添加
（1）after()     在同级之后添加
（2）before()    在同级之前添加

添加节点的书写步骤
1.创建节点： var myTag = $('<li>222</li>');
2.有了节点之后 再通过添加节点的4个方法来进行添加

删除节点：
$('ul').remove()   彻底的删除标签（斩草除根）

清空节点：
$('ul').empty()    只删除元素内部的标签(斩草留根)

【5.关于val】
在jq中我们如果想获取一个标签的value值直接可以使用val() 方法
注意：textarea标签获取值的时候要用val() 不能用html()

【6.移动节点】
insertBefore()   在之前插入

insterAfter()    在之后插入
例子：$('ul li').eq(2).insertBefore($('ul li').eq(0));
解释：把ul下面的第三个li执行了一个剪切操作，粘贴到了第0个li的前面

【7.替换节点】
$('div').replaceWith('这里写要替换的标签');

 

 

 

【1.fade动画】
fadeOut()     淡出动画
fadeIn()      淡入动画
fadeToggle()  切换       例：fadeToggle(时间)
fadeTo()      改变透明度 例：fadeTo(时间,透明度的值)------fadeTo(1000,0.5)  
注意：带有动画的操作（hide、show、toggle、slide系列） 一般来说可以写这几个英文单词来控制速度 fast slow normal 在使用的时候要用单引号括起来 才能生效

【2.animate自定义动画】
结构：animate({'属性名1':'属性值1','属性名2':'属性值2'......},时间)
例：animate({'left':'200px','top':'200px'},1000);

注意：不能写非数值型的属性例如（background是不行的），如果写了两个以上的参数，那么他们的数值是同时在变化的，如果你想让他们分别执行，哪就必须写两个animate动画

delay(时间) ：控制动画运行到此处的时候要暂停一下 例： delay(1000)

【3.关于animate的stop】
我们说过slide动画系列 如果添加了两次 :slideDown（）.slideUp()像这样的动画效果 我们要加上stop的位置必须是在第一个动画之前，因为这是jq给我们预备好的方法，我们只能这样去停止动画，而我们在写animate动画的时候，如果执行了两次自定义的animata，那么每次animate都要加stop

【4.局部变量和全局变量】
在js中一对大括号代表着一个独立的空间，在这个空间当中声明的变量相对于这个大括号来讲是全局变量，而相对于其他的大括号来讲，就是一个局部变量。
在js中有一个关键性的概念：局部变量只能在自己的大括号中被使用，在其他的大扩号中是不能被获取的。

【5.each函数】
each函数就是为了替代for循环存在的，一般用在需要把多个元素单独控制的情况下：
each(function(index,element){})  index代表第几个元素 element代表循环当次那个元素
$(element)  这样写代表的是当前循环的那个元素 

【6.事件坐标】
在我们的事件的function（e）这里面的e代表的是事件被触发时候的坐标信息
我们可以通过e.pageX和e.pageY 来获取x轴和y轴的坐标值

【7.鼠标移动事件】
mousemove()  只要移动了鼠标，哪怕是1px，都会触发。 这个mousemove事件一般是加给浏览器窗口的；例：$(window).mousemove(function(e){ 这里就可以用e来获取坐标值了 })

 

 

 

【1.渐进增强理论】
随着浏览器版本的增强，能看到的效果也会越来越好，但是我们还要保证低版本的浏览器能够正常的使用。

【2.元素偏移】
scroll 事件 是用来获取滚动条运动的事件
一般来说这个scroll事件是加给window   格式： $(window).scroll(function(){执行代码})

scrollTop() 这个是滚动条 滚动的垂直距离 如何获取：$(window).scrollTop();

【3.知识点】
1.小知识点：子绝对 父相对 也可以 子绝对 父固定
2.console.log() 这种检测方式要用浏览器的f12功能里面的 console的功能区查看的，因为我们有时候要测试代码用alert（）会被多次执行，会弹出多个对话框，十分的不方便，用console.log(代码) 就会很方便的查看多次运行的事件了

3.关于在scroll事件当中使用stop的事情： 因为scroll事件是被多次执行的 如果代码里面有动画效果，那么会被多次的执行，就会触发我们的动画排队机制，如果想取消掉，就给动画之前加上stop（）

【4.关于元素距离顶部的距离获取】
$('.nav').offset().top  这样可以获取nav距离顶端的距离

【5.关于一道面试题】
position: static;  这个事定位元素的默认值

【6.控制scrollTop】
$('html,body').animate({'scrollTop':'0px'},500);
这里的选择器必须要写 html和body 为了兼容性。

【7.获取当前窗口的信息】
$(window).height()  获取当前窗口的高度
$(window).width()   获取当前窗口的宽度