学习记录---01jQuery---jQuery入口函数-对象-API-链式编程-操作样式-效果显示

wtite Less , Do more

jQuery 入口函数

1.等页面DOM加载完毕后再执行

• $(document.ready(function(){}))
• $(function(){} )

jQuery 的顶级事件
$(function(){} )等同于Query(function(){} )

jQuery对象和DOM对象

1. DOM对象 用原生js获取的元素对象
2. jQuery对象 用jQuery获取的元素对象—利用$符号对DOM元素进行封装 区别
3. jQuery对象只能用jQuery方法，不能使用原生js的影响

两种对象的转换

DOM对象转换为jQuery对象
$(DOM对象)
代码示例

var video = document.querySelector('video);
$(video)

jQuery对象转换为DOM对象(获取索引)

• $(’’).[索引].方法()
• $(’’).get(索引).方法()

---

常用API

1.jQuery选择器

• 1.1基础选择器

  $("选择器")------基本的css选择器都可以写

• 1.2设置样式

  $("选择器").css()–既使是一个伪数组，jq里面也会将里面所有的元素css改变 元素(伪数组形式存储)的过程就叫做隐式迭代

• 1.3隐式迭代

  就是把匹配的所有元素内部进行遍历循环，给每一个元素添加方法

• 1.4筛选选择器

  :first 获取第一个元素 $(‘li:first’)
  :last 获取最后一个元素 $(‘li:last’)
  :eq(index) 获取索引为index的元素 $(‘li:eq(2)’)
  :odd 获取索引号为奇数元素 $(‘li:odd’)
  :even 获取索引号为偶数元素 $(‘li:even’)

• 1.5筛选方法

  .parent() 查找父级 最近一级的父级元素 亲爸爸
  .children(selector) 查找亲儿子 类似自带选择器 ul>li
  .find(selector) 类似后代选择器 所有孩子 包括儿子和孙子以及…
  .siblings(selector) 查找兄弟节点，不包括自己本身 selector-指定的选择器
  .nextAll([expr]) 查找当前元素之后所有的同辈元素
  .prevtAll([expr]) 查找当前元素之前所有的同辈元素
  .hasClass(class) 检查当前元素是否含有某个特定的类，返回布尔值
  .eq(index) 相当与:eq(index) 获取索引为index的元素

• 1.6补充

  $(this) 当前元素
  hide() 隐藏
  show() 显示

2.排他思想
当前元素的样式值设置
当前元素的兄弟元素的样式不设置.siblings()

获取当前元素的索引
$(this).index()

---

链式编程

对象调用完一个方法后可以调用另一个方法

$(this).css('color','red');
$(this).siblings('button').css('color','');

等价于

$(this).css('color','red').siblings('button').css('color','');

断链
调用完一个方法后 ，返回的元素发生了改变

$(this).siblings('button').css('color','').css('color','red');
$(this).siblings('button').css('color','') //返回的是兄弟元素

.end() 恢复断链 恢复对象发生改变之前的指向（返回的元素）

操作样式

css()

• $(this).css("width")获取的是元素的属性值

• $(this).css("width","300px") ------>$(this).css("width",300)

• css参数可以是对象–改变多组值

  $(this).css({"width","300px","height","300px"});属性和值可以不加引号，如果是复合属性，必须采取驼峰命名法
  设置单个时名称可以使用css的也能使用驼峰命名法

代码实例

var a = $(this).css("width");//只能写一个，一次只能获取一个
console.log(a);
//对象的方法设置
    $(this).css({'width':400,'height':400,'backgroundColor':'yellow'});
//链式编程的方法设置
$(this).css('width',400).css('height',400).css('backgroundColor','yellow');

操作样式–通过类名

• $(this).addClass("类名"); 添加
• $(this).removeClass("类名"); 移除
• $(this).toggleClass("类名"); 切换
• $(this).hasClass("类名"); 判断是否有这个类型

jQuery的类操作和className的区别

jQuery类操作不影响原型的类名—jQuery类操作相当于追加类名

---

jQuery效果

1. 显示隐藏

   1.1 显示

     $('div').show(speed,easing,callback);
   

   1.1 隐藏

   $('div').hide(speed,easing,callback);
   

   1.1切换

    $('div').toggle(speed,easing,callback);
   

   一般显示隐藏不做动画，不加参数就是没有动画效果的显示隐藏

2. 滑动效果

   2.1 下拉

   slideDown(speed,easing,callback)
   

   2.2 上拉

   slideUp(speed,easing,callback)
   

   2.1 切换

   slideToggle(speed,easing,callback)
   

   speed-----速度slow normal fast 也可以设置数值 数值的单位是ms
   easing-----速度曲线，一般不设置，需要时可以查手册
   callback-----回调函数，动画执行之后再执行的函数

3. 事件切换

   3.1 .hover(over,leave)
   over鼠标经过触发事件
   leave鼠标离开触发事件

   3.2 hover如果只写一个函数，那么鼠标经过和鼠标离开都会触发

   代码实例

   $('.nav>li').hover(function() {
      $(this).children('ul').slideToggle();
      });
   
   

4. 动画队列及其停止动画排队

   动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
   stop()
   stop()必须写在动画的前面

   代码实例

   $('.nav>li').hover(function() {
   $(this).children('ul').stop().slideToggle();});
   

5. 淡入淡出效果

   5.1 淡入 fadeIn(speed,easing,callback)
   5.2 淡出 fadeOut(speed,easing,callback)
   5.3 切换fadeToggle(speed,easing,callback)
   5.4 渐进方式调整淡入淡出（修改透明度） fadeTo(speed,opacity,easing,callback) 速度和透明度这两个参数一定要写

6. 自定义动画
   animate(json,[speed],[easing],[fn])
   json中的一般只能改数字类型的样式

mouseenter()、mouseleave()没有冒泡，也可以参考hover()