前端---JQ

1.JQ 2.x版本，不再支持IE6、7、8

2.JQ入口函数
(1)等待文档准备好了，再来执行入口函数里面的代码，来达到操作DOM的目的

   $(document).ready(funtion(){
        //获取按钮并绑定点击事件
   }

(2)简写1

$(function(){

  });

3.jQuery入口函数与js入口函数的区别
(1)js入口函数指的是：window.onload = function() {};

(2)Js入口函数只能出现一次，出现多次会存在事件覆盖的问题

jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题

(3)Js入口函数是在所有的文件资源加载完成后，才执行
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成

4.jQuery对象和DOM对象的相互转换
DOM对象:

var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象

(1)jQuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果,把DOM对象重新包装了一下
(2)DOM对象转换成jQuery对象

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1

(3)jQuery对象转换成DOM对象

var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1

5.基本选择器
(1)# : Id选择器

$("#btnShow").css("color", "red");
   //选择id为btnShow的一个元素（返回值为jQuery对象,下同)

(2). : 类选择器

$(".liItem").css("color","red");
  // 选择含有类liItem的所有元素

(3)element : 标签选择器

   $("li").css("color", "red");
  // 选择标签名为li的所有元素

6.层级选择器
(1)空格 : 后代选择器

 $("#j_wrap li").css("color", "red");
   //选择id为j_wrap的元素的所有后代元素li

(2)> : 子代选择器

 $("#j_wrap > ul > li").css("color", "red");
   //选择id为j_wrap的元素的所有子元素ul的所有子元素li

7.基本过滤选择器
(1):eq(index) :选择匹配到的元素中索引号为index的一个元素，index从0开始

 $("li:eq(2)").css("color", "red");
 //选择li元素中索引号为2的一个元素

(2):odd :选择匹配到的元素中索引号为奇数的所有元素，index从0开始

$("li:odd").css("color", "red");
//选择li元素中索引号为奇数的所有元素

(3):even :选择匹配到的元素中索引号为偶数的所有元素，index从0开始

 $("li:odd").css("color", "red");
//选择li元素中索引号为偶数的所有元素

8.筛选选择器
(1)find(selector) :查找指定元素的所有后代元素（子子孙孙）

$(""#j_wrap").find("li").css("color", "red");
//选择id为j_wrap的所有后代元素li

(2)children() :查找指定元素的直接子元素（亲儿子元素）

 $("#j_wrap").children("ul").css("color", "red");
//选择id为j_wrap的所有子代元素ul

(3)siblings() :查找所有兄弟元素（不包括自己）

  $("#j_liItem").siblings().css("color", "red");
   //选择id为j_liItem的所有兄弟元素

(4)parent() :查找父元素（亲的）

   $("#j_liItem").parent("ul").css("color","red");
//选择id为j_liItem的父元素

(5)eq(index) :查找指定元素的第index个元素，index是索引号，从0开始

   $("li").eq(2).css("color", "red");
   //选择所有li元素中的第二个

(7)next : 下一个节点

9.连式编程 : $(this).css("opacity",1).siblings().css("opacity","0.4");

10.JQ 的this = $(this) ;

二. JQuery-DOM操作
1.使用jQuery的方式来操作DOM更加的简介，方便

2.属性操作
(1)设置单个样式:
// 第一个参数表示：样式属性名称
// 第二个参数表示：样式属性值

$(selector).css("color", "red");

(2)设置多个样式：（也可以设置单个）
// 参数为 {}（对象）

$(selector).css({"color": "red", "font-size": "30px"});

(3)获取样式属性操作
// 参数表示要获取的 样式属性名称

$(selector).css("font-size");

3.类操作
(1)添加类样式 : (addClass) 为指定元素添加类className

   $(selector).addClass("liItem");

(2)移除类样式 : removeClass(className) 为指定元素移除类 className

 $(selector).removeClass(“liItem”);
   $(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类

(3)判断有没有类样式
hasClass(calssName) 判断指定元素是否包含类 className

$(selector).hasClass("liItem");

(4)切换类样式
toggleClass(className) 为指定元素切换类 className，该元素有类则移除，没有指定类则添加

 $(selector).toggleClass("liItem");

4.JQ动画—-显示隐藏
(1)show方法
作用:让匹配的元素展示出来

 /* 单位为：毫秒（ms），参数2000即2秒钟显示完毕 */
   $(selector).show(2000);


   /* slow：600ms、normal：400ms、fast：200ms   自定义的*/
   $(selector).show("slow");

   // 参数一可以是数值类型或者字符串类型
   // 参数二表示：动画执行完后立即执行的回调函数
   $(selector).show(2000, function() {});

   // 不带参数，作用等同于 css(“display”, ”block”)
   /* 注意：此时没有动画效果 */
   $(selector).show();

(2)hide方法
作用：让匹配元素隐藏掉

 $(selector).hide(1000); // 1000表示什么？
   $(selector).hide(“slow”);
   $(selector).hide(1000, function(){});
   $(selector).hide();

5.JQ动画—-滑入滑出
(1)滑入动画效果
作用：让元素以下拉动画效果展示出来

$(selector).slideDown(speed,callback);
   $(selector).slideDown();  //使用默认值：400毫秒

(2)滑出动画效果
作用：让元素以上拉动画效果隐藏起来

  $(selector).slideUp(speed,callback);

(3)滑入滑出切换动画效果

  $(selector).slideToggle(speed,callback);

6.JQ动画—-淡入淡出动画
(1)淡入动画效果
作用：让元素以淡淡的进入视线的方式展示出来

 $(selector).fadeIn(speed, callback);

(2)淡出动画效果
作用：让元素以渐渐消失的方式隐藏起来

  $(selector).fadeOut(1000);

(3)淡入淡出切换动画效果
作用：通过改变透明度，切换匹配元素的显示或隐藏状态

   $(selector).fadeToggle('fast',function(){});

(4)改变透明度到某个值
作用：调节匹配元素的不透明度

// 用法有别于其他动画效果
   // 第一个参数表示：时长
   // 第二个参数表示：不透明度值，取值范围：0-1
   $(selector).fadeTo(1000, .5); //  0全透，1全不透
   // 第一个参数为0，此时作用相当于：.css(“opacity”, .5);
   $(selector).fadeTo(0, .5);

7.自定义动画
(1)所有能够执行动画的属性必须只有一个数字类型的值
作用：执行一组CSS属性的自定义动画

  // 第一个参数表示：要执行动画的CSS属性（必选）
   // 第二个参数表示：执行动画时长（可选）
   // 第三个参数表示：动画执行完后立即执行的回调函数（可选）
   $(selector).animate({params},speed,callback);

Demo :

 jQuery(function () {
                $("button").click(function () {
                   var json = {"width":500,"height":500,"left":300,"top": 300,"border-radius":100};
                   var json2 = {"width":100,"height":100,"left":100,"top": 100,"border-radius":100,"background-color":"red"};

                   //自定义动画
                   $("div").animate(json,1000, function () {
                       $("div").animate(json2,1000, function () {
                            alert("动画执行完毕！");
                       });
                   });


                    //自定义动画
                  $("div").animate({"display":"none","opacity":0,"width":0,"height":0},2000);
                   $("div").animate({"height":0},2000);
                   $("div").animate({"opacity":0},2000);

          })
     })

8.停止动画
(1)stop()
作用：停止当前正在执行的动画
如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中

$(selector).stop(clearQueue,jumpToEnd);
   // 第一个参数表示后续动画是否要执行    （true:后续动画不执行  ;false:后续动画会执行）
   //第二个参数表示当前动画是否执行完      （true:立即执行完成当前动画  ;false:立即停止当前动画）
  // 都不给，默认false；

注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。
并且动画没有执行完成，那么回调函数也不会被执行。

9.jQuery节点操作
(1)创建节点

console.log($("<li class='aaa'>我是li标签</li>")); //创建节点1:$("标签")类比于js中的document.createElement("li");

   $("ul").html("<li>我是html方法穿件出来的li标签</li>")  创建节点2:      $("ul").html("");

(2)添加元素
在元素的最后一个子元素后面追加元
append()
作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）

// 在$(selector)中追加$node
   $(selector).append($node);
   // 在$(selector)中追加div元素，参数为htmlString
   $(selector).append('<div></div>');

Demo:

var jqNewLi = $("<li>我是jquery创建出来的li。用的是append方法添加</li>");
    $("ul").append(jqNewLi);    //把新创建的li塞进ul中

(3)html创建元素
作用：设置或返回所选元素的html内容（包括 HTML 标记）
设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同

// 动态创建元素
   $(selector).html(‘<span>传智播客</span>’);
   // 获取html内容
   $(selector).html();

(4)清空元素

   // 清空指定元素的所有子元素（光杆司令）
   // 没有参数
   $(selector).empty();
   $(selector).html("");
   // “自杀” 把自己（包括所有内部元素）从文档中删除掉
   $(selector).remove();

(5)复制元素,节点
作用：复制匹配的元素

// 复制$(selector)所匹配到的元素
   // 返回值为复制的新元素
   $(selector).clone();

推荐使用html(“”)方法来创建元素或者html(“”)清空元素

10.操作form表单
(1)属性操作

// 第一个参数表示：要设置的属性名称
   // 第二个参数表示：改属性名称对应的值
   $(selector).attr(“title”, “传智播客”);

获取属性
// 参数为：要获取的属性的名称，改操作会返回指定属性对应的值

  $(selector).attr(“title”);

移除属性

// 参数为：要移除的属性的名称
   $(selector).removeAttr(“title”);

注意：checked、selected、disabled要使用.prop()方法。
—$("tbody input:checkbox").prop("checked","true");

(2)值和内容
val()方法
作用：设置或返回表单元素的值，例如：input,select,textarea的值

  // 获取匹配元素的值，只匹配第一个元素
   $(selector).val();
   // 设置所有匹配到的元素的值
   $(selector).val("具体值");

text() 方法
作用：设置或获取匹配元素的文本内容

//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）
  $(selector).text();
  //设置操作带参数，参数表示要设置的文本内容
  $(selector).text(“我是内容”);

11.尺寸位置操作
(1)高度操作height()
作用：设置或获取匹配元素的高度值

//带参数表示设置高度
   $(selector).height(200);
   //不带参数获取高度
   $(selector).height();

(2)宽度操作width() ：
作用：设置或获取匹配元素的宽度值

   //带参数表示设置宽度
   //不带参数获取宽度
   $(selector).width(200);

(3)css()获取高度和height获取高度的区别

 $("div").height() ;        //返回的是number类型，例如: 30
   $("div").css("height");    //返回值为string类型，例如：30px
   //区别: 方式一常用在参与数学计算的情况下

(4)坐标值操作
—offset()
作用：获取或设置元素相对于文档的位置

// 无参数表示获取，返回值为：{left:num, top:num}，值是相对于document的位置
   $(selector).offset();
   // 有参数表示设置，参数推荐使用数值类型
   $(selector).offset({left:100, top: 150});

//注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative

—position()
作用：获取相对于其最近的具有定位的父元素的位置

  // 获取，返回值为对象：{left:num, top:num}
   $(selector).position();

注意：只能获取，不能设置。

—scrollTop()
作用：获取或者设置元素垂直方向滚动的位置

 // 无参数表示获取偏移
   // 有参数表示设置偏移，参数为数值类型
   $(selector).scrollTop(100);

—scrollLeft()
作用：获取或者设置元素水平方向滚动的位置

  $(selector).scrollLeft(100);

对scrollTop的理解：
垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条，那么这个距离为0

练习
1.状态选择(select 选中的标签)

  $("#sel2").append($("#sel1:selected"));

2.动态获取JSON数据并添加到表格中

str += "<tr><td>"+data[i].name+"</td><td>"+data[i].url+"</td><td>"+data[i].type+"</td></tr>";
$("#j_tbData").html(str);    //3.把生成的字符串设置为html内容添加进tbody中。

3.获取第几个

var index = $(this).index() ;

===========JQ-UI
1.简单事件绑定
(1)click(handler) 单击事件
(2)blur(handler) 失去焦点事件
(3)mouseenter(handler) 鼠标进入事件
(4)mouseleave(handler) 鼠标离开事件
(5)dbclick(handler) 双击事件
(6)change(handler) 改变事件，如：文本框值改变，下来列表值改变等
(7)focus(handler) 获得焦点事件
(8)keydown(handler) 键盘按下事件

2.bind方式(不推荐，1.7以后的jQuery版本被on取代)
作用：给匹配到的元素直接绑定事件

// 绑定单击事件处理程序
  第一个参数：事件类型
  第二个参数：事件处理程序
  $("p").bind("click mouseenter", function(e){
      //事件响应方法
  });

(1)可以同时绑定多个事件，比如：bind(“mouseenter mouseleave”, function(){})

(2)delegate方式（特点：性能高，支持动态创建的元素）
作用：给匹配到的元素绑定事件，对支持动态创建的元素有效

// 第一个参数：selector，要绑定事件的元素
   // 第二个参数：事件类型
   // 第三个参数：事件处理函数
   $(".parentBox").delegate("p", "click", function(){
       //为 .parentBox下面的所有的p标签绑定事件
   });

与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！

3.on方式（最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用的方式）
(1)作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点

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

  // 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件
  $(selector).on( "click",“span”, function() {});

  // 绑定多个事件
  // 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
  $(selector).on("click mouseenter", function(){});

4.事件解绑
(1)unbind() 方式
作用：解绑 bind方式绑定的事件

  $(selector).unbind(); //解绑所有的事件
   $(selector).unbind("click"); //解绑指定的事件

(2)undelegate() 方式
作用：解绑delegate方式绑定的事件

   $( selector ).undelegate(); //解绑所有的delegate事件
   $( selector).undelegate("click"); //解绑所有的click事件

(3)off解绑on方式绑定的事件

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

5.事件触发
(1)简单事件触发

  $(selector).click(); //触发 click事件

(2)trigger方法触发事件，触发浏览器行为

 $(selector).trigger("click");

(3)triggerHandler触发 事件响应方法，不触发浏览器行为
比如:文本框获得焦点的默认行为

   $(selector).triggerHandler("focus");

6.jQuery事件对象介绍
event.data 传递给事件处理程序的额外数据
event.currentTarget 等同于this，当前DOM对象
event.pageX 鼠标相对于文档左部边缘的位置
event.target 触发事件源，不一定===this
event.stopPropagation()； 阻止事件冒泡
event.preventDefault(); 阻止默认行为
event.type 事件类型：click，dbclick…
event.which 鼠标的按键类型：左1 中2 右3
event.keyCode 键盘按键代码

7.each方法
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

Element是一个 js对象，需要转换成jquery对象

8.多库共存
当在同一个页面中引用了jQuery这个js库，
并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量

9.jQuery插件机制

10.制作插件

11.jQueryUI
jQueryUI专指由jQuery官方维护的UI方向的插件

练习
1.input值 : $(“tbody input:checkbox”)

2.全选

$("#j_tb input:checkbox").click(function () {
    //判断，只有所有都背选定，上面的才被选定
    //技术点：带有checked属性的标签和checkbox个数一样多的时候
    if($("#j_tb input:checkbox").length === $("#j_tb input:checked").length){
         //只有所有的都有checked属性，上面的才被选定
         $("#j_cbAll").prop("checked",true);
    }else{
         $("#j_cbAll").prop("checked",false);
    }
});

3.val() , text() , html()
(1)val() : 获取设置标签中value属性的值
(2)text() : 获取设置双闭合标签中的文本值 ，不识别标签
(3)html() : 获取设置双闭合中的文本值 ，识别标签

4.JQ 屏幕滑动事件： $(window).scroll(funtion(){});

5.$(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
prevAll() :前面的兄弟元素
.end().nextAll() :后面的全部元素

6.链式编程

$(".comment").on("mouseenter", "li", function() {
        // 鼠标移入：让当前的元素和它前面的所有兄弟变为实心
        // end方法：结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态
        $(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
      }).on("mouseleave", function() {
        // 先让所有的五角星变为空心
        $(".comment").children().text(wjx_none);
        // 让具有clicked类的元素变为实心，并且它前面的所有元素也变为实心
        $(".clicked").text(wjx_sel).prevAll().text(wjx_sel);
      }).on("click", "li", function() {
        // 给当前元素添加类，给它所有的兄弟元素移除类
        // 此处clicked类，只做标识用
        $(this).addClass("clicked").siblings().removeClass("clicked");
});