jQuery学习笔记

小x今天暴富了吗

于 2021-07-10 11:33:24 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/Sawada00/article/details/118633079

版权

jQuery

文章目录

jQuery

1 jQuery的优势

可以写多个路口函数
api名字容易记忆
代码简洁（隐式迭代）
帮我们解决了浏览器的兼容问题
容错率较高，前面代码出现问题，后面代码不受影响

1.1 什么是jQuery

jQuery就是一个封装了很多方法的JavaScript库。
我们学习jQuery就是学习jQuery中封装的一大堆方法。
jQuery文件是一个立即执行函数，这个文件就是给window对象添加一个jQuery属性和$属性。

1.2 如何使用jQuery

引入jQuery文件
写一个入口函数

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

<script>//第二种写法
$(function (){
    
});
</script>

找到要操作的元素（jquery选择器），去操作（添加属性、样式、文本…）

1.2.1 jQuery入口函数和window.onload（）入口函数的区别

window.onload入口函数不能写多个，但是jQuery可以
执行时机不同：jQuery快于window.onload

1.2.2 $是什么

$是一个函数，参数传递不同，效果也不同
如果参数传递的是一个匿名函数-入口函数
如果参数传递的是一个字符串-选择器/创建一个标签
如果参数传递的是一个dom对象，那就会吧dom对象转换成jQuery对象

1.3 dom对象

原生js选择器获取到的对象
特点：只能调用dom方法或者属性，不能调用jQuery方法或者属性

如何转换为jQuery对象？

var div1=document.getElementById("one");
var $div1=$(div1);

1.4 jQuery对象

jQuery选择器获取到的对象
特点：只能调用jQuery方法或者属性，不能调用dom方法或者属性
伪数组，其实就是dom对象的一个包装集

如何转换成dom对象？

使用下标

var $divs=$('div');
var div1=$divs[0];

使用jQuery的get方法

var div2=$divs.get(0);

1.5插件：

jq22.com

1.6开关灯练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../jquery-1.12.4.js"></script>
<body>
    <button>开灯</button>
    <button>关灯</button>
   
</body>
</html>
<script>
     $(function(){
         var btns=document.getElementsByTagName("button");
         $(btns[0]).click(function(){
             $('body').css('background','white');
         });
         $(btns[1]).click(function(){
             $('body').css('background','black');
         });
         

});
</script>

2 方法

2.1 text（）

获取文本，无参数

$('#div1').text();

会获取标签中所有包括后代元素的文本

设置文本，传递参数

$('#div1').text('我是文本');

2.2 css（）

行内样式
参数为要获取的样式名

$('#div1').css('width');

获取包含多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式
- 例如：获取标签为div的元素们的样式，只能得到第一个div标签元素的样式
设置样式：css（样式名，样式值）

$('#div1').css('width','300px');

$('#div1').css({    width:300,    'height':'300px',    'background-color':'green',});

2.3 addclass（）

给元素添加类

$('#div1').addclass('fontSize 30 Width20')//添加多个类

2.4 removeclass（）

给元素移除类

$('#div1').removeclass('fontSize 30 Width20')//移除多个类

2.5 hasclass（）

判断一个元素有无某个类，若有返回true，否则返回false

$('#div1').hasClass('fontSize30');

2.6 toggleClass（）

如果元素有某个类就移除这个类，没有这个类就添加这个类

$('#div1').toggleClass('fontSize30');

2.7 val（）

获取，设置表单元素的值
无参数：获取表单的值
有参数：设置表单的值

$('text').val('我是设置的值');

2.8 offset（）

获取元素距离document的位置：top left

2.9 position（）

获得元素距离有定位的父元素的位置：top left

2.10 scrollLeft（）

表示元素内容被卷曲出去的宽度（滑过去的距离的长度）

参数：希望元素被卷曲的宽度

2.11 scrollTop（）

表示元素内容被卷曲出去的高度（滑过去的距离的长度）

参数：希望元素被卷曲的高度

2.12 each（）

$lis.each(function(index,element){    //index:每个标签的索引    //element:每个标签都是一个dom对象});

3 选择器

jQuery提供的方法，便于更方便的获取页面中的元素。jQuery选择器返回的是jQuery对象。

3.1基本选择器

ID选择器：$(‘’#id’)
类选择器：$(‘.class’)
标签选择器：$(‘div’)
并集选择器：$(‘div,p,li’)
交集选择器：$(iddiv)

3.2层次选择器

子代选择器：$(‘ul>li’)
后代选择器：$(‘ul li’)

3.3过滤选择器

：eq（index）
- $(‘li:eq(2)’).css(‘color’,’red)
- 获取到li元素中索引为2的元素，index从0开始
：odd
- $(‘li:odd’).css(‘color’,’red)
- 获取li元素中，索引号为奇数的元素
：even
- $(‘li:even’).css(‘color’,’red)
- 获取li元素中，索引号为偶数的元素

3.4 筛选选择器

主要是方法。

children(selector)
- $(‘ul’).children(‘li’)
- 子代选择器
find(selector)
- $(‘ul’).find(‘li’)
- 后代选择器
siblings(selector)
- $(‘#first’).siblings(‘li’)
- 查找兄弟节点，不包括自身
parent()
- $(‘#first’).parent()
- 查找父亲
eq(index)
- $(‘li’).eq(2)
- 相当于$(‘li:eq(2)’)
next()
- $(‘li’).next()
- 找下一个兄弟
prev()
- $(‘li’).prev()
- 找上一个兄弟

4 事件

4.1鼠标移入

mouseover()鼠标移动到选取的元素及其子元素触发
mouseenter()鼠标移动到选取元素触发

4.2鼠标离开

mouseleave

4.3 事件注册

on委托注册

支持动态注册

$('body').on('click','div',function(){    console.log("单击事件");});

4.4 事件解绑

off（）

不给参数：解绑所有事件

给参数：解绑指定事件

4.5 事件触发

trigger（）

用代码的方式触发事件,可用来触发自定义事件

$('#one').trigger('click');

4.6 事件对象

注册一个事件，系统会帮我们生成一个对象记录这个事件触发时候的一些信息。用事件参数e来获取

screenX和screenY 屏幕左上角到该点的值

clientX和clientY 距离页面左上角的值（忽略滚动条）

pageX和pageY 距离页面左上角的值（计算滚动条的距离）

event.stopPropagation（）阻止事件冒泡行为

event.preventDefault（）阻止浏览器默认行为

return false 既能阻止事件冒泡，又能阻止浏览器默认行为

event.keycode 按下的键盘代码

5 动画

三组基本动画

显示（show）与隐藏（hide）是一组动画
滑入（slideDown）与滑出（slideUp）与切换（slideToggle），效果与卷帘门类似
淡入（fadeln）与淡出（fadeOut）与切换（fadeToggle）

5.1 show（）显示

参数1：代表执行动画的时长毫秒数
也可以是代表时长的字符串 fast normal slow
参数2：带包动画执行完毕后的回调函数

$('#div1').show(2000,function(){	alert('动画执行完毕');});

5.2 hide（）隐藏

用法同show（）

5.3 toggle（）切换

如果元素是隐藏状态就动画显示，是显示状态就动画隐藏

5.4 slideDown（）滑入

不带参数也有动画效果

参数1：动画执行时长
参数2：动画执行完毕后的回调函数

5.5 slideUp（）滑出

用法同slideUp()

5.6 slideToggle（）切换

用法同5.3

5.7 fadeIn（）淡入

5.8 fadeOut（）淡出

5.9 fadeToggle（）切换

5.10 fadeTo（）淡入到具体的透明度

$('#div1').fadeTo(200,0.5);

5.11 animate（）自定义动画

参数1：必选的对象代表需要做动画的属性
参数2：可选的执行动画的时长
参数3：可选的代表缓动还是匀速swing linear 默认不写是缓动
参数4：动画执行完毕后的回调函数

$('#div1').animate({	left:800,	width:200},2000,'linear',function(){	alert('动画执行完毕');});

5.12 stop（）停止动画

参数1：是否清除动画队列
参数2：是否跳转到最终效果

$('#div1').stop(true,false)

6 节点

6.1 创建节点

6.1.1 html（）

设置或者获取内容
不给参数获取到元素的所有内容
设置参数会覆盖原有的内容，若参数中包含标签，则可将标签解析出来

$('#div1').html('设置内容<a href="https://www.baidu.com">百度一下</a>');

6.1.2 $（）

能创建元素，但是只存在于内存中，若想在页面上显示，则需要追加

var $link=$('<a href="https://www.baidu.com">百度一下</a>');$('#div1').append($link);

6.2 添加节点

6.2.1 append（）

父元素.append（子元素） //作为最后一个子元素添加

var $li2=$('#li2')$('#ul1').append($li2)

6.2.2 prepend （）

作为第一个子元素添加，用法同上

6.2.3 before（）

元素A.before（元素B） //把元素B插入到元素A的前面，作为兄弟元素添加。

6.2.4 after（）

元素A.after（元素B） //把元素B插入到元素A的后面，作为兄弟元素添加。

6.2.5 appendTo（）

子元素.append（父元素）//把子元素作为父元素的最后一个子元素添加。

6.3 清除节点

6.3.1 empty（）

清空元素

$('#ul1').empty();

6.3.2 remove（）

移除某一个元素

自身.remove（）

6.4 克隆节点

6.4.1 clone（）

只存在于内存中，如果要在页面上显示，就应该追加到页面上

参数：true false 默认false
true：会把事件一起克隆
false：不会克隆事件

var $cloneDiv =$('#div1').clone();$('body').append($cloneDiv);

7 操作属性

7.1 attr（）

设置属性

$('img').attr('src','xxx.gif');//以前有src属性，更改这个属性$('img').attr('aaa','xxx');//修改自定义属性$('img').attr('bbb','xxx');添加自定义属性

$('img').attr({    src:'xxx.gif',    aaa:'xxx',    bbb:'xxx'});

获取属性

$('img').attr('src');

如果没有该属性则返回undefined

7.2 removeAttr（）

移除属性

$('img').removeAttr('src');$('img').removeAttr('src aaa bbb');//移除多个属性

7.3 prop（）

对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法。

7.4 width（）

设置、获取宽度，不包括内边距、边框、外边距

$('#one').width(300);

7.5 height（）

设置、获取高度，不包括内边距、边框、外边距

7.6 innerWidth（）

返回元素的宽度（包括内边距）

7.7 innerHeight（）

返回元素的高度（包括内边距）

7.8 outerWidth（）

返回元素的宽度（包括内边距和边框）

加上参数true则返回内边距和边框和外边距

7.9 outerHeight（）

返回元素的高度（包括内边距和边框）

加上参数true则返回内边距和边框和外边距

8 链式编程

什么时候使用？

如果给元素调用一个方法，这个方法有返回值，并且返回值是jQuery对象，那么就可以继续使用jQuery方法。

end（）

回到上一个状态

小x今天暴富了吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记

jQuery文章目录jQuery1 jQuery的优势1.1 什么是jQuery1.2 如何使用jQuery1.2.1 jQuery入口函数和window.onload（）入口函数的区别1.2.2 $是什么1.3 dom对象1.4 jQuery对象1.5插件：1.6开关灯练习2 方法2.1 text（）2.2 css（）2.3 addclass（）2.4 removeclass（）2.5 hasclass（）2.6 toggleClass（）2.7 val（）2.8 offset（）2.9 positio
复制链接

扫一扫