jQuery笔记
2022-09-27 22:36:41 # jquery #code #jquery

jQuery概述

image-20220805110605056

jQuery是一个JavaScript库，是对原生JS的封装，内部仍旧是JS实现的

image-20220805110931749

image-20220805111025100

jQuery的基本使用

jQuery download

script加载顺序

  1. 等着页面DOM加载完毕再去执行js代码

    相对传统写法

    1
    2
    3
    $(document).ready(function(){
    	xxx
    })

  2. 等着页面DOM加载完毕再去执行js代码

    相对简洁，推荐使用

    1
    2
    3
    $(function(){
    	xxx
    })

image-20220805112750724

jQuery的顶级对象 $

image-20220805113137854

1
2
3
4
5
6
7
8
//方法1
$(function(){
	alert(1)
})
//方法2
jQuery(function(){
	alert(1)
})

jQuery对象和DOM对象

image-20220806182502209

DOM对象只能调用DOM方法，jQuery对象只能调用jQuery方法

1
2
//调用div
$('div')

DOM对象和jQuery对象之间的转换

image-20220806182829872

image-20220806182842701

1
2
var myVideo=document.querySelector('video');
$(myVideo);//不用加引号

console.dir打印之后发现$(‘div’)是以伪数组的形式存储的

image-20220806183303057

1
2
3
//play()是一个方法
$('div')[0].play();
$('div').get(0).play();

jQuery常用API

image-20220806183550492

选择器

基础选择器

image-20220806183954044

注意： $(‘div’)返回的是一个伪数组，要想真正获取其中的元素，要加索引号，例如：

1
2
console.log($('div')[0]);
console.log($('div').get(0));

层级选择器

image-20220806184711791

隐式迭代

image-20220807171832048

1
2
//会将所有的div设置样式
$('div').css();

筛选选择器

image-20220807172201280

$()里面的都是对象，所以:first、:laster、:eq(index)等的需要写到$()里面

筛选方法

注意： 是方法

image-20220807172250492

1
$('ui').children();//将所有的儿子选出，不会把孙子辈的选出来
1
$('ul').siblings('li');//除了自身节点之外的所有亲兄弟
1
2
3
4
//筛选选择器
$('ul li:eq(2)').css();
//筛选方法,推荐写法
$('ul li').eq(2).css();

小项目：新浪下滑菜单,多种做法

应用了隐式迭代，内部绑定事件

show()、hide()方法

1
2
3
4
5
6
7
8
9
10
<script>
    $(function(){
        $('.nav>li').mouseover(function(){
            $(this).children('ul').show();
        })
        $('.nav>li').mouseout(function(){
            $(this).children('ul').hide();
        })
    })
</script>

排他思想

例如：点击当前按钮后更改颜色，其余按钮无颜色

1
2
3
4
5
6
7
8
9
$(function(){
    //隐式迭代，给所有的按钮绑定了click事件
    $('button').click(function(){
        //设置当前按钮颜色
        $(this).css('background','pink');
        //让当前按钮的button兄弟节点更改为无颜色
        $(this).siblings("button").css('background','');
    })
})

小项目：淘宝服饰精品

获得当前索引号

相比于用原生JS，jQuery更简洁

1
$(this).index()//是方法，要加（），从0开始

在获取li的索引号时，不需要提前设置每个li的索引号

链式编程

image-20220809210207773

相当于以下代码

1
2
$(this).css('color','red');
$(this).siblings().css('color','');

注意是哪个对象执行样式

去除重复，以达到简洁

样式操作

操作css方法

image-20220809212208919

1
2
3
4
5
6
//注意用花括号括起来
$('div').css({
	width: 400,
	height: 400，
    backgroundColor: 'pink'
})

如果是复合属性，要用驼峰命名法

设置类样式方法

image-20220809213534169

注意： 里面的类名不能加.

小项目：tab栏切换

上面设置css是给伪数组形式的元素设置，而不是直接的元素形式，所以可以通过

$(‘div’).eq(index).css()进行设置，而$(‘div’)[index]是直接的DOM元素形式，jQuery方法不能被DOM对象调用的，所以不正确

类操作与className区别

image-20220810122157443

效果

image-20220810122338194

显示隐藏效果

  1. show()
1
show([speed,[easing],[fn]])	//[]可以省略

image-20220810123030786

  1. hide()

    参数规范和上述相同

  2. toggle() 切换

    参数规范和上述相同

在实际开发中一般是不用参数的

滑动

  1. solideDown() 下滑

    image-20220810130333391

  2. slideUp() 上滑

    参数规范和上述相同

  3. slideToggle() 滑动切换

    参数规范和上述相同

小项目：新浪下滑菜单动画优化版

1
2
3
4
5
6
7
$('.nav>li').mouseover(function(){
    // $(this).children('ul').show();
    $(this).children('ul').slideDown(200);
})
$('.nav>li').mouseout(function(){
    $(this).children('ul').slideUp(200);
})

事件切换

image-20220810132627073

  1. 两个函数都写时，在移入和移除时分别执行
  2. 只写一个函数时，在移入、移除时执行同一个函数

小项目：新浪下滑菜单切换优化版(两个函数)

更加简洁

$(’ ').hover()

1
2
3
4
5
6
7
8
$('.nav>li').hover(
    function(){
        $(this).children('ul').slideDown(200);
    },
    function(){
        $(this).children('ul').slideUp(200);
    }
)

小项目：新浪下滑菜单切换终极优化版(一个函数)

1
2
3
4
//使用hover()时只含一个函数，但存在bug:短时间内多次触发动画问题
$('.nav>li').hover(function(){
    $(this).children('ul').slideToggle(200);
})

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

短时间内多次触发动画，会使得动画形成一个动画队列，当鼠标移除动画触发范围时，动画仍旧会继续执行

image-20220810133304019

小项目：新浪下滑菜单切换终极优化bug版(一个函数)

1
2
3
$('.nav>li').hover(function(){
    $(this).children('ul').stop().slideToggle(200);
})

淡入淡出

  1. fadeOut() 淡出

image-20220810133453817

  1. fadeIn() 淡入

  2. fadeToggle() 淡入淡出切换

    上述规范相同

  3. fadeTo() 以渐进方式调整到指定的不透明度

    image-20220810134308403

    注意： 是调整的不透明度(不透明度为1表示是不透明的)，speed和opacity必须写

小项目：高亮显示案例

自定义动画animate

image-20220810161358481

里面的params以键值对形式，因为是元素做动画，所以要用DOM元素

1
2
3
4
5
6
7
$('button').click(function(){
    $("div").animate({
        left: 200,
        top: 200,
        opacity: .4
    },500)
})

小项目：折叠卡片/手风琴

1
2
3
4
$('ul li').mouseenter(function(){
    $(this).stop().animate({width: 224}).find('.small').stop().fadeOut().siblings().stop().fadeIn();
    $(this).siblings('li').stop().animate({width:69}).find('.big').stop().fadeOut().siblings().stop().fadeIn();
})

注意： 要在动画前面加stop()

属性操作

1
$('div').change(function(){});//当div发生变化时调用函数

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

property:属性的意思

image-20220810191930580

是获取不了自定义属性的

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

image-20220810192559840

好像是获取不了元素自带的属性

设置自定义索引：

1
2
3
for(var i=0;i<$('div').length;i++){
    $('div').eq(i).attr('data-index',i);
}

数据缓存data()

image-20220810195411179

这里面的数据是存放在元素的内存里面的

获取H5自定义属性 data-index时不用写data-，并且返回的是数字型

1
2
$().data('uname','andy');
$().data('index');//获取data-index

小项目：购物车模块全选

1
$('input:checked');//自动获取复选框选中的个数

元素自带属性要用prop()，自定义属性用attr()，一定要注意，否则样式不会生效

文本属性值

image-20220810204515874

image-20220810204652764

例如清空文本框内容$('textarea').val("");

小项目：购物车模块-增减商品数量

注意： 程序里面有 return false,后面的代码就不会执行了

保留几位小数

保留几位小数： (100/3).toFixed(2) -> 33.33

返回指定祖先元素

parents('选择器') 可以返回指定的祖先，注意是parents

元素操作

遍历元素

  1. each(function(index,domEle)){}

image-20220811173810613

index和domEle可以用其他自定义变量名称代替，使用jQuery对象时，需要将DOM对象转换为jquery对象，里面的是回调函数

  1. $.each(调用对象,function(index,domEle){})

image-20220811175129888

例如：

1
2
3
4
var arr=[];//数组
$.each(arr,function(index,domEle){
	console.log(index,domEle);
})
1
2
3
4
$.each({name:"andy",age: 18},function(index,domEle){
	console.log(index,domEle);
})
//这里的index会把name、age输出，domEle将andy、18输出

创建元素

image-20220811180758773

1
var li = $('<li>i am the last one</li>')

实际上创建了一个新的标签对象，再将其添加到合适位置即可

添加元素

  1. 内部添加

    image-20220811181248083

    1
    2
    var li=$('<li>hello world</li>');
    $('ul').append(li);

  2. 外部添加

     ![image-20220811181311419](image-20220811181311419.png)

1
2
var div=$('<div>hello world</div>');
$('.demo').after(div);//在demo的后面插入新创建的div

区别: 内部添加是父子关系，外部添加是兄弟关系

删除元素

image-20220811182548391

1
2
3
$('ul').remove();//谁调用谁删除
$('ul').empty();//将ul中的所有li删除
$('ul').html("");

小项目：购物车删除模块，属于购物车模块

尺寸、位置操作

尺寸

image-20220811184021291

位置

image-20220811184629724

通过键值对的形式设置

image-20220811184740160

position只能获取，不能设置

image-20220813194901320

页面滚动事件： $(window).scroll(function(){})

节流阀/互斥锁

两个函数不能同时执行，开个变量flag解决即可。

jQuery事件

事件注册

  1. 单个事件注册：

    image-20220814212242737

事件处理

image-20220814212903622

image-20220814215448166

1
2
3
4
5
6
7
8
9
//不同事件分别触发不同的函数
$('div').on({//注意花括号
	mouseenter: function(){
		alert('1');
	},
	click: function(){
		alert(2);
	}
})
1
2
3
4
//多个事件触发统一事件
$('div').on("mouseenter mouseleave",function(){
    alert(1);
})

image-20220815124030985

image-20220815124428835

1
2
3
4
5
$('ol').on("click","li",function(){
	alert(1);
})
var li=$('<li>hello world</li>');
$('ol').append(li);

on给后来插入的标签创建click事件

传统方式下在事件之前创建元素幷插入也是可以的

1
2
3
4
5
var li=$('<li>hello world</li>');
$('ol').append(li);
$('ol').click(function(e){
    console.log(e.target);
})

小项目：微博发布信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function(){
    $('.btn').click(function(){
        if($('.message').val()){
            var li=$('<li></li>');
            li.html($('.message').val()+'<p>删除</p>');
            $('ul').prepend(li);
            li.slideDown();
            $('.message').val("");
        }
        $('.details ul').on('click','p',function(){
            $(this).parent().slideUp(function(){
                $(this).remove();
            });
        })
    
    })
})

2. 事件处理off()解绑事件

image-20220816162336259

1
2
3
4
$('div').on({})；
$('div').off();//将div的所有事件解绑
$('div').off('click');//接触某一个事件
$('div').one('click',function(){});//只会执行一次，执行完之后就不需要解绑了

3.自动触发事件trigger()

image-20220816163220933

image-20220816163238548

1
$(selector).trigger(event,[param1,param2,...])

triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。

triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。

  • 它不会引起事件（比如表单提交）的默认行为
  • .trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
  • 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
  • 该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--triggerhandler-->
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("发生 Input select 事件！");
  });
  $("button").click(function(){
    $("input").triggerHandler("select");
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
<p>请注意，与 trigger() 方法不同，triggerHandler() 方法不会引起所发生事件的默认行为（文本不会被选中）。</p>
</body>
</html>
<!--与 trigger() 方法不同，triggerHandler() 方法不会引起所发生事件的默认行为（文本不会被选中-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--trigger-->
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本被选中！");
  });
  $("button").click(function(){
    $("input").trigger("select");
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
</body>
</html>
<!--会执行默认行为-->

事件对象

image-20220816165124091

更多方法参考webAPI中讲解的内容

jQuery其他方法

image-20220816165425227

拷贝对象

image-20220816170703217

上面的是对象{}拷贝，不是标签

分析

  1. targetObj{}为空
1
2
3
4
5
6
7
8
9
$(function(){
    var obj={
        id: 1,
        name: 'andy'
    }
    var targetObj={}
    $.extend(targetObj,obj);
    console.log(targetObj);
})

  1. targetObj{}不为空时会覆盖targetObj原来的数据

  2. deep

    浅拷贝只是将地址拷贝给了目标对象，修改两个其中一个，另一个也会跟着改变

    image-20220816171409423

    深拷贝会将所有的数据拷贝另外开辟一个地址存储，不会拷贝地址，两者数据不会共享，冲突的数据会覆盖，不冲突的保留

    image-20220816171745028

标签拷贝

image-20220816165905026

image-20220816165914181

多库共存

自己写的代码有$符号，而jQuery又自带$,会产生冲突,例如：

1
2
3
4
5
6
7
$(function(){
	function $(ele){
		return document.querySelector(ele);
	}
	$('div');//自定义的函数也带有$
	$.each();//会报错，它不知道$是jQuery的还是自定义函数的
})

image-20220816172554240

如果jQuery还是冲突，就将$让用户自己重命名：var xxx=$.noConflict()

jQuery插件

要先引入jQuery插件

  1. 插件

image-20220816174019097

第二个插件地址停更至2020

  1. 图片懒加载插件

    image-20220816175104060

  2. 全屏滚动

    image-20220816175644512

ToDoList案例

上一页
2022-09-27 22:36:41 # jquery #code #jquery
下一页