jQuery学习笔记

jQuery学习笔记

一，认识jQuery

一个js的方法库。

（1）

$(function(){   // DOM渲染完毕执行函数
  function();
})

（2）注意jQuery 和 DOM 对象（js原生获取）是不同的。

• 前者是个伪数组。

• jQuery对象只能用jQuery方法，DOM对象只能用原生js的属性和方法

• 他们可以相互转化

  //1， DOM转jQ
  $(DOM对象)   
  //2，jQ转DOM
  $('div')[0]
  $('div').get(0)
  

二，jQ常用API

1， 选择器

（1）基础选择器

（2）自带选择器

（3）筛选选择器

$('p:first')    // 获取第一个p元素
$('p:last')    // 获取最后一个p元素
$('p:eq(n)')    // 获取索引号为n的p元素（从0开始）
$('p:odd')    // 获取索引号为奇p元素
$('p:even')    // 获取索引号为偶p元素

（4）筛选方法

// 语法 用法 说明
parent()  
$("li"). parent(); //查找父级
  
children(selector)
$("ul").children("li")相当于$("ul>li"") //最近一级(亲儿子)

find(selector)
$("ul").find("li");相当于$("ul li") //后代选择器

siblings(selector)
$(".first").siblings("li"); //查找兄弟节点，不包括自己本身

nextAll([expr])
$(".first") .nextAll() //查找当前元素之后所有的同辈元素

prevtAll([ expr])
$(".last").prevAll() //查找当前元素之前所有的同辈元素

hasClass(class)
$('div').hasClass("protected") //检查当前的元素是否含有某个特定的类，如果有，则返回true

eq(index)
$("li").eq(2);  //相当于$("li:eq(2)"),index从0开始

2，jQuery样式操作

（1）样式

$("div").css("display");  // 返回属性值
$("div").css("display","none")  // 修改
$("div").css("width",300)： //属性值为数字加单位，可以不加引号，不要单位
// 多个属性修改    ---- 对象形式，冒号，逗号，驼峰命名法
  $("div").css({
    "width": 200,
    "backgroundColor": "red"
  })

（2）添加类

// 添加  不要加 .   删除，添加都不影响原先就有的类名
$("div").addClass("myAddClass");  
// 删除
$("div").removeClass("myAddClass");
// 切换 -- 添加后删除
$("div").toggleClass("myAddClass");

3， jQuery效果

动画效果------建议查文档

动画队列及其停止排队方法

• 动画或效果队列：动画或者效果一旦触发就会执行，如果多次触发，他们就会排队执行。

• 停止排队

  stop()
  // stop()写到动画或者效果的前面，相当于停止结束上一次动画。
  $("div").stop().slideUp();
  

（1）基本

//显示隐藏效果
show([speed],[easing],[fn]);
//显示参数
//( 1) 参数都可以省略，无动画直接显示。
//( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值
//( 3 ) easing :(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
//( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
//隐藏
hide([speed],[easing],[fn]);
// 切换
toggle([speed],[easing],[fn]);

（2）滑动

// 下滑
slideDown([speed],[easing],[fn]);
// 上拉
slideUp([speed],[easing],[fn]);
// 切换
slideToggle([speed],[easing],[fn]);

(3)淡入淡出

// 淡入
fadeIn([speed],[easing],[fn]);
// 淡出
fadeOut([speed],[easing],[fn]);
//切换
fadeToggle([speed],[easing],[fn]);
//参数
//(1 ）参数都可以省略。
//( 2 ) speed :三种预定速度之一的字符串(“slow”，"normal”,or“fast”)或表示动画时长的毫秒数值
//( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。

//渐进方式调整到指定的不透明度
fadeTo ([ speed , opacity, [easing] , [ fn] ])
//参数
//( 1 ) opacity透明度必须写，取值0~1之间。
//(2) speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值必须写
//( 3 ) easing :(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）自定义动画

animate(params,[speed],[easing],[fn])
// 参数 params 是想要更改的样式，以对象形式传递，必须写
$("div").animate({
    left:500,
    top:300,
    opacity: .5
}, 500)   // 在500ms 内完成运动

4，jQuery属性操作

（1）获取/修改 元素固有属性

element.prop("attribute","value");

（2）获取/修改 元素自定义属性

element.attr("attribute","value");

<--也可以获取 H5 的data-开头的自定义属性  -->
<div data-index = "1"> </div> 
<script>
    $("div").attr("data-index");
</script>

(3)数据缓存 data()

//data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，数据将移除
$("div").data("uname","jack");
// 也可以用它获取 H5 自定义属性
$("div").data("index");  // 可以不用写 data-，而且返回的是 数字型

5，设置文本内容

（1）

$().html(); //相当于 innerHTML
$().text(); //相当于 innerText
$().val();  // 获取或设置表单的值

6，元素操作

6.1 遍历元素

（1）

$("div").each(function (index, domEle){
//  index是索引号，注意domEle是dom元素对象
})

（2）

$.each(obj,function(index, element) { }) // 主要用于遍历数组和对象，也可以遍历元素
//遍历元素
$.each($("div"), function(i,ele){});
// 遍历数组
$.each(arr,function(i,ele){}); // 这里的ele是数组内的元素
//遍历对象
$.each(person,function(i,ele)); // 这里类似于for in，i是属性名，ele是属性值

6.2 创建元素

（1）创建

 var p = $("<p>创建的元素标签</p>");

(2)内部添加*（父子关系）

// 放在父元素最后面
$("div").append(p);
// 放在父元素最前面
$("div").prepend(p);

(3)外部添加（兄弟关系）

//放在div元素的后面
$("div").after(p);
//前面
$("div").before(p);

(4)删除元素

element.remove() // 删除匹配的元素（本身）
element.empty()  // 删除匹配元素集合中所有的子节点

7，尺寸操作

(1) 尺寸

width() / height()           //取得匹配元素宽度和高度值只算width / height
innerWidth()/ innerHieght()  //取得匹配元素宽度和高度值包含padding
outerWidth() / outerHeight() //取得匹配元素宽度和高度值包含padding . border
outerWidth(true) / outerHeight(true)//取得匹配元素宽度和高度值包含padding . borde、margin
//以上参数为空，则是获取相应值，返回的是数字型。
///如果参数为数字，则是修改相应值。 
width(300);
//参数可以不必写单位。

（2）位置

// 1 获取盒子距离文档的位置（偏移）
$("div").offset();
// 也可以设置距离
$("div").offset({
    top:100,
    left:200
})
// 2 获取距离带有定位的父级位置（偏移），不能设置大小
$("div").position();
// 3 设置或获取被卷去的头部，左侧
$("div").scrollTop();
$("div").scrollLeft();

8，jquery事件

8.1,事件注册

（1）事件注册

// 1，单个事件注册
$("div").click(function(){} );

（2）事件处理 on () 绑定事件

// 语法
element.on( event, [selector], fn)
// 1 event 一个或多个用空格分隔的事件类型，如"click"或“keydown”
// 2 selector 元素的子元素选择器
// (1)绑定多事件
$("div").on({
    click:function(){},
    mouseover:function(){}
});
// (2)事件函数相同的情况
$("div").on("mouseover mouseout", function() {
    $(this).toggleClass("current");
}
});
// (3) 事件委托
$("ul").on("click","li",function(){}) //事件绑定在父元素 ul 上 
// (4)动态创建的元素绑定事件
$("ul").on("click","li",function(){})
var li = $("<li>动态创建</li>");
$("ol").append(li);   // 注意是利用事件委托实现的

（3）绑定一次性事件

$("div").one("click",function() {});

（4）事件切换

.hover([func1()]，func2());  // 鼠标经过触发func1.离开触发func2
.hover(func())  // 只有一个就经过和离开都触发

8.2，事件解绑

（1）off() 方法可解绑通过 on() 绑定的事件

// 解除所有绑定事件
$("div").off()
// 解除某个事件
$("div").off("click");
// 解除事件委托
$("ul").on("click","li",function(){});
$("ul").off("click","li");

8.3，自动触发事件

$("div").click() // 1
$("div").trigger("click",function() {}); // 2
$("div").triggerHandler("click", function() {}); // 3，这个方法不会触发元素的默认行为

8.4，事件对象

事件被触发，就会有事件对象的产生。

element.on (events, [selector] ,function(event) { })
//阻止默认行为:
event.preventDefault();
return false;  //或者
//阻止冒泡:
event.stopPropagation();

三、其他

1，jQuery对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend ()方法。

$.extend ([deep], target, object1, [objectN ])
//1.deep:如果设为true为深拷贝，默认为false浅拷贝
//2.target:要拷贝的目标对象(空对象)
//3.object1:待拷贝到第一个对象的对象。
//4.objectN:待拷贝到第N个对象的对象。
//5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
//6.深拷贝，前面加true，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被考贝对象。

2,多库共存

//1 如果$ 符号冲突，可以使用jQuery
jQuery("div");
//2 让jQuery释放对 $ 的控制权，用户自定义符号
var infi = jQuery.noConflict();
infi("div");

四，jQuery插件

常见插件库

1，
jQuery插件库
2，
jQuery之家