jQuery 基础

jQuery

jQuery操作DOM

jQuery的选择器

• 基本选择器
• 层级选择器
• 过滤选择器

jQuery操作样式

• css操作

  //name：需要设置的样式名称
  //value：对应的样式值
  css(name, value);
  //使用案例
  $("#one").css("background","gray");//将背景色修改为灰色
  -------------设置多个样式----------------
  $("#one").css({
      "background":"gray",
      "width":"400px",
      "height":"200px"
  });
  

• class操作

  // 添加类名
  $(“div”).addClass(“one”);
  
  // 不带参数，移除所有的样式类 removeClass()
  $(“div”).removeClass();
  
  // 移除单个样式类
  $(“div”).removeClass(“one”);
  
  // 判断是否有样式类 判断第一个div是否有one的样式类
  $(“div”).hasClass(“one”);
  
  // 切换样式类：需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
  $(“div”).toggleClass(“one”);
  
  

jQuery动画

• 显示与隐藏:显示(show)与隐藏(hide)是一组动画

  show([speed], [callback]); 
  //speed(可选)：动画的执行时间
  //callback(可选):执行完动画后执行的回调函数
  

• 滑入滑出:滑入(slideUp)与滑出(slideDown)是一组动画，效果与卷帘门类似

  slideUp(speed, callback);
  //speed(可选)：动画的执行时间 默认为normal(400)
  //callback(可选):执行完动画后执行的回调函数
  
  滑入滑出切换
  //如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。
  $(selector).slideToggle(speed,callback);
  

• 淡入与淡出:fadeIn/fadeOut 用法如上

注意

1. jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut

2. 动画切换方法：slideToggle、fadeToggle，注意：show和hide没有切换的方法。

自定义动画

animate：自定义动画

$(selector).animate({params},[speed],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// callback：动画执行完后立即执行的回调函数（可选）

节点的创建，增删查改

• 创建节点$(htmlStr) 返回jQuery对象eg:$(“这是一个span元素”);

• 添加节点：

  var $span = $(“这是一个span元素”);
  $(“div”).append($span);
  
  使用html方法创建元素
  //设置内容
  $(“div”).html(“这是一段内容”);
  //获取内容
  $(“div”).html()
  

• 清空元素

  $(“div”).empty();//清空div的所有内容
  

• 删除元素

  $(“div”).remove();
  

• 克隆元素

  $(“div”).clone()  :深度复制
  $(“div”).clone(true):  事件也能复制
  

jQuery操作DOM

• jQuery操作属性

  //设置单个属性
  $(“img”).attr(“title”,”哎哟，不错哦”);
  //设置多个属性
  $("img").attr({
      title:"哎哟，不错哦",
      alt:"哎哟，不错哦",
      style:"opacity:.5"
  });
  //获取属性    
  var oTitle = $("img").attr("title");
  alert(oTitle);
  // 移除属性
  $("img").removeAttr("title");
  

• jQuery操作值与内容

  val（value）方法用于设置和获取表单元素的值，例如input、select、textarea的值
  $(“#name”).val(“张三”);
  //获取值
  $(“#name”).val();
  
  html方法
  //设置内容
  $(“div”).html(“这是一段内容”);
  //获取内容
  $(“div”).html()
  
  text方法
  //设置内容
  $(“div”).text(“这是一段内容”);
  //获取内容
  $(“div”).text()
  
  html方法与text方法的区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
  

• jQuery操作尺寸

  //带参数表示设置高度
  $(“img”).height(200);
  //不带参数获取高度
  $(“img”).height();
  //带参数表示设置宽度
  $(“img”).width(200);
  //不带参数获取宽度
  $(“img”).width();
  

jQuery事件机制

JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

$(selector).on(events[,selector][,data],handler);
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数

例子：
// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
// 表示给$(selector)绑定事件，并且由自己执行，不支持动态绑定。
$(selector).on( "click", function() {});

事件解绑

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑 
$(selector).off( “click”, “**” ); 

事件触发

$(selector).click(); //触发 click事件
or
$(selector).trigger(“click”);

jQuery 链式编程

链式编程原理：return this;

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。

jQuery 隐式迭代

隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

jQuery插件使用