jQuery 基础

jquery 笔记day1

jquery概述

1.为什么要学习jquery

原因：1.他是js的一个工具包，里面有很多方法，使用方便；
          2.可以兼容很多浏览器；（IE678以后不用单独处理）
          3.任何语言发展到成熟阶段都会出现工具包和框架
jquery得优点： 连式编程和隐式迭代
jquery的缺点：功能冗长，比较大
jquery：javascript query （js的一个查询包）

2.体验jquery

jquery的两大特点： 1.连式编程2.隐式迭代（不使用for循环，操作一个就是操作所有）

3.jquer的注意点

1.要引包
2.入口函数（不会被层叠）
$(function( ){ }); 3.事件绑定：$(“div”).click(function(){ alert() });

4.jquery的入口函数（8种）

1. $();
2. $(window).ready();
3. $(document).ready(); 4.jQuery(); 5.jQuery(window).ready(); 6.jQuery(document).ready(); 7.$(window.load(function(){ });(涉及到图片要用这个)
   8.jQuery(window).load(function(){ });

5.jQuery对象和DOM对象的转换

1.由DOM对象转换成jQuery对象;
     $(DOM对象);
2.由jQuery对象转换成DOM对象;
     jQuery对象[索引值]
     jQuery对象.get(索引值)

6.jQuery 选择器

1.基本选择器
# : id; . : class; 标签名：tagName; css(属性, 值): 可以设置样式;
2.层级选择器
3.过滤选择器
even： 偶数索引值对应的元素代表奇数位置(获取jquery对象)
odd：奇数索引值对应的元素代表偶数位置（获取jquery对象）
eq（索引值）；获取jquery对象 （获取第一个 ul>li:eq（0），获取最后一个 ul>li:eq(7)）
4.筛选选择器
find（） 查找子子孙孙
children（） 查找亲儿子元素
parent（） 查找父元素亲生父亲
siblings（） 查找所有的兄弟元素（不包括自己，什么都不写，获取所有的兄弟节点，不分种类）
eq（） 查找指定索引值的jquery对象；
next/prev（） 查找前一个或后一个兄弟节点
nextAll（）；prevAll（） 之后所有兄弟节点和之前所有兄弟节点
index（） 该元素在父元素中的索引值

7.jQuery的样式操作

1.样式操作
css()使用方法介绍（3种）
底层有获取样式封装和设置样式封装
getStyle(); ele.style.left/width=();
css(一个属性):获取值;(传递一个参数)
css(json);赋值;(传递一个对象或者json)（键值对） 设置到行内
css(属性，值)； 赋值（两个值） 设置到行内
操作类的方法有四种：
addClass（）：添加类（不影响原有的类名）
removeClass（）：删除类；
hasClass（）：判断类；（返回的是布尔值）
toggleClass（）：切换类；（无变有，有变无）

2.jQuery动画
总结: 使用动画前，先stop(); //以免出现动画累加
显示隐藏动画（）
3种方法，每种方法都有四种操作形式；
show（）；hide（）；toggle（）；
a。无参；b。毫秒值；c。字符串；d。回调函数。
show（）显示盒子；hide（）隐藏盒子；toggle（）切换显示盒子；
滑入滑出动画
3种方法，每种方法都有四种操作形式；
slideDown（）；sildeUp（）；slideToggle（）；
a.无参; b.毫秒值; c.字符串; d.回调函数;
slideDown（）滑入盒子；sildeUp（）滑出盒子；slideToggle（）切换滑入滑出盒子；
淡入淡出盒子
4种方法，每种方法都有四种操作形式
fadeIn（）；fadeOut（）；fadeToggle（）；fadeTo（）；
a.无参; b.毫秒值; c.字符串; d.回调函数;
fadeIn（）淡入盒子；fadeOut（）淡出盒子；fadeToggle（）切换淡入淡出盒子；fadeTo（）切换淡入淡出盒子；
自定义动画
animate（json，timer，string，fn）；
json 属性和对应的目标值； timer：事件的毫秒值； string：匀速或者缓动； fn：回调函数；主函数执行完毕再执行的函数；
animate方法也不是万能的很多属性处理不了：background-color/float/…
停止动画
stop（boolean1，boolean2）；使用动画前，先stop();
第一个参数表示后续动画是否是要取消（true 后续动画不执行，false 后续动画会执行）
第二个参数表示当前动画是否立刻执行完毕（true：立即执行完成当前动画，false立即停止当前动画）

3.节点的操作

元素的创建（2种）
1.html（）；类似于原生js的innerHTML属性，原有的老元素li事件容易被覆盖；
2.$(“

• “);类似于document.createElement（）；
  创建的是一个jQuery对象；
  元素的添加（6种）
  1.jQuery对象节点.append（jQuery对象）；放在最末尾
  2.jQuery对象.appendTo（jQuery对象父节点）；
  3.jQuery对象父节点.prepend（jQuery对象）；放在最前面
  4.jQuery对象.prependTo（jQuery对象父节点）；
  5、6.都是以兄弟节点的形式添加；
  after（li）把新节点放到调用者之后；before（li）把新节点放到调用者之前；
  元素的删除（3种）
  1.empty（）；清空；（先解绑事件，然后再删除元素，执行效率高）
  2.html（”“）； 清空（强制性把父元素和所有子元素的联系斩断）
  3.remove（）；删除调用者；
  元素的复制（1种）
  clone（）；不能浅层复制；（boolean 可以控制事件是否复制）