JQuery 知识点总结

概念:

  • JavaScript库

    • 把一些浏览器兼容性,或者是一些常用的函数封装到一个js文件中,就是JavaScript库

    • 我们自己封装的animate.js,就是JavaScript库

常见的JavaScript库: jQuery、Prototype、MooTools

JQuery的优点

  • 强大的选择器

  • 链式编程

  • 隐式迭代

  • 丰富的插件,可以自己编写插件

  • 开源

JQ中的*对象

jQuery中的*对象是$或jQuery

  • 获取jQuery对象

  • 入口函数

注意:jQuery中的$和jQuery关键字本身为同一对象

JQ中的页面加载事件

使用jQuery的三个步骤:

  • 引入jQuery文件

  • 入口函数

  • 功能实现

关于jQuery的入口函数:

// 第一种写法
$(document).ready(function() {
});
// 第二种写法
$(function() {
});

jQuery入口函数与window.onload的对比(重要)

  • JavaScript的入口函数要等到DOM创建完毕,页面中所有资源(包括图片、文件)加载完成才开始执行。

  • jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。

  • window.onload只能注册一次,jQuery入口函数可以注册多次

  • jQuery的入口函数,封装了DOM中的DOMContentLoaded事件(此事件DOM加载完毕之后就执行)

JQ对象和DOM对象

DOM对象

  • 用原生JavaScript获取的DOM对象

    • 通过document.getElementById() 返回的是元素(DOM对象)

  • 通过document.getElementsByTagName()获取到的是什么?

    • 伪数组(集合),集合中的每一个对象是DOM对象

JQ对象 ( DOM对象包含JQ对象)

jQuery对象又可以叫做包装集(包装的DOM对象的集合)

  • jQuery对象用$()的方式获取的对象

  • length属性,获取对象内部的DOM元素个数

JQ对象和DOM对象的区别

JQ对象不能调用DOM对象的属性和方法,同样DOM对象也不能调用JQ对象的属性和方法。

两者之间的转换

DOM对象转换成jQuery对象

$(DOM对象)

jQuery对象转换成DOM对象

jQuery对象[索引值]
jQuery对象.get(索引值)

$最常用的三种方法

  1. $('选择器') 返回jQuery对象

  2. $(DOM对象) 返回jQuery对象

  3. $(function() {}) 入口函数

选择器

基本选择器

名称 用法 描述
ID选择器 $('#id') 获取指定ID的元素
类选择器 $('.class') 获取同一类class的元素
标签选择器 $('div') 获取同一类标签的所有元素
并集选择器 $('div,p,li') 使用逗号分隔,只要符合条件之一就可。
交集选择器 $('div.redClass') 获取class为redClass的div元素

与css选择器用法一样

层级选择器

名称 用法 描述
子代选择器 $('ul > li') 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器 $('ul li') 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

过滤选择器

名称 用法 描述
:eq(index) $('li:eq(2)').css('color', 'red') 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。equal
:odd $('li:odd').css('color', 'red') 获取到的li元素中,选择索引号为奇数的元素
:even $('li:even').css('color', 'red') 获取到的li元素中,选择索引号为偶数的元素

筛选选择器

名称 用法 描述
children(selector) $('ul').children('li') 相当于$('ull > i'),子类选择器
find(selector) $('ul').find('li') 相当于$('ul li'),后代选择器
siblings(selector) $('#first').siblings('li') 查找兄弟节点,不包括自己本身。
parent() $('#first').parent() 查找父亲
eq(index) $$('li').eq(2) 相当于 $$('li:eq(2)'),index从0开始
next() $('li').next() 找下一个兄弟
prev() $('li').prev() 找上一次兄弟

JQ样式操作

CSS操作

操作单个样式

// name:需要设置的样式名称
// value:对应的样式值
$obj.css(name, value);
// 使用案例
$('#one').css('background','gray');// 将背景色修改为灰色

操作多个样式

// 参数是一个对象,对象中包含了需要设置的样式名和样式值
$obj.css(obj);
// 使用案例
$('#one').css({
    'background-color':'gray',
    'width':400,
    'height':400
});

获取样式

// name:需要获取的样式名称
$obj.css(name);
// 案例
$('div').css('background-color');

注意:获取操作的时候,如果是多个元素,那么只会返回第一个元素的值。

隐式迭代:

  1. 设置操作的时候,如果是多个元素,那么给所有的元素设置相同的值

Class操作

添加样式类

// name:需要添 加的样式类名,注意参数不要带点.
$obj.addClass(name);
// 例子,给所有的div添加one的样式。
$('div').addClass('one');

移除样式类

// name:需要移除的样式类名
$obj.removeClass('name');
// 例子,移除div中one的样式类名
$('div').removeClass('one');

判断是否有某个样式类

// name:用于判断的样式类名,返回值为true false
$obj.hasClass(name)
// 例子,判断第一个div是否有one的样式类
$('div').hasClass('one');

切换样式类

// name:需要切换的样式类名,如果有,移除该样式,如果没有,添加该样式。
$obj.toggleClass(name);
// 例子
$('div').toggleClass('one');

JQuery操作属性

元素固有属性prop()

checked、selected、disabled这类boolean类型的属性来说,不能用attr方法,只能用prop方法。这些称为元素固有属性。

// 设置属性
$(':checked').prop('checked', true);
// 获取属性
$(':checked').prop('checked');// 返回true或者false

元素自定义属性值 attr()

 //设置单个属性 
$obj.attr(name, value);  
$('img').attr('title','哎哟,不错哦');
 //设置多个属性 
$obj.attr(obj)
$('img').attr({
    title:'哎哟,不错哦',
    alt:'哎哟,不错哦',
    style:'opacity:.5'
});
 //获取属性
$obj.attr(name)
 //移除属性
$obj.removeAttr(name);
$('img').removeAttr('title');

val()、text()、html()

$obj.val()        获取或者设置表单元素的value属性的值
$obj.html()     对应innerHTML
$obj.text()        对应innerText/textContent,处理了浏览器的兼容性

JQ动画

三组基本动画

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

  • 滑入(slideUp)与滑出(slideDown)与切换(slideToggle),效果与卷帘门类似

  • 淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)

$obj.show([speed], [callback]);
// speed(可选):动画的执行时间
     // 1.如果不传,就没有动画效果。如果是slide和fade系列,会默认为normal
     // 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     // 3.固定字符串,slow(600)、normal(400)、fast(200),如果传其他字符串,则默认为normal。
// callback(可选):执行完动画后执行的回调函数
​
slideDown()/slideUp()/slideToggle();同理
fadeIn()/fadeOut()/fadeToggle();同理

自定义动画

$(selector).animate({params},[speed],[easing],[callback]);
// {params}:要执行动画的CSS属性,带数字(必选)
// speed:执行动画时长(可选),默认400
// easing:执行效果,默认为swing(缓动)慢快慢  可以是linear(匀速)
// callback:动画执行完后立即执行的回调函数(可选)

动画队列与停止动画

在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画执行完成了才会执行

解决方法:在每一次动画执行前添加一个stop()属性,让其停止队列,并清除之前的动画效果。

链式编程

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

 $("#dv").html("<p>这是一个p</p>");
 $("#dv").css("backgroundColor","red");
​
//链式写法
 $("#dv").html("<p>这是一个p</p>").css("backgroundColor","red");

JQuery节点操作

创建节点

$('<span>这是一个span元素</span>');

添加节点

append  appendTo        在被选元素的结尾插入内容
prepend prependTo       在被选元素的开头插入内容
before                  在被选元素之后插入内容
after                   在被选元素之前插入内容

清空节点与删除节点

  • empty:清空指定节点的所有元素,自身保留(清理门户)

$('div').empty(); // 清空div的所有内容(推荐使用,会清除子元素上绑定的内容,源码)
$('div').html('');// 使用html方法来清空元素。
  • remove:相比于empty,自身也删除(自杀)

$('div').remove();

克隆节点

复制匹配元素

// 复制$(selector)所匹配到的元素(深度复制)
// cloneNode(true)
// 返回值为复制的新元素,和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
$(selector).clone();

JQuery尺寸和位置操作

width方法和height方法

设置或者获取高度,不包括内边距、边框和外边距

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

获取网页的可视区宽高

// 窗口大小发生变化的事件
window.onresize = function () {};
// 获取可视区宽度
$(window).width();
// 获取可视区高度
$(window).height();

innerWidth\innerHeight\outerWidth\outerHeight

innerWidth()/innerHeight()    方法返回元素的宽度/高度(包括内边距)。
outerWidth()/outerHeight()  方法返回元素的宽度/高度(包括内边距和边框)。
outerWidth(true)/outerHeight(true)  方法返回元素的宽度/高度(包括内边距、边框和外边距)。

scrollTop \ scrollLeft

  • 设置或者获取垂直滚动条的位置

// 当页面滚动的时候 - 事件
// window.onscroll 
​
// 获取页面被卷曲的高度
$(window).scrollTop();
// 获取页面被卷曲的宽度
$(window).scrollLeft();
​
// 设置滚动动画
$('body,html').animate({
    scrollTop: 0
}, 100)

offset方法与position方法

  • offset方法获取元素距离document的位置,position方法获取的是元素距离有定位的父元素(offsetParent)的位置。

// 获取或设置元素距离document的位置,返回值为对象:{left:100, top:100}
$(selector).offset();
// 获取相对于其最近的有定位的父元素的位置。
$(selector).position();

on注册事件(重要)

优势:

1、可以绑定多个事件,多个事件处理程序

            $("div").on({
                 mouseenter: function() {
                    $(this).css("background", "skyblue");
                 },
                 click: function() {
                     $(this).css("background", "purple");
                 }
             });

若事件处理程序相同

  $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });

2、 on可以实现事件委托(委派)

click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li
             $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });

3、on可以给未来动态创建的元素绑定事件

$("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);

事件处理 off() 解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

 $("div").off("click"); // 这个是解除了div身上的点击事件
            $("ul").off("click", "li");
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })

事件处理 trigger() 自动触发事件

   $("div").click();会触发元素的默认行为
            // 2. 元素.trigger("事件")
            $("div").trigger("click");会触发元素的默认行为
            $("input").trigger("focus");
            // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
            $("div").triggerHandler("click");
            $("input").on("focus", function() {
                $(this).val("你好吗");
            });

Hover

$(selector).hover(fnEnter, fnLeave);
// 下面的简写形式
$(selector).mouseenter(function () {
}).mouseleave(function () {
})

jQuery 事件对象

jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。

element.on(evenets,[selector],function{event}{})

阻止默认行为 : event.preventDefault() 或者return false

停止冒泡:event.stopPropagation()

each遍历方法

  • jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了。

作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数

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

JSON数据

是一种轻量级的数据交换格式,主要用于数据 存储 交换

数据在存储时,只会存储字符串格式,在接收数据时,需要再次转换为数组、对象的格式

对象、数组转为字符串:

JSON.stringify(obj)

字符串转为对象、数组

JSON.stringify(arr);

JQuery常用插件

jQuery 之家 jQuery之家-*分享jQuery、html5、css3的插件库

jQuery 插件使用步骤(比猫画虎):

1)引入相关文件。(jQuery 文件 和 插件文件)

2)复制相关html、css、js (调用插件)。

瀑布流插件

兼容IE8的响应式网格瀑布流布局jQuery插件_jQuery之家-*分享jQuery、html5、css3的插件库

图片懒加载插件

EasyLazyload.js 超好用js图片延迟加载

bootstrap插件

bootstrap官网进行下载操作

全屏滚动插件

jQuery全屏滚动插件fullPage.js演示_dowebok

上一篇:css3-弹性盒简介


下一篇:python中的冒泡排序