jquery总结

jquery引包：

引入jquery的script标签与书写jquery语句script标签不能是同一个

 

jquery简化了DOM开发， 比如添加、删除、修改节点等

jquery不需要再进行能力检测，都是兼容的

jquery是javascript的一个实用库，它不是一门新的语言，内部语句也都是js书写的

 

 

$函数：

jquery对象与js对象互相转为

js转为jquery对象： 直接使用$函数包裹

jquery对象转为js: 使用[]

 

 

选择器：

Css2.1选择器：

类、 id、 标签、后代、交集、 并集、 通配符

Css3选择器：

$(“标签:first()”)     第一位

$(“标签:last()”)    最后一次

$(“标签:eq(x)”)   序号数

$(“标签:lt(x)”)   大于

$(“标签:gt(x)”)   小于

$(“标签:odd”)   基数

$(“标签”even”)   偶数

 

 

jQuery函数：

最初引入jquery时候想全局暴露的是jQuery函数，后来人们觉得书写起来比较复杂，所有才修改为$，但是jQuery仍然保留我们还可以继续使用

 

 

jquery中添加事件的方式

第一种方式：

$(dom).on(type事件, fn函数)

第二种使用方式：

$(dom).type事件(fn函数

 

 

常用方法：

size: 用于获取元素的个数 （在jquery1.8版本之后被废弃掉了）常用的是length属性

     html方法    1：添加节点    2：设置元素的内部文本， 参数就是要设置的内容 3：获取元素的内部文本

     addClass: 添加类名

     removeClass: 移除类名

      attr：该方法可以设置元素的原有属性 $(dom).attr(k, v)  k: 设置的属性  v: 属性值

show: 是显示的意思，只有当元素的状态是display: none的时候才可以使用， 最终的状态的display: block

hide：是隐藏的意思， 与show相反

toggle: 切换显示隐藏

slideDown: 慢慢展开，只有当元素的装态是display: none的时候才可以使用，最终的状态仍然是display: block

slideUp: 与slideDown相反

slideToggle: 切换慢慢展开

      fadeIn: 淡入

      fadeOut: 淡出，

     fadeTo(600, .5): 第一个参数表示完成动画的时间， 第二个参数是指定的透明度

     fadeToggle: 切换淡入淡出

     each方法用于遍历、循环所匹配到的所有元素， 接收一个参数是函数， 函数中也有一个this，表示遍历到的该对象 ，有一个参数i， 表示遍历到的该对象的序号

 

 

 

节点操作:

     常用:

         parent: 只会选中父亲，不会选中爷爷或者是曾爷爷

       siblings: 会选中所有的兄弟节点

      children: 会选中所有的子节点

      eq表示选中元素大队列的排名， 与亲兄弟没有直接关系 eq选中元素的不同，序号也是不相同的

     index: 是亲兄弟的排名， 只要是同一个父节点就是亲兄弟

 

不常用:

        next: 会选中下一个兄弟节点

        nextAll: 会选中后面所有的兄弟节点

        prev: 会选中上一个兄弟节点

        prevAll: 会选中前面所有的兄弟节点

       parents: 会选中祖先节点   

       find: 会选中后代节点

 

 

animate函数

     

animate可以接收两个参数

第一个参数： json

第二个参数： 是完成动画的时间

第三参数：回调函数function

 

能够参与动画的属性

     所有数值型的属性都能够参与动画

width

height

border

 

   不能参与动画的属性

backgroundColor

backgroundPosition

Css的一些复杂属性（transform）

border-radius可以参与动画的

 

delay: 延迟， 只能够在动画之前使用，接收一个参数就是要延迟的时间

animate()、 show(1000)、hide(1000)、 slideDown()、slideUp()、 fadeIn()、 fadeOut()

 

 

回调函数

 

异步语句： 类似于animate这种需要花费时间的语句，比如后面还有其他的js语句， 这些语句不会死等着animate执行完之后去执行

 

回调函数： 异步语句一般都有一个回调函数，当异步语句执行完毕之后要做的事情就是写在回调函数中

 

 

stop方法 常用节流

 

stop

该方法用于让运动的元素立即停止动画， 接收两个参数， 都是布尔值， 默认是fasle

第一个参数： 表示是否清空动画队列

第二个参数： 表示是否立即完成动画

stop(false, false): 等价于stop() 立即进入下一个动画，立即停止当前动画 stop(false, true)： 立即进入下一个动画， 立即完成并停止当前动画 stop(true, true)： 清空当前动画队列， 立即完成并停止当前动画 stop(true, false): 等价于stop(true) 清空当前动画队列， 立即停止当前动画

 

防止动画积累

          放弃原有动画 立即执行新的动画     用stop(true)来实现        

          只有当元素不运动的时候， 才接受新的动画        is(“:animated”):表示元素是否具备某种状态

 

 

创建元素

// 创建一个元素
var $div = $("<div class='aaa' data-info='nihao'>conetent</div>");

上树

jquery中上树的方法有很多种， 可以是父元素选择子元素，可以是子元素选择父元素， 还可以兄弟选择兄弟

 

父元素选择子元素:

$(dom).append(child): 在dom的后面追加child

$(dom).prepend(child): 在dom的前面追加child

 

子元素选择父元素：

$(child).appendTo(dom): 将child追加到dom的后面

$(child).prependTo(dom): 将child追加到dom的前面

// 父元素选择子元素 往后面追加

var $list = $("#list");

创建一个li元素
var li = document.createElement("li");
设置内部文本
li.innerHTML = 1;

原生元素
$list.append(li);

jquery对象
$list.append($("<li>2</li>"))

html
$list.append("<li>3</li>");








父元素选择子元素 往前面追加

var $list = $("#list");

创建一个li元素
var li = document.createElement("li");
设置内部文本
li.innerHTML = 1;

原生元素
$list.prepend(li);

jquery对象
$list.prepend($("<li>2</li>"))

html
$list.prepend("<li>3</li>");






子元素选择父元素 往后面追加

var $li1 = $("<li>1</li>");
var $li2 = $("<li>2</li>");
var $li3 = $("<li>3</li>");

原生元素
$li1.appendTo(document.getElementById("list"));

jquery对象
$li2.appendTo($("#list"));

选择器
$li3.appendTo("#list");





// 子元素选择父元素 往前面追加
var $li1 = $("<li>1</li>");
var $li2 = $("<li>2</li>");
var $li3 = $("<li>3</li>");

// 原生元素
$li1.prependTo(document.getElementById("list"));

// jquery对象
$li2.prependTo($("#list"));

兄弟选择兄弟

       $(dom).after(element)    往doom后面追加

 $(dom).before(element)  往doom前面追加

$(dom).insertBefore(element): 将dom插入到某个元素的前面

$(dom).insertAfter(element): 将dom插入到某个元素的后面

// 创建一个li元素
var $li = $("<li>999</li>");
var $li1 = $("<li>000</li>");

// 将创建出来的li插入到four的前面
$li.insertBefore($("#four"));

// 将创建出来的li1插入到four的后面
$li1.insertAfter($("#four"));


// 在four的前面追加某个元素
$("#four").before("<li>哈哈</li>");

// 在four的后面追加某个元素
$("#four").after("<li>嘎嘎</li>");

wrap 用于将匹配的元素外层多一层元素

 wrapAll 用于将所有匹配到的元素的外层添加一层元素

 unwrap 用于将匹配到的元素去掉一层外层元素

 replaceWith、 replaceAll   

1. replaceWith 将匹配到的元素替换成参数元素
2. replaceAll 将指定的元素替换掉参数元素

 empty 表示清空后代节点， 自己还在

remove 表示自杀， 自己和后代都没有了

clone方法接收一个参数是bool，默认是false， 天生连同子节点一起复制， 当传递true的时候，连同事件一起复制

// 给box注册一个点击事件
$("#box").on("click", function() {
	alert(123);
})

// 再次克隆 并且传递true
$("#box").after($("#box").clone(true));

jquery中的快捷尺寸

// content
console.log("content的宽是:", $("#box").width());
console.log("content的高是:", $("#box").height());


//content + padding:
console.log("innerWidth的值是:", $("#box").innerWidth());
console.log("innerHeight的值是:", $("#box").innerHeight());


//content + padding + border:
console.log("outerWidth的值是:", $("#box").outerWidth());
console.log("outerHeight的值是:", $("#box").outerHeight());


//content + padding + border + margin:
console.log("outerWidth(true)的值是:", $("#box").outerWidth(true));
console.log("outerHeight(true)的值是:", $("#box").outerHeight(true));

定位值：

// 获取元素的定位值
var $box2_position = $("#box2").position();
console.log($box2_position);