Jquery保姆级别教学

Jquery Jquery入口函数：

1.$(document).ready(function() {});

2.$(function() {});

Jquery的入口函数和JavaScript的入口函数：

1.window.onload 不能写多个，但是Jquery可以写多个

2.如果Jquery的入口函数和javascript的入口函数同时出现，则先执行Jquery的入口函数，再执行javascript的入口函数

3.Jquery的入口函数需要等待DOM树加载完毕后再执行

4.javascript等待所有资源加载完成后执行

$是什么？

1.如果报错($未定义)的话，则说明没有引入Jquery文件

2.Jquery是一个自执行函数，这个自执行文件就是给window对象添加一个Jquery属性和$属性,$其实和Jquery是等价的，是一个函数,window.jquery = window.$ = jquery

3.$是一个函数，传参不同，效果不一样
	1.匿名函数:创建为入口函数
	2.$('#one')：选择器
	3.$('加油')：创建标签
	4.$(dom元素)：把dom对象转换为Jquery对象

DOM对象与Jquery对象：

1.DOM对象：原生js选择器获取到的对象
	特点：只能调用dom方法或者属性，不能调用Jquery方法或者属性
	
2.Jquery对象：利用Jquery选择器获取到的对象
var $div1 = $('one'); $div1.css('backgroundColor'.'red'); 是一个伪数组

DOM对象和Jquery对象相互转换： DOM对象转换为Jquery对象：

	$(dom对象);

Jquery对象转换为DOM对象：

1.使用下标取出：var $divs = $('div'); var div1 = $divs[0];

2.使用Jquery的get()方法：var $divs = $('div'); var div1 = $divs.get(1)

获取文本内容：test();

1.获取：不加参数为获取文本内容，获取所有文本

2.设置：参数为新设置的文本，有覆盖效果(会覆盖子标签)

获取样式css(属性名)；

备注：在ie浏览器中，要获取边框这样的样式，必须给准确的边框(上，下，左，右；宽度，颜色)
	 当获取多个相同标签的样式，只能获取到第一个dom对象的样式值

设置样式：css('样式名'，'样式值'); ===> 单样式编辑，设置的是行间样式

设置样式：$('#div1').css({'width':'300',.....}) ===> 多样式编辑

基本选择题：

1.ID选择器:$('#id');

2.类选择器:$('.div');

3.标签选择器:$('div');

4.并集选择器:$('div,p,li'); 用逗号分隔

5.交集选择器:$('div.redclass'); 获取class为redclass的div元素

层次选择器： 子代选择器：

$('ul > li');

后代选择器：

$('ul li');

过滤选择器：

:eq(index) ===> $(li:eq(2)).css(...) 选择索引值为2的li元素添加样式

:odd ===> $('li:odd') 选择索引值为奇数的元素

:even ===> $('li:even') 选择索引值为偶数的元素

筛选选择器：

children(); ===> $('ul').children('li'); 子代选择器

find(); ===> $('ul').find('li'); 后代选择器

siblings(); ===> $('#first').sibling('li'); 查找兄弟节点li

parent(); ===> $('#first').parent(); 查找父节点

eq(); ===> $('li').eq(2) 相当于$('li:eq(2)')

next(); ===> $('li').next() 找下一个兄弟节点

prev(); ===> $('li').prev() 找上一个兄弟节点

鼠标事件：

1.mouseover: 事件在鼠标移到选取元素及其子元素都发生

2.mouseenter: 事件只在选取元素上发生(mouseleave)

class类 *** 作：

1.添加类：addclass('类名'); 添加多个类：addclass('类名' '类名');用空格间隔

2.移除类：removeclass(''); 移除多个类：removeclass('类名' '类名');用空格间隔 移除全部类：removeclass()，不需要加参数

3.判断类：hasclass('类名');

4.切换类：toggleclass('类名'); 如果元素有这个类，就移除这个类，如果没有这个类，就添加这个类

动画显示与隐藏：

1.显示show(a,b);无参数就无动画效果
	参数a：执行动画的时长(毫秒数)，也可以为字符串(fast(200),normal(400),slow(600))
	参数b：回调函数，执行完毕后的回调函数
	
2.隐藏hidden(a,b);无参数就无动画效果
	参数a：执行动画的时长(毫秒数)，也可以为字符串(fast(200),normal(400),slow(600))
	参数b：回调函数，执行完毕后的回调函数
	
3.切换toggle(a,b);无参数就无动画效果
	参数a：执行动画的时长(毫秒数)，也可以为字符串(fast(200),normal(400),slow(600))
	参数b：回调函数，执行完毕后的回调函数

滑入与滑出：

1.滑入slideDown(a,b);
	参数a：动画时长，默认为normal，可不设置参数
	参数b:回调函数
	
2.slideUp(a,b);
	参数a：动画时长，默认为normal，可不设置参数
	参数b:回调函数
	
3.slideToggle(a,b);
	参数a：动画时长，默认为normal，可不设置参数
	参数b:回调函数

淡入与淡出

1.淡入fadeIn(a,b);
	参数a：动画时长，默认为normal，可不设置参数
	参数b:回调函数
	
2.淡出fadeOut(a,b);
	参数a：动画时长，默认为normal，可不设置参数
	参数b:回调函数
	
3.切换fadeToggle(a,b);
	参数a：动画时长，默认为normal，可不设置参数
	参数b:回调函数
	
4.淡入的结束位置fadeTo(a,b);
	参数a：动画运动的时间
	参数b：数值(0~)

自定义动画animate();

ainimate(a,b,c,d);
	参数a：必选的  一个对象  代表需要做动画的属性
	参数b：可选的  动画时长
	参数c：可选的  缓动还是匀速(swing,linear)
	参数d：回调函数，可以在函数里面继续动画

动画队列

清除动画队列shop(a,b);
	参数a：是否清除队列
	参数b：是否跳转到最终效果
	例如：shop(true,true);
	如果不给参数：则默认都为true

动态创建元素：

原生javascript中创建节点:
	document.write('') , innerHTML , document.creatElement('div')

Jquery中创建节点:
	1.HTML() 不给参数为获取内容
	  HTML() 给参数会把原来的内容覆盖，如果参数中有标签，会解析标签
	  
	2.$('') 可创建元素，但是元素不存在于HTML中，只存在于内存中，如果需要在HTML中显示出来，则需要追加append(...)
		el:var $link = $(''); $('#app').append($link);

Jquery中创建节点的几种方法：

1.append(); 作为最后一个子元素添加 append是剪贴作用而不是数值作用
	var $li = $('我是新创建的li'); $('#ul').append($li)
	
2.prepend(); 作为第一个子元素添加 剪贴作用
	var $li = $('我是新创建的li'); $('#ul').prepend($li)
	
3.before(); 元素A.before(B):把B插入到A之前，作为兄弟元素添加   :select 用来选择已选择的对象

4.After(); 同before相似，把B插入到A之后，作为兄弟元素

5.appendTo(); 子.appendTo(父) 同append相似 el:$('#ul1').appendTo($('#ul2'))

清空节点与移除节点

1.清空节点:
	$('#ul').html(" "); 不推荐使用。不安全
	$('#ul').empty(); 推荐使用
	
2.移除某一元素:
	$('#li').renmove();

克隆节点:clone(a);

	克隆的节点只存在于内存中，如果需要展示在页面，需要追加(append)
	
	参数a：true/false 是否克隆事件，默认为false

获取或者设置表单元素的内容：val();

原生javascript中使用value来获取或者设置表单元素的内容

1.不给参数：获取内容
2.给参数：设置值，值为参数

*** 作属性：attr(); removeattr();

1.设置属性：attr('属性','属性值'); 单属性设置  可以修改属性，也可以设置属性
		   attr({....}); 多属性设置

2.获取属性：attr('属性') 可获取自带式自定义属性和普通属性

3.移除属性：removeattr('属性'); ===> 单属性移除
		   removeattr('属性 属性'); ===> 之间用空格间隔 多属性移除
		   
4.如果 *** 作boolean类型的属性，不能用

获取和设置宽、高样式

1.用.css('width'/'height')方法获取的时带px的字符串

2.用width()/height()获取或设置宽高，这个宽高不包括padding/margin/border

3.用innerwidth()/innerheight()获取包括padding的宽高

4.用outerwidth()/outerheight()获取包括padding+border的宽高，加上参数ture的话可以获取padding+border+margin的宽高

5.用$(window).width();$(window).height();获取页面可视区域的宽高

offset()与position()

1.offset() 得到一个对象，Top和left值，元素距离document的距离

2.position() 得到对象，Top和left值，元素距离定位父级元素的距离

scrollleft()和scrollTop()

1.scrollleft() 元素内容被卷曲的宽度

2.scrollTop() 元素内容被卷曲的高度

这两个都可用来获取和设置值

3.$(window).scrollleft()

4.$(window).scrollTop()

这两个可以获取和设置页面别卷曲的宽度和高度

on注册事件

1.简单注册：$('#div').on('click',function() {})

2.on委托注册:给父级注册事件，支持动态注册:$(父级).on('click','子元素',function() {})

3.事件解绑:off() 不传参数为解绑所有事件，传参为解绑指定事件

4.事件触发：trigger() 可设置自定义事件

Jquery的事件对象

注册一个事件，系统会帮助我们生成一个对象记录这个事件触发的一些信息。例如：是否按住某个键，坐标信息
	$('#one').on('click',function(e) {console.log(e)}) 用e来获取这些信息

Juqery的对象是对原生js事件对象的封装，处理好了兼容性问题

有常用的三个坐标信息:screenX和screenY,clientX和clientY,pageX和pageY
	screenX和screenY:屏幕左上角到点击位置的距离
	clientX和clilentY:可视区域左上角到点击位置的距离
	pageX和pageY:页面左上角到点击位置的距离
    
阻止事件冒泡：e.stopPropagation()

阻止浏览器默认行为:e.preventDefault()

既能阻止事件冒泡又可以阻止默认行为: return false;

获取按键代码: e.keycode