XM的小窝


 

【jQuery】jQuery 学习笔记

1. 初识jQuery

试着运行以下代码

$('p').html("HELLO Jquery!!");
jQuery('a').hide()

jQuery顶级对象

$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$

特别的,如果遇到了入口冲突的问题,就可以用jQuery入口方法

2. jQuery 隐式迭代

隐式迭代 jquery 会默认遍历一遍获取到的伪数组对象
就是把匹配到的所有元素内部进行遍历循环,给每个元素操作一遍

$("p").html("ddd");//所有的p元素的内容会被替换为ddd
$("p").css('background', 'pink');//所有的p元素的背景颜色会被替换为pink

3. DOM对象转换为JQuery对象

var body = document.querySelector('body');
// 直接用$包装一下就能转换成jquery对象了
$(body);
//jq对象转换为DOM对象
var d = $('body')[0]; //第一种
d = $('body').get(0); //第二种

4. jQuery选择器

jQuery 基础选择器

原生 JS 获取元素的方式多且杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素变得统一标准

$("选择器") // 里面选择器直接写CSS选择器即可,需要加上引号

名称 用法 描述
ID选择器 $("#id") 获取指定ID的元素
全选选择器 $("*") 匹配所有元素
类选择器 $(".class") 获取同一类class的元素
标签选择器 $("div") 获取同一类标签的所有元素
并集选择器 $("div,p,li") 选取多个元素
交集选择器 $("li.current") 交集元素

JQuery 筛选选择器

JQuery 筛选方法 (重点

语法 用法 说明
parent() $('li').parent(); 查找父级
parents() $('.son').parents(); 查找父级所有元素,如果有参数,则是查找指定标签的所有元素
children(selector) $("ul").children("li"); 相当于$("ul>li"),最近一级(亲儿子)
find(selector) $('ul').find("li"); 相当于$("ul li"),后代选择器
siblings(selector) $(".first").siblings("li"); 查找兄弟节点,不包括自己本身
nextAll([expr]) $(".first").nextAll() 查找当前元素之后所有的同辈元素
prevAll([expr]) $(".last").prevAll() 查找当前元素之前的所有同辈元素
hasClass(class) $('div').haClass("protected") 检查当前的元素是否含有某个特定的类,如果有
则返回true
eq(index) $("li").eq(2) 相当于$("li:eq(2)"),index从0开始

常用方法

//注意一下都是方法 带括号
$(function() {
// 1. 返回的是最近一级的父级元素
$('.son').parent());
// 2.子 (亲儿子)
$('.son').children('p').css('color','red');
// 3.兄 find()类似于后代选择器
$('.nav').find('p').css('background','pink');
// 4.排他思想的简易实现
$($('input').change(function() {
$(this).siblings("input").prop("checked", false);
}));
});

5. jQuery链式编程

链式编程是为了节省代码量,看起来更优雅(

$(this).css('color','black').siblings().css('color','red')

P.S:使用链式编程的时候,需要注意一下操作的对象是否正确

$(this).siblings().addClass('hide');//给自己兄弟添加hide类,自身类不变
$(this).siblings().parent().css('color','pink')//给兄弟的父级添加颜色

6. jQuery 效果

jQuery给我们封装了很多动画效果,最常见的如下:

显示隐藏 滑动 淡入淡出 自定义动画
show() slideDown() fadeIn() animate()
hide() slideUp() fadeOut()
toggle() slideToggle() fadeToggle()
fadeTo()

语法规范

show([speed],[easing],[fn]);
hide([speed],[easing],[fn]);
toggle([speed],[easing],[fn]);
slideDown([speed],[easing],[fn]);
slideUp([speed],[easing],[fn]);
slideToggle([speed],[easing],[fn]);
fadeIn([speed],[easing],[fn]);
fadeOut([speed],[easing],[fn]);
fadeToggle([speed],[easing],[fn]);
fadeTo([speed],opacity,[easing],[fn]);
animate(params,[speed],[easing],[fn]);
  • 参数
    • 参数都可以省略,无动画直接显示
    • speed:三种预定速度之一的字符串("slow","normal","or","fast")或表示动画市场的毫秒数值(如:1000)
    • easing:(Optional)用来指定切换效果,默认是’swing‘,可用参数“linear”。
    • fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
    • opacity: 透明度,必填项,取值在0-1之间
    • params: 想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采用驼峰命名法(eg: borderLeft)。其余参数都可以省略。

使用例

$(function(){
    $("button").eq(1).click(function(){
        // $(this).hide("fast");//快速隐藏
        $('div').hide(1000,function(){alert('隐藏成功')});//1s隐藏+回调
    });
    $("button").eq(0).click(function(){
        $('div').show("fast");//快速显示
        // $('div').show(1000,function(){alert("显示成功")});//1s显示+回调
    });
    $("button").eq(2).click(function(){
        $('div').toggle("fast");//快速切换
    });

    $("button").eq(2).click(function(){
        $('div').fadeTo(1000,0.5);//1s切换时间 + 修改透明度为0.5
    });
    .........
})

自定义动画

$(function(){
    $("button").click(function(){
        $('div').animate({
            left: 500,
            top: 200,
            opactiy: .4,
            width: 300
        },1000,'swing')
    })
});

事件切换

hover([over],[out])

over:鼠标移到元素上要 触发的函数(相当于mouseover)
out:鼠标移出元素要触发的函数(相当于mouseleave)
如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数

例:

$('nav>li').hover(function(){do someting...},function(){do someting...})
$('nav>li').hover(()=>{$('.list').slideToggle()})//配合切换方法

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

动画或效果队列

动画或者效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队执行

解决方法:每次执行的时候先使用stop方法停止队列中的函数。再执行新的操作

//stop方法必须写在动画的前面
$('.nav>li').hover(function(){
    $('this').children('ul').stop().slideToggle();
})

7.jQuery 属性操作

设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性,比如a元素里面的href input元素里面的type
如果是人为定义的属性,就不属于固有属性

设置或获取元素自定义属性值 attr()

和prop不一样,attr()可以获取不属于元素固有的属性

数据缓存 data()

data() 方法可以在指定元素上存取数据,并不会修改DOM元素结构,页面一旦刷新,存储的数据就会被移除

操作方法:

//获取属性值
$('选择器').prop("属性名")
$('选择器').attr("属性名")
//设置属性
$('选择器').prop("属性名","值")
$('选择器').attr("属性名","值")
//设置h5自定义属性
$('div').attr("data-index",4)
//数据缓存,不会再dom结构中显示
$('span').data('name',"zhangsan")
//这个方法可以获取data-index h5自定义属性 不用写data-前缀 返回的是数字型
$('div').data('index');

内容文本值

内容文本值操作,主要是对元素的内容还有表单的值操作

普通元素内容html() (相当于inner HTML)

$('div').html() //获取元素内容
$('div').html("内容") //设置元素的内容

普通元素文本内容text() (相当于 innerText)

$('div').text()//获取元素内文本内容
$('div').text('ddd')//设置元素内文本内容

获取表单内容val() (相当于 value() )

$('div').val()//获取表单标签内文本内容
$('div').val('ddd')//设置表单标签内文本内容

8. jQuery元素操作

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的动作,如果想要给同一类元素做不同操作,就需要使用到遍历

语法1:

('div').each(function(index,DOMEle){xxxx;});
  1. each()方法遍历匹配的每一个元素,主要是用DOM处理,each每一个
  2. 里面的回调函数有两个参数:index是每一个元素的索引号,DOMEle是每个DOM元素对象,不是jQuery对象
  3. 所以要想使用jquery方法,就需要将这个DOM元素转换成jQuery对象

语法2:

$.each($('div'),function(index,DOMEle){
    xxxx;
})
  1. $.each方法主要是用于遍历数据,处理数据(对象,键值对之类)
  2. 其余与each方法相同

添加元素

内部添加

$(element).append('内容')//(类似appendChild)放在内容的最后
$(element).prepend('内容');//内部添加并且放到内容的最前面

外部添加

$(element).after('内容')//把内容放入目标元素后面
$(element).before('内容')//把内容放入目标元素前面

删除元素

$(element).remove()//删除element本体
$(element).empty()//清空element中的内容(元素,子节点)
$(element).html('')//同上

9. jQuery尺寸、位置操作

jQuery尺寸

语法 用法
width()/height() 取得匹配元素宽度和高度值 只算 width / height
innerWidth() / innerHeight() 取得匹配元素宽度和高度值 包含padding
outerWidth() / outerHeight() 取得匹配元素宽度和高度值 包含padding 、border
outerWidth (true) / outerHeight(true) 取得匹配元素的宽度和高度值 包含padding 、border、margin
  • 以上参数为空,则是获取相应值,返回的是数字型
  • 如果参数为数字,则是修改相应值
  • 参数可以不用写单位

jQuery位置

位置主要有三个:

offset();
position();
scrollTop();
scrollLeft();

offset() 设置或获取元素偏移
该方法设置或返回被选元素相对于文档的偏移坐标,和父级没有关系。
position() 获取距离带有定位父级位置(偏移) 如果没有带定位的父级,则以文档为准 ,position只能获取不能设置

例:

var top = $('.son').offset().top;//获取位置
$('.son').offset({
    top:100,
    left:100
})//设置位置

$('.son').position();
//position只能获取不能设置

scrollTop() / scrollLeft() 方法设置或返回元素被卷去的头部/左侧

$(window).scroll(function(){
    console.log($(document).scrollTop())
    $(document).scrollTop(100)//直接滚动到100像素的位置
})

案例:带有动画的返回顶部

核心原理:使用animate动画返回顶部

animate动画函数里面有个scrollTop属性,可以设置位置

$('.goBack').click(function(){
    $('.container').animate({
        scrollTop: 0;
    },520);
})
例:本站头部nav隐藏显示实现
//设置滚动事件,分为向上滚动和向下滚动
//当向下滚动的时候触发隐藏动画
//当鼠标向上滚动时触发显示动画
$(function(){
    var scrollPos = $(window).scrollTop();
    $('#kratos-header-section').css('transition','all .5s');
    $(window).scroll(function(){
        //向下滚动
        if($(this).scrollTop() >= scrollPos){
            //隐藏nav
            $('#kratos-header-section').css('top','-50px');
        }
        //向上
        else{
            //显示nav
            $('#kratos-header-section').css('top','10px');
            }
        scrollPos = $(this).scrollTop();
    })
})

10.jQuery事件

jQuery事件注册

单个事件注册

语法:element.事件(function(){})

$('div').click(function(){事件处理程序;})
$('div').mouseover(function(){事件处理程序;})
$('div').resize(function(){事件处理程序;})
$('div').change(function(){事件处理程序;})
$('div').keydown(function(){事件处理程序;})
$('div').scroll(function(){事件处理程序;})
...

jQuery事件处理

语法

element.on(events,[selector],fn)
  • events: 一个或多个用空格分隔的事件类型,如”click“或“keydown”。
  • selector:元素的子选择器。
  • fn:回调函数,即绑定在元素上的侦听函数

写法一:

$('div').on({
    mouseenter: function(){},
    click: function(){},
    scroll: function(){}
});

P.S : 如果事件处理程序相同,就可以使用下面这个写法

写法二:

$('div').on('mouseenter mouseleave',function(){
    alert("111");
})
  • 另外,on可以实现事件委托(委派)
  • 通过事件委托+on可以给未来动态创建的元素绑定事件

以下代码可以实现点击li弹出提示框,但是绑定事件的对象是ul
事件委派的定义是,把原来加给子元素身上的事件帮绑定在父元素身上,就是把事件委派给父元素

$('ul').on('click','li',function(){//触发对象是li
    alert(11);
})

只触发一次的事件:one()

$('div').one('click',function(){.....})//只触发一次

jQuery事件解绑

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

$("div").off();//解除div身上的所有事件
$("div").off('click');//解除div身上的click事件
$('ul').off('click','li')//解除事件委托

jQuery自动触发事件

自动触发事件 trigger() :

有些事件希望自动触发,比如轮播图自动播放功能和点击右侧按钮一致,可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发

element.click() //第一种简写形式
element.trigger('click') //使用trigger
element.triggerHandler("click")//使用triggerHandler

两者的区别:

trigger() 和 triggerHandler的区别就是triggerHandler 不会触发元素的默认行为

例:

//执行 .trigger 后 input 输入框自动获取焦点,触发事件的默认行为,而 .triggerHandler 仅仅 执行了指定的事件浏览器并未执行动作,输入框也没有获取焦点。
$('input').trigger("focus");//会触发元素默认行为,文本框内部会有光标闪烁
$('input').triggerHandler("focus")//不会触发元素默认行为,问呗内部没有光标闪烁

jQuery事件对象

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

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

其他格式与原生js类似。

jQuery对象拷贝

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

语法:

$.extend([deep],target,object1,[objectN])
  • deep: 如果设为true 就为深拷贝,默认为false 浅拷贝
  • target:要拷贝的目标对象
  • object1:待拷贝到第一个对象(target)的对象
浅拷贝
var targetObj = {
    id: 0
};
var obj = {
    id: 1,
    name: "kano",
    msg:{
        m: "hello"
    }
}
$.extend(targetObj,obj);//会覆盖原来的数据
//修改obj里面的msg
obj.msg.m = "dddddddd";
console.log(targetObj)//msg被修改了

由此可见,浅拷贝不会拷贝对象里面的复杂数据类型(另一个对象)

深拷贝
var targetObj = {
    id: 0,
     msg:{
        m: "hello123"
    }
};
var obj = {
    id: 1,
    name: "kano",
    msg:{
        m1: "hello"
    }
}
$.extend(true,targetObj,obj);//也会覆盖相同的数据,但如果里面有不冲突的属性,会合并到一起
//修改obj里面的msg
obj.msg.m = "dddddddd";
console.log(targetObj)//msg不变

深拷贝会递归对象,会把对象完整的复制过去,遇到相同的对象会进行合并,而不是覆盖

jQuery多库共存

jQuery使用$作为标识符,随着jQuery的流行,其他js库也会使用$作为标识符,这样一起使用会引起冲突
所以需要一个解决方案,让jQuery和其他的js库不存在冲突,可以同时存在,这就叫多库共存

解决方案

  • 把里面的 $ 符号统一改为 jQuery,比如 jQuery('div')
  • jQuery变量规定新的名称:$.noConflict() / jQuery.noConflict() var xxx = $.noConflict();
var xxx = $.noConflict();//使用过后原来的$就不能用了
xxx("div").show();
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注